Translate this page

Wednesday, April 13, 2011

How to add floating buttons/icons on your blogger.


1 comments

Floating buttons give a good and professional look to your website. You might have seen these cool floating buttons in many websites or blogs. One more benefit of these buttons is that it always stays in front of visitor’s eyes while they are scrolling from top to bottom of page or vice versa. It is very easy to add this buttons on your blog. You have to follow some below steps.

1. Make your own button image or download it from here. (Note: buttons should be in png format).

2. Upload these buttons/icons at one of following site

Tinypic.com

Imageshack.com

Photobucket.com

Or any another site which you know to upload the images.

I always use the tinypic.com for uploading images.

3. Get the url for uploaded images.

(Note: you will get the url of image on the uploaded site after uploading the images.)

4. Open your blogger account. Go into design tab. Click on Edit HTML

Now find the

</body>
in your html code and paste the below code before this.

//For Facebook

<a href="http://www.facebook.com/yourfacebooklink" style="bottom: 310px; display: scroll; left: 4px; position: fixed;" target="_blank" title="Follow Me on Facebook">

//For Twitter

<a href="http://twitter.com/enter_your_twitter_username" style="display:scroll; position:fixed; bottom:350px; left:4px;" target="_blank" title="Follow Me on Twitter">

//For dig

<a href="http://digg.com " style="display:scroll; position:fixed; bottom:390px; left:4px;" target="_blank" title="Digg This">
You can add another buttons in similar way like Rss field, stumble upon etc.

5. Change the link in double quoted of href into your link and change the src of image with your uploaded link of images.

6. You can change the position of the buttons from left to right. Just change the left:4px to right:4px

7. You can adjust the position from bottom. Change the 310px,350px etc with your required height. you can see the example at this blog.

Friends if you like this post. Then share it with your friends and share your comments here.

1 comments:

PaRaDoX said...

Thanks the widget working perfectly on my blog

Post a Comment

Subscribe

Subscribe to get free email updates...

Delivered by FeedBurner

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Grants For Single Moms
Facebook RSS Feed Twitter Delicious Digg Stumbleupon Favorites More