amaderbook

Blogspot Tutorial

amaderbook — Fri, 15 Oct 2010 08:06:17 +0000

A Simple Drop-Down Menu Using Jquery

amaderbook — Sun, 21 Feb 2010 08:02:11 +0000

STEP1:
Log in to Blogger, go to “Layout” -> “Edit HTML“

STEP2:
Now find this code:

and immediately BEFORE/ABOVE it, paste this code:

Now before you save the template, make these changes in the code

To get the HTML color codes, you can refer to this image:
http://homepages.ulb.ac.be/~dgonze/INFO/htmlcolors.png
STEP3:
and go to “Layout” -> “Page Elements“
and click on “Add a Gadget“, select it as “HTML/JavaScript” type

and finally paste this code in to the new widget:

JavaScript

Effect

Navigation

HTML/CSS

Blogger Help

And save the widget.

Add Yahoo Smiley Emoticons Above Blogger/BlogSpot Comment Form

amaderbook — Sat, 20 Feb 2010 22:29:15 +0000

Just copy and paste this code everytime………………..blogspot:

) ) ;;) :p ( :X =(( :-/ :-* 8-} ] ~x( :-t b-( :-L x( =))

Simple Page Peel Effect For Blogger

amaderbook — Sat, 20 Feb 2010 20:26:10 +0000

Just login to Blogger,
Go To Layout > Edit Html > Press Ctrl + F

Now search for

And place the below codes above it.

Now search for tag and place the below code after it.

http://feeds2.feedburner.com/anshuldudeja‘>http://www.wallheaven.com/page_flip.png‘/>

Add Falling Snowflakes to Your Blog

amaderbook — Sat, 20 Feb 2010 18:46:45 +0000

1. Sign into Blogger dashboard
2. Go to Layout » Add a gadget » html/javascript

3. Just copy and paste this code..

demo

Dancing Links – That’s Jquery Link Nudging

amaderbook — Sat, 20 Feb 2010 17:56:05 +0000

STEP #1
Log in to Blogger and go to Layout -> Edit HTML
and find (CTRL+F) this code in the template:

STEP #2
Now immediately ABOVE/BEFORE it, paste this code:

And save the template.

Now whenever you want to add this dancing effect to any of your links/images (either in widgets/posts), add this code (class=”nudge”) to the HTML “a” tag, like this:

class=”nudge“>Link-Text

and to use images instead of text, use this code:

class=”nudge“>http://i41.tinypic.com/5wf6h5.jpg“/>

That’s it. Let your images dance for your readers!

How to add Back To Top button codes

amaderbook — Sat, 20 Feb 2010 09:21:14 +0000

First of all, login to your blogger admin panel and go to Layout > Edit HTML; therein, find out this code

 ]]>
And before it add this code
 
 #backtotop {
padding:5px;
position:fixed;
bottom:10px;right:10px;
cursor:pointer;
}
Step 2
 

find the following code:



and before it add the next code
button-image-url"
alt="back to top" />
But before adding this code to your template please choose your favorite button of the following And change the words in red, Image-Url to the button url.
 


http://3.bp.blogspot.com/_JwD5r652h00/SvDAnTlDfDI/AAAAAAAAAQY/y-NAytkDXjI/s1600/bttp-5.png
 


http://2.bp.blogspot.com/_JwD5r652h00/SvDAnGbH7qI/AAAAAAAAAQQ/qKtrVmPCBXY/s1600/bttp-4.png
 


http://1.bp.blogspot.com/_JwD5r652h00/SvDAmyqvA9I/AAAAAAAAAQI/hACE99TswzU/s1600/bttp-3.png
 


http://1.bp.blogspot.com/_JwD5r652h00/SvDAmXE1tvI/AAAAAAAAAP4/pQk69X73NIo/s1600/bttp-1.png
 


http://1.bp.blogspot.com/_JwD5r652h00/SvDAmVOZPMI/AAAAAAAAAQA/_Y2Nd0UZVMM/s1600/bttp-2.png
 


http://4.bp.blogspot.com/_JwD5r652h00/SvDBBZGgr-I/AAAAAAAAAQg/1X96vgeWqaw/s400/bttp-6.png0/bttp-7.png
 


