Blogger Graphics / Effects Tricks

Tutorials about decorating and adding effects to blogger blog with graphics and images, decorate and customize your template, comments, posts and images.

47

How To Change Blogger Mouse Cursors In Easy Way ( + 1000 Free Cursors )
I know a lot of blogger who want to control the look of every part of the blog, from template, to colors, font size, to style, and some people asked about changing the blogger mouse cursor, So today we are gonna talk about it in the easy way,
It can be done in only one step. Want to see a demo, then please click below and look how mouse is looking.

How to add it.

Go to your blogger account, And navigate to dashboard >> design >> edit html >>
And find the following code,
```
]]></b:skin>
```
And exactly before it, add the following code
```
body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}
```
And now click Save Template

The above step will give you a mouse cursor just like the one in the above demo blog, And because the aim of this tutorial is to give you all control over your blog cursor, So you can just change the red part in the above code
http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif
To What ever cursor url you like, So the code should be
```
body, a, a:hover {cursor: url(Cursor-Url), progress;}
```
And the question now is how to get another cursors.

Free sources for +1000 ready to use mouse cursors.

On this 2 links you’ll find more than 1000 free and ready to use cursors well categorized, so you just browse and find your favorite one, once you found your favorite one, replace the red words in the above code with it’s url.
- Totally Free Cursors
- Cursors @ Fun Utilities
Tip: To know more about how to get any image url from the above sites, Please read this.

73

Adding QueryLoader (‘LazyLoad’) Script For Blogger And Customize It.
Hi all hear visitors, It’s been a long time since i wrote my latest tutorial here, and sure this is because working on our new version, which released last week, i wish you liked it all,
Today we are going to learn a new tutorial about how to apply the QueryLoader (LazyLoad) script for your blogspot blog.

What is the QueryLoader (LazyLoad).

QueryLoader is a blank black ( can be changed ) screen that covers your blog till all content loaded, which means that your visitors won’t see the actual loading of your blog, instead of that, they will see a loading page with a bar and percentage of the overall blog loading, it’s build using j-query and css. easy to apply to your blogger blog, and customize able.

Step 1, adding the jave files.

In this step we will add a scripts files to your blogger template.
Please navigate to your dashboard >> Design >> edit html , and please find the following code,
```
</head>
```
And exactly before it add the following code
```
<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/> 
```
Step 2, adding the jave Codes.

And on the same page, please find the following code,
```
</body>
```
And before it add the next code,
```
<script>
	QueryLoader.selectorPreload = &quot;body&quot;;
	QueryLoader.init();
</script>
```
Step 3, adding the Css Codes.

now on the same page too, find this code,
```
]]></b:skin>
```
And before it , add this code,
```
.QOverlay {
	background-color: #000000;
	z-index: 9999;
}

.QLoader {
	background-color: #CCCCCC;
	height: 1px;
}

.QAmt {
	color:#FF530D;
	font-size:50px;
	font-weight:bold;
	line-height:50px;
	height:50px;
	width:100px;
	margin:-60px 0 0 -50px;
}
```
now Click Save Template
And your blog now have the script installed and ready, click preview or view your blog to see the script in action.

Additional Step, Customize the colors.

Now this is an extra step and you can do it or not, as you like,

If you want to change the colors, you have to change values in the css code, “step 3″
Please look at the following image to know what what you should change to get your own style.

If you wondering about how to get your own color codes, i think you should have a look at our amazing color codes tool here.

Demo, Credits, And files.

This script originally coded by gayadesign.com and customized for blogger by me , For a demo for this script please click here,
In case you wanted to host the file in step 2 on your own server or any where else, you can download it here, Note: There is a file embedded within this post, please visit this post to download the file.

34

How To Use Google Custom Fonts For Blogger.
For years, Bloggers and web-designers were using those simple web fonts to style their blogs and templates. They didn’t had an option to change those fonts as there were only some fonts accepted world-wide as web fonts. It was impossible to use another fonts on web pages as they would appear in ten monitors in ten different styles ! Their appearance may change in respect of the change in the OS, softwares … etc of that computers. So web-designers were trapped under those countable fonts…

But now Google has launched their new service Google web fonts with the slogan – ‘Making the Web Beautiful!’. This service will allow you to use custom fonts on google font directory on our blog/ websites without any sign-up or anything else. As it’s from ‘Google’, It doesn’t have any complications and it’s also completely free for commercial and private use.,No restrictions held or no harsh laws. This could make your blog look more stylish and is applicable for blogger blogs too. Don’t get amazed, It’s True ! I’ll show you how to do it with blogger.

Step 1 : Back-up Your blogger template

It’s always the first step for any blogger tutorial. I’ll be using this step as the first step for all my tutorials on allblogtools. You should always take a back-up of your blogger template before testing any hacks on blogger.

For this, go to Design or layout -> Edit HTML -> Download full template

Step 2 : Select your Font

For this, Go to Google Font directory and select any one of those stylish font, which you want to use on your blog.

Step 3 : Get the Code for your Font

In this tutorial I’ll be using the Tangerine font, Which I liked the Most. For this just click on the name Tangerine and a new windows will open. Select The tab named ‘Get the code‘.

Step 4 : Add the Code to your Blogger template

Now you have to copy the Code they provide and you have to add the code to your blogger template, just after
```
<head>
```
tag of your blogger template.

