blogger graphics

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.

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 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.

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

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

9

Full Guide to Using allblogtools.com Glitter / Animations in BlogSpot

Full guide to learn you how to use images Glitter Or
Animated gif images
Ablog with out images like a sea with out fishes ,
every body in the world using images at his blog to… to what,to explain some thing for his visitors. to make his blog looks better, to have fun, to … Etc.
And there is alot of ways to use images in our blogs, we can add images to our posts
or use image as Signature, use it in our -About us- Page, use it as avatar.
or use it to displayed as static image at the corner of your Blog ( we’ll explain later what is the ” static image “.
Note : all ways to use images we mention here can be used with allblogtools.com images codes only.
now a days we updating allblogtools.com and adding new categories. we’ll add glitter images and animated images categories, and we’ll give you a code for each image we’ll add in this new categories, so when we tell you any thing about images code, you should understand that we mean allblogtools.com images codes

now we’ll talk about Using Glitter Or Animated gif images in our blog post, or as Signature.

1: Adding images to our blogspot posts.
After finding your favorite image from allblogtools.com images Categories. glitter images or animations. copy its code and go to you blogger account.
at Creating new post page write your post and then select “Edit html”

Then past the glitter / animated gif image code where you want the image to be displayed
Then click “publish post”
click here to see Demo for using animated images and glitter images in blogspot posts.

2: Using glitter / animated / non animated images as Signature in blogspot.
After copying your image code
go to your blogger account, go to settings. Select Formatting. at
the bottom of the formatting page you’ll find Post Template form. just copy and
past your image Signature Code
. and every time you are going to write new post, write it before the sign code. but don’t delete it.
To read more about adding Signature to blogger, please click here
Click here to see demo signature on blogger post

3: Using glitter / animated / non animated images as static image at the corner of your Blog

Click here to see demo static image on blogger blog. please in this blog scroll down to see how static images works.
This trick will be available soon and we’ll add free static images generator.

we hope you enjoyed our small tutorial and if you need any help. please contact us.

6

Free Glitter Text generator

Free glitter generator Now in just simple 4 steps
get your free glitter text Glitter Generator

We are very happy to tell you that we added a new service to allblogtools.com
Glitter text generator
it’s all free,
in 4 steps, you can generate your glitter text image and use it on Blogger,
Forums and WordPress.

step 1 : Enter your text,
step 2 : Select Your Font, and it’s Size
step 3 : Select Glitter texture, and choose if you want to add outline or not.
step 4 : click the button to get your codes.

The glitter generator will show you 3 codes,, Blogger code, forums code and
Wordpress codes
click once on any one, and then past it on your page, post or thread.
you can use it ib About us page, In your posts, in your threads. and you can use
it ass your signtuare too.

This is not all
this glitter generator has:
More than 240 Difrent Glitter texture
More than 34 Difrent Font Type.
4 Font sizes.

To try our new glitter generator click on the next link

Glitter Text Generator

To learn more about

adding Signature to blogger Posts.

Click here

animated “Duck Menu” in blogger

Amazing new duck menu now can be added for blogger
blogspot animated navigation menuBlogger graphics
All of us saw duck menu in windows and some where els,
and we all love it and the way it moves,
so it’s going to be great thing to see it again here in our blogger “blogspot” blogs.

and here is live demo to try it Click here
(It’ll open in a new window) and see how nice and charming is it.

We need to say here thanks to iBloGraphics.com

- 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.

Please go to blogger.com and log into your account,
once you are in your account dashboard click “Layout” and then select ” edit html”

at “edit html” page Make sure to check the “expand widget templates”

after that we’ll start adding the codes,
we’ll add 3 codes, first one, is the java code, second one is is the css and the third will control where is the menu will be displayed on your blog.

so lets go to add the first code.
at “edit html” page find


<head>

and just after it add the next code


<script src='http://iblographics.com/jquery.js' type='text/javascript'/>
<script src='http://iblographics.com/interface.js' type='text/javascript'/>

Adding second code.

Find the next code

]]></b:skin>

and Just “Before” it add the next code


/* Dock menu by www.iblographics.com
----------------------------------------------- */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{

height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}

/* Fin del dock menu
----------------------------------------------- */

And now we’ll add the last code, be careful adding this code in the right please will help you to make it appeare in the right place,
if you are have expirence with html, you’ll be able to add it where ever you want,
if you don’t have, you’ll add it to the default place,( top of blog ) .
so lets learn how to add it to the default place, find

<body>

And after it add this code


<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQn-ny4I/AAAAAAAAAUc/yy_PBS_YWrc/s1600/music-trans.png' width='30'/><span>Home</span></a>

<a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACbeYOO5I/AAAAAAAAAUk/_Zfiy_TiZtA/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQeWOkPI/AAAAAAAAAUU/-1lW9Q0I4-A/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQfGZMrI/AAAAAAAAAUM/7HS7vAdCjls/s1600/home-trans.png' width='30'/><span>Clock</span></a>

<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP2ct3iI/AAAAAAAAAUE/Wq7jf6tILFE/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP5KHlaI/AAAAAAAAAT8/0PJpHH9DzLE/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP6w_J0I/AAAAAAAAAT0/RXNWTRfB9po/s1600/video-trans.png' width='30'/><span>Email</span></a>

<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACPp7mBQI/AAAAAAAAATs/UKxtQ51vOF0/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACBJFd9ZI/AAAAAAAAATk/oJ5lL_SGpFI/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUABzssGnaI/AAAAAAAAATc/hxJx2j7VRQA/s1600/calendar-trans.png' width='30'/><span>Web</span></a>

<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUABnXdQNdI/AAAAAAAAATU/jPWR6TthALk/s1600/portfolio-trans.png' width='30'/><span>Web</span></a>
</div>
</div>

<script type="text/javascript">

$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)

}
);

</script>

Now click save and go to your blog to see the new menu and enjoy,
if any one have any suggestions about this menu icons and size please comment,

We’ll add new skins for this menu soon

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

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

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

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

Collection Of 46 Read More Buttons Free Download

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

Adding Static images to blogger (blogspot)

Full Guide to Using allblogtools.com Glitter / Animations in BlogSpot

Free Glitter Text generator

Glitter Text Generator

animated “Duck Menu” in blogger