HackingUniversity - Hacks . Tricks . How-To's

19 August 2012

How to add Tumblr Style Floating Follow Button in Blogger

tumblr follow buttonTumblr provides an easy floating follow button which you use to follow that particular blog you can viewing, but in blogger blogs we have the options to use the Google Friend Connect widget to connect with that blog and follow it in future, well we are going to use this small follow widget and make google fiends connect widget portable and floating one.

1. Go to Blogger > Layout > Add Gadget.

2. Now just choose a HTML/JavaScript Gadget and add the below code to it.

<div style='position: fixed;top: 5px;right: 95px;'><a class='linkopacity' href='http://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxx' imageanchor='1' rel='nofollow' style='margin-left: 1em;margin-right: 1em;' target='_blank' title='Follow'><img border='0' src='http://3.bp.blogspot.com/-feYAFwQF-GM/TtOSBVXcMmI/AAAAAAAAHvk/GH1PZPVvU7c/follow.png'/></a></div>

3. Now you just need to replace the xxxxxxxx in the above code with your blogger ID which you can see in your dashboard URL address bar like below.

blogger blog id

4. That’s it now save your gadget and refresh your blog, well its too much on the top or on the right you can play with the above orange values and get it according to your wish and also make sure to upload image to your own blogger server.