http://2.bp.blogspot.com/_JwD5r652h00/SvDBCN6PpfI/AAAAAAAAARA/oEpqkKnL0Jw/s400/bttp-10.png
 


http://2.bp.blogspot.com/_JwD5r652h00/SvDBBw_U6MI/AAAAAAAAAQ4/KDKaH8OTDO4/s400/bttp-9.png
 


http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png
 


http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40
 


http://4.bp.blogspot.com/_JwD5r652h00/SvDBWWig4UI/AAAAAAAAARI/28cXbIDOaqk/s400/bttp-11.png
 


http://4.bp.blogspot.com/_JwD5r652h00/SvDBWmm_WTI/AAAAAAAAARQ/xfyALfcAbZ4/s400/bttp-12.png
 


http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png
 


http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png
 


http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png
 


http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png
 


http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png
 


http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png
 


http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png
 

After Replacing the Image-Url with your favorite button url, it should looks like this
http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png" alt="back to top" />
 

paste it into your template code
Step 3

Find the following code

 

And paste this code after it.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
type='text/javascript'></script>
<script language="javascript">
$(window).ready(function(){
$('#backtotop').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
});
</script>
 
and then click Save Template 
And you are done.

add Share on digg To Blogger Blogs

amaderbook — Sat, 20 Feb 2010 08:38:29 +0000

STEP #1

Now find this code:

And immediately BEFORE/ABOVE it, paste this code:

Now find this code in the template:

And immediately ABOVE/BEFORE it, paste this code:

$.prettySociable();

Save The Template.

STEP #2

IMPORTANT: Now whenever you want to apply this hack to any of your images/hyperlinks (links), then add a rel=”prettysociable“ attribute to the “a” tag. (You can edit your previous posts to add this attribute to your images).

For example, a link (hyperlink) with this hack will look like this:

rel=”prettysociable“>Link To Google

and a linked image with this hack will look like this:

rel=”prettysociable“>

STEP #3

Download and save the files used in this tutorial as a backup on your PC [Download Link]

how to Comment Blog Send To @Mail

amaderbook — Sat, 20 Feb 2010 07:23:16 +0000

Click Settings.

Click Comments.

Scroll to underside and you will find a box near the article Comment Notification Address, write your email address inside the box. for example : jalupapang2000@yahoo.com

Finish.

how Blogger Tag Cloud Widget by Categories / Labels!

amaderbook — Fri, 12 Feb 2010 11:16:37 +0000

Now go to Layout >Edit HTML

Make sure that the “Expand Widgets Template” box is unchecked.

Now we need to search for the code that looks like this.

Immediatly after this line, paste the following section of code:

Then preview your template. If installed correctly, you should see the tag cloud appear in your sidebar. Then you are free to save your template, edit the colors and dimensions as required, or move it to a different location. That’s all!

Customizing Blogumus

In this default installation, Blogumus includes the following preset variables:

Width is set to 240px
Height is set to 300px;
Background color is white
Test color is grey
Font size is “12″

If you would prefer to make your widget wider, shorter, change the color scheme, etc, you will need to do this by editing various parts of the code. I’ll go through these options in the order they appear in the widget code. Editing width and height The variables for width and height are found in this line of the script:

var so = new SWFObject(“http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf”, “tagcloud”, “240“, “300“, “7″, “#ffffff”);

The width (currently 240) is highlighted in red, while the height (300px default) is highlighted in blue. These numerical values specify the width and height in pixels, so you can alter these of you prefer. Editing background color You can change the background color from white to any other color by altering the hex value in the same line:

var so = new SWFObject(“http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf”, “tagcloud”, “240″, “300″, “7″, “#ffffff“);

For example, if you prefer a bright red background, you may replace #ffffff with #ff0000. Take a look at this page for a list of commonly used hex color codes. Alter the color of text By default, the text is set to display as dark grey ( hex value #333333). You can alter this variable in the following line:

so.addVariable(“tcolor”, “0x333333“);

Be aware that “tcolor” is a Flash variable and doesn’t include the usual hash symbol of hex color codes. Be sure to only replace the numbers! Adjust the font size The maximum font size of tags is specified in this line:

so.addVariable(“tagcloud”, “12‘>”);

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing “12″ to a larger or smaller number. While making any of these changes, you should be able to preview your widget and be certain that your new choice of color, dimensions and background are suitable for your needs.