The code may look something like;-
```
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
```
Important : ?Please add a Forward slash (“/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-
```
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'/>
```
This is because blogger use XML for coding which won’t allow unclosed tags like this. So you have to close this tag by adding the forward slash.

Now Copy the code and paste it just after
```
<head>
```
. It should be the first code after the
```
<head>
```
section. Otherwise it could cause problems while displaying the text in IE and may be in Firefox.
Please remember to add the forward slash before the end tag. and now please click Save Template

now the code required for Google web font has been added to your blog. Now you have to can use google fonts in your blog by applying it on any widget tags.

Step 5 : Add the CSS code for Font to your Blog.

Now the last and final step. In this step, you have to specify where you want to add the font and have to add the css code for it.

If you want to make the font appear for a specific sentence only in your blog post, then use the HTML code ;-
```
<div style="font-family: 'FontName', serif;">Your text</div>
```
in the above code change

FontName : to the font name that you chosen it from google.

Your text : to any text you want.

If you want the font to appear for your
- Blog titile
- Post title
- post body
- sidebar fonts
you have to add the CSS code for it. Don’t worry, It’s very very easy.

Here I’ll tell you How you can change your post title. For this you have to search for the title css code
```
.post h3
```
or
```
.post-title h3
```
This is the common css code for post title in blogger. now we have to add the css code for the new fonts for this code,. For this, add/modify these lines below the above codes.
```
font-family: 'Your Font Name';
```
The code should look something like ;-
```
.post h3 {
font-family: 'Your Font Name';
}
```
Here I had added the css code for Tangerine. You should post the css code between the “{” and “}” tags of .post h3. Like wise you can add the css code for other position too by modifying the css code.

Here i’ll mention the main positions and the common css code for each position. Please note that it may change if you are using any custom template.
- Title : h1
- Post title : .post h3 or .post-title
- Post font : .post-body
- Sidebar : .sidebar h2
the above tags helps you to change the font for any position of the above 4 tags.
for example, if you want to change the post font,
in the above table, you can see that the tag to edit for the post font, is .post-body
so you have to search for .post-body in your template, and below it, add the following line.
```
font-family: 'google Font Name';
```
the final code should looks like

The code should look something like ;-
```
.post-body {
font-family: 'Your Font Name';
}
```
These above values may change in some custom themes. But these are the common seen tags. If you didn’t find the tags with this, try searching similar tags.

Demo

If you want a demo for this, try viewing the demo page of my new theme, I had changed it’s header into ‘Lobster’ and navabar and post body too to google fonts. have a look at it. click here to see a demo

I hopes that this tutorial was helpful for all of you. If you have any question regarding this, please feel free to ask them here, the comments page are open for it, isn’t it ?

20

Surprise, Blogger Launches The New Blogger Templates Designer. The Full Guide, And How To Use.
Today i surprised by seeing blogger announcing the new great and amazing feature. Blogger templates designer, This feature is a revolution in blogger platform history, This option will make it easier for blogger users to make custom blogger templates in a very easy way and will save you the time to download and upload your template for your blog. and will make you customize your template exactly as you want,

What is Blogger Templates Designer.

This tool allow you to use the new 15 blogger templates at your blog and customize it’s Colors, background, fonts, and use hundreds of images as patterns, Change layout, Adjust width, Customize Links, Footer And Taps.
With a live preview for your changes, once you are satisfied with your new style, you can use it in your blogger blog.
To know more about this new feature please watch this video and then continue reading

How can i use it.

The first thing you must have to know is that this feature is available only in draft.blogger.com
So you have to log in your account from this page draft.blogger.com .
Now navigate to Layout, And you’ll see a new tap appeared on the top menu, see the next image.

Once you click Template Designer You’ll go to a page that separated to 2 parts,the customization area and the preview area, please look at the following image.

The important part here is the customization frame,
From customization frame you can customize
- Templates.
- Background.
- Layout.
- Advanced Customization.
Customize Templates.

Blogger added new 15 blogger templates you can start Customizing from.
There are 4 main sections under each section you’ll find 3 or 4 templates, you can pick any on and start customize it.

Customize Background.

Once you choose your template navigate to background section,
In background section you can choose your template main background and choose your template elements background colors,
blogger has added hundreds of backgrounds that suit all type of niches and users
the background images are well categorized in more than 20 categories. i’m sure you’ll find yours in this great collection,

Customize Layout.

This is very important section, from here you can customize your template layout,
- Body layout.
You can choose 1 column, 2 column, 3 column, or even 4 column, And you can choose the side bar location, Left Or Right.
- Footer layout.
You can adjust your footer layout from here, 1 column, 2 column, or three columns,
- Adjust Width.
You can adjust your footer layout from here, 1 column, 2 column, or three columns,

Advanced Customization.

From here you can customize
- Page text.
- Background.
- Links Blog Title.
- Blog Title.
- Tabs Text
- Tabs Background.
- Post
- Gadgets.
- Footer
- Footer Links
- Add Css
For every element in the above list you can change colors, font type, font size, And More.

Now What.

After Making all changes to your template, if you are satisfied with the result Click APPLY TO BLOG
To see a demo template that made by this new tool by max, please click here.
Please keep up with our latest updates so you can know all news and updates about this tool.

14

How To Add Html And Other Codes To Your Blog Posts. And How To Style And Customize The Code Box.
Hi all, few days ago i made and added here a new tool called Html Character EnCoder., For more info about this tool and to know more about how to use it please Check out this tutorial.
The previous tutorial let you know in general way how to add a code, for example HTML code. to blogger posts.
But today we’ll discuss and learn how to make you code box looks better and how you can make it looks very professional.

So, what’s now in this tutorial

In the previous tutorial i told you how to add code to your blogger post but in this tutorial i’ll teach you how to style your code box and how to post the code in a professional way.
If you still don’t understand please click here to see a demo for the final result.

so please concentrate with me and lets do it.

Step 1. Adding the box style code for your template.

In this step the first thing to do is to choose on of the following four styles for your code box.
Once you see your suitable one, please copy it’s code and continue reading.

Box Style 1

The box style 1 code
```
.code {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://3.bp.blogspot.com/_JwD5r652h00/Sz4Esk9Y2RI/AAAAAAAAATw/xFgoODUfT-o/s1600/codeview1.gif) no-repeat right bottom;
border : 2px solid #eeeeee;
color : #7D7D7D;
}
```
Box Style 2

The box style 2 code
```
.code{
margin : 15px 15px 15px 15px;
padding : 40px 10px 10px 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://4.bp.blogspot.com/_JwD5r652h00/Sz4NtBq_x2I/AAAAAAAAAUQ/Yhuy_jUjoGg/s1600/codeview2.gif) no-repeat left top;
border : 3px solid #eeeeee;
color : #7D7D7D;
}
```
Box Style 3

The box style 3 code
```
.code {
margin : 0 20px;
padding: 70px 20px 20px 40px;
background : #F9F9F9 url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4PoFSlT4I/AAAAAAAAAUg/OxL6lQ-En1I/s1600/codeview3.gif) no-repeat top left;
font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #000;
border-bottom : 5px solid #BFBFBF;
}
```
Once you Choose your favorite box, copy it’s code and go to your blogger account, navigate to Dashboard >> layout >> edit html > and find the following code and paste your code box af

Box Style 4

The box style 4 code
```
.code {
margin : 10px;
padding: 0px 25px 5px 20px;
background : #fff url(http://2.bp.blogspot.com/_JwD5r652h00/Sz4WJqXLy5I/AAAAAAAAAUo/tl0XwXfvErQ/s1600/codesbg1.png) no-repeat top left;
font: 0.9em Helvetica, verdana, Georgia, "Times New Roman", Times, serif;
color : #767675;
border: 1px solid #767675;
}
```
After you find your favorite codebox please copy it’s code and go to your blogger account. navigate to Dashboard >> layout >> edit html, and find the following code then paste your codebox code before it.
```
]]></b:skin>
```
Note that, you have to copy and paste your code box code before the above code.

Step 2. Customizing your code box style.

In this step you can customize your code box style to give it your unique colors, And you can pass this step, it’s not a must to do step.

If you’ll pass this step please click Save Template
Now and move to step 3, Or just keep reading.

To customize your box first you have to open our html hex color codes generators.

Then if you have noticed that the box code have three values in red, green and blue color, you can change this values to your favorite by generating your color code using our color codes generator.
and here is what each value responsible for
```
Red : Box Main Background.
  Green : Text Color.
  Blue : Border Color.
```
After making you modifications Please click Save Template

Step 3. How To Add Any Code For Your Blog Posts.

This step explained in my previous Click here to see it, .
But the difference here is that you wont paste the generated code directly in your post, you have to put it between the following tags,
```
<div class="code">
  Your generated code should added here 
</div>
```
I hope you all got it and understood how is it work,

and Again here is the a demoblog to see it in action, and please don’t hesitate to leave your comments for any questions.

15

Code To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It.
hi all, few days ago, one of my visitors asked my about how to hide the blogger navbar and make it appear when hovering it.
actually i liked the idea and i thought it would be great to make it. so i’m here today to tell you how, it’s very easy and it’s one step process and it’s all done by tweaking blogger navbar code.

Please read before adding it to your blog.
- If you already applied the hack ( How To remove or hide Blogger Navbar ) to your blog, please undo it before you start.
- This hack is compatible with all browsers but some times it’s not working correctly with some IE versions.
  And I added a hack for the code to make the navbar work normally in case of finding any IE bugs.
Adding the code to your blog.

Please log into your blogger account.
Now navigate to Layout >> Edit html >>
and find the following code :
```
]]></b:skin>
```
And Before it, add the next one :
```
#navbar-iframe {
  height:5px;
  }

/* IE7, IE8, IE6 */
  #navbar-iframe { height/*\**/: 30px\9; }


#navbar-iframe:hover {
  height:40px; !important; 
  }
```
Now click Save Template
And You Are done,

Demo.

please click here to see demo, If this hack is not supported with your browser try to see it in another browsers ( Firefox, Chrome, or opera) .
If you like this tutorial, please share and follow me.

Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

This image has no alt text

Few weeks ago, i posted here a tutorial about Light Box ( Fancy box ) Widget For Blogger Images And Links ( click here )
And we all mentioned that there are a lot of problems about this widget, refer to comments below the tutorial to know more.

Today i’ll write a tutorial about adding Updated and fixed lightbox widget for blogger.
And I WISH it’ll be easy and you’ll like it.

What’s New About This Widget

First of all we add the widget code to our template,
You’ll be able to Link this widget to your single images in blogger.
You can use it to make photo gallery.
You can make Slide show with it.
You can add it to your links.

How Is It Work

First of all we add the widget code to our template,
Then when we add an image to a new post we have to Link it to the widget by adding a tiny code to it by changing the post writing mode from compose to html don’t worry it’s easy, continue reading to figure it out

Step 1

GO to your blogger account dashboard and navigate to Layout >> Edit html and find the following code.

</head>

And Before it add the following code.

<!--Code-By-AllBlogTools-->
<link href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>
<!--Code-By-AllBlogTools-->

Now we’ve add all require codes to the template, lets know how to use it.

Step 2 – How To Use

The way to make this widget works in your blog is very easy but you have to know what you do,
What you have to do is : add a small code to the images code. and you can find the images code in post writing area when you change the mode from compose to edit html Please see the next image.

Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

What And How To Add :

Step 2.1 – Add It To Single Image

Go to blogger account, start writing your post in normal mode (compose)
And once you add an image to your post, please change your mode to edit html, see previous imsge

You’ll find the image code looks like the following.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

What we’ll need to add for this code is the next part

rel="lytebox"

Example Code For Single Image :

<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

And you are done.

Step 2.2 – How To Make Photo Group Gallery

We’ll do the same as the previous step, but instead of adding Only

rel="lytebox"

we’ll have to add a name for this code so it’ll be

rel="lytebox[groub1]"

when you add this code for more than one image, all the images will open as a group.

Example Code For Images Album :

<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

Step 2.2 – How To Make A Slide Show

Instead Of adding

rel="lytebox[groub1]"

We’ll add

rel="lyteshow[groub1]"

Example Code For Slide Show :

<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

Demo

Click here to see demo, special thanks for dolem

Step 2.3 – And You Can Add It To Links

The normal link code looks like this

<a href="http://www.google.com" title="Search Google"      rev="width: 400px; height: 300px;">Google Search</a>

We’ll add the following Code to it.

rel="lyteframe"

So The Code will be

<a rel="lyteframe" href="http://www.google.com" title="Search Google"      rev="width: 400px; height: 300px;">Google Search</a>

And you can apply the same settings for slide show and photo groups for the links.

Demo

Click here to see demo, special thanks for dolem

Add Multi-Color Effect For Your Links On Hover For Blogger Blogs

This image has no alt text

Hi All, In all tricks i posted here lately i was talking about Seo. But now i feel that i should add some fun to my tricks so today i’ll talk about how to add Cool effect to your links when your visitors hover it.
It’s easy and one step processes.

How To Add It.

Go To you blogger dashboard, and navigate to : Dashboard >> Layout >> Edit html, And find the following code,

</head>

And exactly before it add the next code :


 <script type='text/javascript'>

 //<![CDATA[

 var rate = 20;

 if (document.getElementById)
  window.onerror=new Function("return true")

 var objActive;  // The object which event occured in
  var act = 0;    // Flag during the action
  var elmH = 0;   // Hue
  var elmS = 128; // Saturation
  var elmV = 255; // Value
  var clrOrg;     // A color before the change
  var TimerID;    // Timer ID

 if (document.all) {
  document.onmouseover = doRainbowAnchor;
  document.onmouseout = stopRainbowAnchor;
  }
  else if (document.getElementById) {
  document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  document.onmouseover = Mozilla_doRainbowAnchor;
  document.onmouseout = Mozilla_stopRainbowAnchor;
  }

 function doRainbow(obj)
  {
  if (act == 0) {
  act = 1;
  if (obj)
  objActive = obj;
  else
  objActive = event.srcElement;
  clrOrg = objActive.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }


 function stopRainbow()
  {
  if (act) {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }


 function doRainbowAnchor()
  {
  if (act == 0) {
  var obj = event.srcElement;
  while (obj.tagName != 'A' && obj.tagName != 'BODY') {
  obj = obj.parentElement;
  if (obj.tagName == 'A' || obj.tagName == 'BODY')
  break;
  }

 if (obj.tagName == 'A' && obj.href != '') {
  objActive = obj;
  act = 1;
  clrOrg = objActive.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }
  }


 function stopRainbowAnchor()
  {
  if (act) {
  if (objActive.tagName == 'A') {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }
  }


 function Mozilla_doRainbowAnchor(e)
  {
  if (act == 0) {
  obj = e.target;
  while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
  obj = obj.parentNode;
  if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
  break;
  }

 if (obj.nodeName == 'A' && obj.href != '') {
  objActive = obj;
  act = 1;
  clrOrg = obj.style.color;
  TimerID = setInterval("ChangeColor()",100);
  }
  }
  }


 function Mozilla_stopRainbowAnchor(e)
  {
  if (act) {
  if (objActive.nodeName == 'A') {
  objActive.style.color = clrOrg;
  clearInterval(TimerID);
  act = 0;
  }
  }
  }


 function ChangeColor()
  {
  objActive.style.color = makeColor();
  }


 function makeColor()
  {
  // Don't you think Color Gamut to look like Rainbow?

 // HSVtoRGB
  if (elmS == 0) {
  elmR = elmV;    elmG = elmV;    elmB = elmV;
  }
  else {
  t1 = elmV;
  t2 = (255 - elmS) * elmV / 255;
  t3 = elmH % 60;
  t3 = (t1 - t2) * t3 / 60;

 if (elmH < 60) {
  elmR = t1;  elmB = t2;  elmG = t2 + t3;
  }
  else if (elmH < 120) {
  elmG = t1;  elmB = t2;  elmR = t1 - t3;
  }
  else if (elmH < 180) {
  elmG = t1;  elmR = t2;  elmB = t2 + t3;
  }
  else if (elmH < 240) {
  elmB = t1;  elmR = t2;  elmG = t1 - t3;
  }
  else if (elmH < 300) {
  elmB = t1;  elmG = t2;  elmR = t2 + t3;
  }
  else if (elmH < 360) {
  elmR = t1;  elmG = t2;  elmB = t1 - t3;
  }
  else {
  elmR = 0;   elmG = 0;   elmB = 0;
  }
  }

 elmR = Math.floor(elmR).toString(16);
  elmG = Math.floor(elmG).toString(16);
  elmB = Math.floor(elmB).toString(16);
  if (elmR.length == 1)    elmR = "0" + elmR;
  if (elmG.length == 1)    elmG = "0" + elmG;
  if (elmB.length == 1)    elmB = "0" + elmB;

 elmH = elmH + rate;
  if (elmH >= 360)
  elmH = 0;

 return '#' + elmR + elmG + elmB;
  }

 //]]>

 </script>

Now Click Save Template
And you are done.

Customize And Demo.

You can change this value

var rate = 15 ;

in the above code to control the speed of color transformation by increasing or decreasing the number 15
If you want to see a demo please click here.

Add a Post Divider (Separator) Between Blogger (Blogspot) Posts

This image has no alt text

One of the most important factors to give your visitors a good impression about your blog, is to make it easy to read,
And since i see many blogs, i noticed that one of the most annoying things is that there is no separator or divider between blogger posts, so today we’ll lean how to add a Separator between blogspot posts easily. And here is a demo.

Step 1

Log into your blogger account, navigate to , Dashboard >> Layout >> Edit html, and find the following code

.post

this is the cs part that controls your post layout and style, it must contains few css properties like the following.

.post {
margin: 0 0 40px 0;
width: 90%
}

Now we want to add the separator css properties between the opening and closing tags, { and }

Here is the separator css properties :

background: url(Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

And here is what you need to change in above code to customize it to your blog.
Separator-Image-Url
Change it to the separator image url,

2.5
If you found that the separator displayed behind part of your post latest line, increase this number, for example to 3.5 Or 4.5.

Now your final code should looks Like The following one.

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Free Separator Images

Now Here are some free Posts separators to use in your blog, just copy the image url and paste it in to it’s place in above code.

http://4.bp.blogspot.com/_JwD5r652h00/SuttjmoES2I/AAAAAAAAANw/bidxxyqfxwg/s1600/barsnake.gif

http://3.bp.blogspot.com/_JwD5r652h00/SuttjcXA_4I/AAAAAAAAANo/w2BZApq6Jn4/s1600/bar54.gif

http://4.bp.blogspot.com/_JwD5r652h00/SuttjFcWXkI/AAAAAAAAANg/Ex99MFx60sY/s1600/bar48.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutti1AMlHI/AAAAAAAAANY/n-pJyLWbbhE/s1600/bar47.gif

http://4.bp.blogspot.com/_JwD5r652h00/SuttiqsszII/AAAAAAAAANQ/raAoX-EHDUY/s1600/astarl7s.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutu7XMmvBI/AAAAAAAAAOY/8XQyk53329Y/s1600/dividers_129.gif

http://2.bp.blogspot.com/_JwD5r652h00/Sutu7TjXFHI/AAAAAAAAAOQ/IQlWtZrB5SI/s1600/dividers_96.gif

http://3.bp.blogspot.com/_JwD5r652h00/Sutu7DaxOSI/AAAAAAAAAOI/Q3okL8VTVQ4/s1600/clipart-heart-border.jpg

http://3.bp.blogspot.com/_JwD5r652h00/Sutu65IKnaI/AAAAAAAAAOA/UJuKQP29vtg/s1600/chain.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutu6mRBnpI/AAAAAAAAAN4/82pbOVmnl1Y/s1600/bloodrose.gif

http://2.bp.blogspot.com/_JwD5r652h00/Sutwt4UlPXI/AAAAAAAAAPw/tZ9RY7m1tKA/s1600/stonebar.gif

http://1.bp.blogspot.com/_JwD5r652h00/SutwFSJ2_LI/AAAAAAAAAPo/WMkQ9bAcVn0/s1600/resfiles_sdfp.gif

http://1.bp.blogspot.com/_JwD5r652h00/SutwFArTx_I/AAAAAAAAAPg/RlKs6tTx_Mw/s1600/resfileszcp.gif

http://2.bp.blogspot.com/_JwD5r652h00/SutwEnMKk3I/AAAAAAAAAPY/pz3dI5GhTGY/s1600/resfiles_output.php.gif

http://2.bp.blogspot.com/_JwD5r652h00/SutwEayD8dI/AAAAAAAAAPQ/9k10wIhaHjU/s1600/pumpkin-border-hth.gif

http://3.bp.blogspot.com/_JwD5r652h00/SutwEO1pNLI/AAAAAAAAAPI/FAmwFnDEASw/s1600/irish-border4.gif

http://2.bp.blogspot.com/_JwD5r652h00/Sutv3RFLl9I/AAAAAAAAAPA/e7VXY-5er8A/s1600/ivy.gif

http://1.bp.blogspot.com/_JwD5r652h00/Sutv3EVHqdI/AAAAAAAAAO4/jKfcf3u4IJ4/s1600/irish-border1.gif

http://3.bp.blogspot.com/_JwD5r652h00/Sutv3MzdTQI/AAAAAAAAAOw/LRKkTCzKkGA/s1600/frog54.gif

http://4.bp.blogspot.com/_JwD5r652h00/Sutv28LLgLI/AAAAAAAAAOo/3ykBTaQOofw/s1600/flowerbar.gif

http://3.bp.blogspot.com/_JwD5r652h00/Sutv2gVPVII/AAAAAAAAAOg/w1Wh7KancXM/s1600/drawing-separator.gif

Need More Separator Images

Ok, here are 3 links to great sites contains hundreds of free separators and page dividers.

Need Even More And More Separator Images

Search google for the following keywords

Page dividers
Page dividers clip art
page dividers graphics
page dividers animated

If you liked this post please share and follow us.

25

Collection Of 46 Read More Buttons Free Download
After publishing one of my latest blogger tricks : Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment. A lot of people asked me about where to get “read more” buttons to use it with this trick, and today i’ll give you a collection of 46 buttons to download for free, This buttons are categorized in 2 sizes, Small buttons And Large Buttons.
Here is The Details And Download Links,
```
Caution : Don't Link To The Download Links Directly, And Please Link To This Page It Self..
```
Small Read More Buttons.

Download Here : Note: There is a file embedded within this post, please visit this post to download the file.

Large Read More Buttons.

Download Here : Note: There is a file embedded within this post, please visit this post to download the file.

I wish you all like it’ and please share it.

11

Light Box ( Fancy box ) Widget For Blogger Images And Links
We all add images and photos in our blogs. And as we all say A picture is worth a thousand words.
```
Caution : This hack not working perfectly with blogger. so please wait until we find the best solution for this hack.
```
I Published Fixed Tutorial Here

blogspot by default enables us to add and display images in our posts, But what if we want to make our blogs photos looks more professional and stylish ?
The answer is to use this new amazing widget.
Please see this demo and click on the images to see how it is working.
It’s very easy to integrate this hack to your blog in only 1 step.

Adding The Widget To Your Blog In One Step
```
Caution : Please backup your template (Download Full Template) Before making any changes.
```
Go to you blogger account, and then navigate to Layout >> Edit Html
And Find the next Code.
```
</head>
```
And exactly before it add the following code.
```
<link  href='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox.css'  media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script  src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.easing.1.3.js'  type='text/javascript'/>
<script  src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox-1.2.1.pack.js'  type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$(&quot;a&quot;).fancybox();
});
</script>
```
Now Please Click Save Template .
And the widget will work now automatically with all your blog images.
Once you or your blog visitors click on any image on your blog the image will be displayed in a nice and elegant frame.

Customizations And Options

If you want to go for better customization with this blogger hack then you can display you images in groups Display next And previous Buttons, or you can make your links opens in a new frame without leaving your blog.

Display images in groups

After adding an image to your blog post and before publishing it. change the editing more from Compose to Edit Html And now find the image code, it must be like the following code.
```
<a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>
```
now we have to add rel Tag which put all images with the same rel tage in one group.
For example. if you have 6 images in your post, and added the tag rel=”groub1″ for 3 of your images, and the tag rel=”groub2″ for the another 3 of images. once you click on an image, it’ll be displayed in a frame with next and previous buttons, this buttons will take you to the other 2 images with the same rel tag.
Where to add the rel tag ?
This is the image code before adding the rel tag
```
<a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>
```
And the next one is after adding the tag.
```
<a rel="group1" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>
```
Adding Titles For Your Images

To add a title we have to add a tag for the image code. so we’ll have to locate the image code, see the previous step to know how to locate it
And now add the following tag. title=”Image Title”
And the code should be like this
```
<a rel="group1" title="Image Title" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>
```
Apply It For Your Links

While typing a post you may add a link, and if you switched the typing more from Compose to Edit Html you’ll see the links look like this
```
<a href="http://www.allblogtools.com/">Blogger Templates </a> 
```
and we should add the following tags to it.
title=”Link Title ” class=”iframe”
so it will be
```
<a href="http://www.allblogtools.com/" title="Link Title " class="iframe">Blogger Templates</a>
```
thats it.

Demo

Click here to see demo. thanks for bloggergallery.com

14

11 Sites to find +1000 free twitter Buttons and badges

Now a days twitter getting more users and ranking in amazing rates, I think 100% of my friends , allblogtools.com visitors and blogger users are using it in regular basis, twitter have been a basic site that we all use it every day, and i can say every few minutes.
so we released a new tool few day ago. Twitter Static Badge Generator For Blogger., this is the first tool that enables you to put a twitter badge on your blogger blog in very easy steps. you can choose your own badge, and it’s position on your blog. left or right, top or bottom.
after releasing it. some of our regular visitors contacted me and asked about where to find free twitter badges to use it on their blogs.
And here is list of awesome 11 sites you can find more than 1000 twitter badges on it.
badges are usually in gif Or png formats.
to use a badge on your blog using our tool, you have to get the badge url, and it’s easy, just browse the 11 sites below. once you find your favorite badge, right click it. and in Firefox, select Copy Image Location, in Internet Explorer select Properties and copy the image URL then you can use this url in our twitter tool.

here is the 11 sources.

1 . LimesHot

Follow Me On Twitter Badges / Logos / Buttons

2 . randaclay

Free Twitter Graphics

3 . Twitter Logos

Twitter Logos

4 . Siah Design

FREE TWITTER BUTTONS (Includes Animated GIFs)

5 . Vincent Abry

31 Logos et boutons pour Twitter

6 . Twitter Buttons

Twitter Buttons

7 . We Function

sourcename

8 . U Stand Out

Free Twitter Badges For Your Website or Blog

9 . WebDesign-In

10 Twitter Buttons for free

10 . Juliusx @ deviantArt

Twitter Icons

11 . Twitter My Site

Twitter Icons

Please share and follow us if you found this was useful for you.

8

New Tool !! Twitter Static Badge Generator For Blogger
After reading a lot of your comments and mail messages about hot to add static twitter badge for your blogspot blogs.
I decided to start coding a script that generate you a code to add in your blog that display static badge for your twitter account, and i
Paid attention for four of your main needs in this new tool.
so what can you do with this Twitter Static Badge Generator For Blogger :
- Choose The badge your self, which mean you can bring any image from the internet to be your own twitter badge
- You can control the badge position , you can make it, top left, top right, bottom left or bottom right.
- Easy to install and uninstall.
- Can ve added to your blog in less than 1 minute without messing with your template codes.
Note : you can search google for images to use as badges using this keywords , twitter badges , twitter buttons, follow me on twitter, or any similar words, If you are too busy or even lazy to do it your self, then wait our upcoming collections of buttons and badges for blogger users.

I Wish you all love this new tool Twitter Static Badge Generator For Blogger. and here is a demo for this tool, please notice that we added two badges for the demo blog just for show. ( you are not forced to add two for your blog too )

If you loved this tool please share it and subscript to our feeds and twitter for more updates and tools.

17

Add Styles And Effects To Your Images In Blogger
many bloggers contacted me asking about an easy way to style blogger images, all posts images with out editing every single post.
so today I’ll teach you a very easy way to style and add nice effects to your all your blog images at once and no need to edit every single image at your blog.

we will learn today how to :
- Add borders to our images.
- Change borders style and color.
- Increase and decrease the space between the image and the border.
- Add any background to our images as a border.
and you can see the final result for this tutorial at this demo heresee the image in the post

Or see this image

So lets start

Intro And Explanation

we will style the blogspot images depending on the following css tage
don’t worry, it’s very very easy and every body can do it
- Border
- Padding
- Background
You can understand what this tags mean by checking the next image.

and here is the tags explained for the demo blog in the following image.

And Now, Lets do it.

Step 1

Now go to Blogger and log in, then navigate to : Layout >> Edit html >> and find the following code you can click ctrl+f to find it via your browser finder
```
.post img {
```
Now this is the opening tag for your images style and the symbol{ mean that this is the start of styles, you’ll need to find the style end symbol witch looks like this }
And please delete all lines between the two symbols.
so here is an example for the codes before and after deleting the style codes.
note : the style lines are not the same for all templates, you may have more or less lines in your template.
here is the example
BEFORE
```
.post img {
  border: 5px solid #F08C00;
  padding: 10px;
  }
```
AFTER deleting the style lines
```
.post img {


  }
```
Now you images have no any styles and if you clicked Save Template
now , your images will be displayed with out any borders or styles. if you like to keep it like that ,ok just click Save Template .
Or leave and go to step 2 if you want to add styles to your images.

Step 2

now you have your images style code like the following
```
.post img {


  }
```
now we have to start add style lines, and as we said before you can add all the following lines or only one or two, we have 3 lines to add.
border line, padding line, and background line,
so lets start.

Adding Borders To Your Images.

Add the next line between opening and closing symbols
```
border: 5px solid #F08C00;
```
so your code should looks like this
```
.post img {

border: 5px solid #F08C00;

}
```
if you saved your template now you’ll have the following style for your images

This is image with 5px width orange border
and you can change the following parts in the previous line to give it your favorite style.
```
 5px
```
You can change number 5 to increase or decrease the width of the border
```
solid
```
This word control the type of your border
And you can change this to any one of the following values

solid

double

groove

dotted

dashed

inset

outset

ridge

hidden
```
F08C00
```
this is will change your border color, and you can get your favorite color code from our hex / Html color code generator here.
now we added a border for your images style, you can click Save Template
Or continue to the next step

Adding Padding To Your Images.

padding will add a space between your border and your image.
Add the following line to your code
```
padding: 10px;
```
You can change this number 10 for example to 7 or 15 to decrease or increase the space between your image and border.
now your code should looks like this
```
.post img {

border: 5px solid #F08C00;

padding: 10px;

}
```
and your images will look like this:

This is image with 5px width orange border and 10px padding
now we added a border and padding for your images style, you can click Save Template
Or continue to the next step

Adding Back Ground To Your Images As Border.

To make this effect active you must apply the previous step : add padding.

Now add the following line to your code
```
background: url(Image Location);
```
and please change Image Locationto your favorite image url,
Recommended : search Google for pattern.

Now you should have your code like this.

.post img {

border: 5px solid #F08C00;

padding: 10px;

background: url(Http://www.host.com/image.gif);

}

And your image should look like this

This is image with 5px width orange border , 10px padding and with this image as back ground
Now Click Save Template And go check your Blog,

I wish you understand and love this tutorial and please don’t hesitate to leave your comment for support and feedback. to get more tricks and latest updates please subscript to our feeds or follow us on twitter

17

New Tool !! Blogger Falling Objects Generator.

Hi all, today I’m really happy to announce that i finished coding the new tools Blogger Falling Objects Generator.
With this tool now you can add falling objects ( Images ) for your blogger blog (blogspot), just choose the image that you want it to be a falling object on your blog, and click on 1 button to generate your code, and Enjoy, Here is a link to Demo blog with falling autumn leaf to see how it works.
On this page you’ll find the tool and full instructions on how to use it fast and easy.
I wish you like it and please visit us soon to see our upcoming tools. we’ll add more than 10 tools soon.

please share if you liked it.

4

AllBlogTools.com Gets A New Color Codes Generator
hi all, today i’m very glad to announce that we started updating our blogger tools section, and today we started with our colors code generator, the new generator is easier than the previous one, now you can pick any color you want and get it’s code in instant.

Check out our Hex Color Code Chart & Generator Here

this is the first step for updating our blogger tools section, and we Planning add more tools for blogger, and here is a list for what we are going to add soon,
- Twitter Static Badge Generator
- Falling Objects Generator
- Marquee Text Generator
- Cursor Codes Generator
- And Even More …..
Your comment and feedback are really appreciated.

67

Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.
Hi dear friend,

I promised you in a previous tutorial, here ” Blogger Now officially Supports “Read more” links. ” that i’ll add a tutorial about customizing your read more links in blogspot.

So you have to check out the previous tutorial if you are not familiar with the new blogger jump breaks addition.

Now is the time for this tutorial,

after reading this tutorial you’ll be able to Customize you read more links in those ways:
- Change the text ” read more ” to another words.
- Add An Image / Button To Your “Read More / Jump Breaks ” In Blogger Links Instead Of Plain Text
- choose your read more link / button to be displayed on left side, right side or center it.
so lets start,
```
 Please download a copy of your template before applying any changes.  
```
First Step, You Must Do This Step

this code should be included in your blogger template,
```
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >
```
i’ll tell you where to add it, but before you add it, make sure that it’s not already included in your template.
Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for the code,

if you found the code in your template, ok you have to skip this step
but before you skip it,
make sure that the third line in the code looks like this
```
<a expr:href='data:post.url + "#more"'>Read More </a>
```
And not
```
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
```
if you found it like the second one, please replace it with the first one

if it’s not in your template you’ll have to add it, and i’ll tell you where you should add it.

Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for this code,
```
<data:post.body/>
```
and just after it, add the next code,
```
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >
```
Now we finished adding the require code for customizing this trick.

Lets start customizing

1.Change the text ” read more ” to another words.

this is the easiest on ever,
after applying the first step to your template, you should have this code added to your template :
```
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >
```
This code will display your read more link in this format : Read More

and to change it to another word, simply, change the word Read More in the code in your template to what ever you want, Example? Keep reading, continue reading, read the rest, and more.

After changing it, click Save template and check out your blog.

2.Add An Image / Button Instead Of Plain Text

Ok, now again, after applying the first step to your template,
you must have this code added to your template
```
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >
```
This code will display your read more link in this format : Read More

and to change the text to image / button , we should replace the word Read More in the code with the following
```
<img border="0" src="Paste here the button Image URL"/>
```
so you should have some thing like this
```
<img border="0" src="http://www.allblogtools.com/image-url.jpg"/>
```
After changing it, click Save template and check out your blog.

And here is some good samples for read more buttons :

And you can find more buttons by searching in google for “read more button”.

3. Control the read more link or button alignment, left, right Or center.

lets back again for the first step, after applying the first step to your template,
you must have this code added to your template after applying first step.
```
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >
```
this code will display read more link in default format, and your template may display it at left or right, but if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in blue color.
```
<b:if cond='data:post.hasJumpLink'><div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="xxxx">Read More</p></a></div></b:if >
```
and you can replace the xxxx with Left, right, or center.

any in this way you can control the position for your link or button.

and here is some examples to help you

Example 1
```
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="Left">Read More</p></a>
</div>
</b:if >
```
This will display read more in pain text aligned to left

Example 2
```
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="right"><img border="0" src="http://www.allblogtools.com/image-url.jpg"/></p></a>
</div>
</b:if >
```
This will display read more in image button aligned to right

i wish this can help you, you comments are welcome, and please share it if you found it useful

How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger.

This image has no alt text

If you want to add a very attractive gallery to your blog you should read this tutorial,

Through this tutorial, only 3 steps you’ll be able to make your own gallery widget with jQuery, to add it for your blogger blog,

you add add it to header, sidebar, above posts area, on footer columns, and any where else on your template,

So let’s see step one.

Step 1. Adding The Gallery Codes To Your Template.

Go To your blogger dashboard, layout >> Edit html >>
And find this code,

]]></b:skin>

And Before it, Add the next code,

/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Then Find this Tag

</head>

And add the next code before it.


<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

Now we finished editing template, Click Save template,

And lets see the next step.

Step 2. Adding The Gallery To your template.

Go to Layout >> page elements and on your template’s sidebar, header or footer Click on ‘Add a Gadget‘.

then Select HTML/Javascript

A new window will appear, in title box Type your gallery title, and in content area Copy and Paste the next code

<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>

Then instead Of picture 1 Link Type Your Image Url,
and if you want to make the image link to another page or url instead of # Add the target url.

Each time you want to add a new image to the gallery, just repeat this code.

<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>

That’s it.

Demo. See How is this gallery looks like on a blogger blog.

Click Here To See Demo Blogger Gallery

Please share and leave comments if you find it useful.

To become IT networking professional, you can go for ccent certification which will give you title of Cisco certified entry networking technician while ccde will entitle you certified design expert and ccna will enhance your expertise as a certified network associate.

87

Adding favicon to blogspot
How To add fav icon to your blogger
- Codes Fixed and 100% works
- 18,000+ Animated Favicons Source Added
favicon is very important now it’s a nice way to put your logo, or what ever you want. on the browser address bar.

if you don’t know what is the favicon.ico just look at the address bar at your browser now.
and you’ll see our logo added to it on the left. you can check the above image to know what are we talking about.

to do this you need to follow the next simple 4 steps. it’s too easy. so lets go.

- Before We Start:
- You need to be careful while changing your template.
- Before you make any changes, Back up your template and save it at safe place.

step 1: creat of choose your own icon.
step 2: Make your favicon.
step 3: Upload it.
step 4: Add a code to your blogger xml layout.
step 5: Enjoy.

Step 1: choose your own icon.

first of all. you need to have an icon to display it as your blog favicon.
if you already have a logo. you ‘ll use it.
or you’ll need to find nice logo and suitable to your blog.
it may be a letter. or simple expressive picture. you can browse deviantart.com icons category to get inspired.
and here is sample icons may help you to Crate yours.

once you are done and picked you icon. you’ll need to move to the next step.
- 18,000+ Animated Favicons Source Added
That’s great and new source for free and animated icons, you won’t need to design your own icon and loos any time any more, thanks for iconj.com Go there and browse.

Step 2: (OR ) Make your own favicon.

now you have to make your icon 16×16 pixels. I usually use photoshop to do it and save it as any image format. like [ jpg, gif, png, .....].
call it favicon.jpg , favicon.gif or favicon.png. just choose one format, not all of 3 types.
and we’ll use program called “imagicon” you can search Google to download.its free and only 950 KB.
setup the program and find the icon image that you made it and saved it by photoshop, favicon.xxx
load the image and choose 16×16 win32 icon. save it as .ico.
so it’ll be favicon.ico.
Recommended : it’s recommended to name your icon file – favicon.ico -

Step 3: Upload it.

Use you favorite image upload or file service to upload you favicon.ico file.
and keep the url at save place cause we going to use it in step 4.
the url should be something like.

http://www.fileiconhost.com/i3jh/youricon.ico

Step 4: Add a code to your blogger xml layout.

log in to your blogger account. Now find the blog you want to edit if you own more than one blog. And click “layout” table. then choose “Edit html”

Search for :
and just after it. past the next code
and instate of ‘URL of your uploaded icon file’ add the url that you uploaded your ico file to.

the code should be something like the next
Click save template button.

Step 5: Enjoy

Now go to check your new blogspot browser address bar.
if you can’t see it please wait for awhile. some times it takes 2 days to appear. but not always.
if you have any problems please leave acomment.

35

Adding Static images to blogger (blogspot)

Adding static images to blogspot blogs
in only 3 steps.
today allblogtools.com continue adding new categories and content to keep up with our 2009 plans.

and now we are about to announce our latest Free service.
Blogger Static Image Generator

In case you don’t know what is a static image, it is images can be added to your blogspot blog template and display on your blog corners even if you visitors scrolled down or top. it’ll still displayed on your corned,
you may not understand even after reading about it, so you must see Demo static images
Please Click here to see Demo
I Hope you like it,

You can add any static image to your blog by using our wizard in only 3 steps.

Click here to try our new static Image generator

Page 1 of 2
1
2
Next >

AllBlogTools.com | Blogger Templates, Tutorials, Tools.

Browse All Blogger Templates >>

By Topic

By Layout

By Featurs

By Color

Try Advanced Blogger Templates Search >>

Browse All Blogger Tutorials >>

Premium blogger Templates

Blogger Graphics / Effects Tricks

How To Change Blogger Mouse Cursors In Easy Way ( + 1000 Free Cursors )

Adding QueryLoader (‘LazyLoad’) Script For Blogger And Customize It.

How To Use Google Custom Fonts For Blogger.

Important : ?Please add a Forward slash (“/“) before the the end of the tag (“>”) of this code. i.e, The above code should look like ;-

Surprise, Blogger Launches The New Blogger Templates Designer. The Full Guide, And How To Use.

How To Add Html And Other Codes To Your Blog Posts. And How To Style And Customize The Code Box.

Code To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It.

Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

Add Multi-Color Effect For Your Links On Hover For Blogger Blogs

Add a Post Divider (Separator) Between Blogger (Blogspot) Posts

Collection Of 46 Read More Buttons Free Download

Light Box ( Fancy box ) Widget For Blogger Images And Links

11 Sites to find +1000 free twitter Buttons and badges

New Tool !! Twitter Static Badge Generator For Blogger

Add Styles And Effects To Your Images In Blogger

New Tool !! Blogger Falling Objects Generator.

AllBlogTools.com Gets A New Color Codes Generator

Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.

How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger.

Adding favicon to blogspot

Adding Static images to blogger (blogspot)