Thursday, November 21, 2013

Share It

How to add floating widget to blogger blog

In previous article we have discussed about adding a google plus follower gadget. In this post I'm going to show you how to create floating widget with simple css and adding it to your blogger blog. This will be helpful when you want to show ads or widgets that float. I already discussed how to add floating sticky meny with social widget bar at bottom of your blog.

Here is how to add this floating widget to your blog. Before adding this you need to backup your template.
Here is a simple CSS code and small HTML div to add.

You may like to read: How to earn money with your facebook pages?

 How to add separate contact page to blogger?

How to add facebook like button below blogger posts?

Best practices to write titles for Search Engine Optimization(SEO)

Great tips to reduce loading time of your blog to increase more readers

Idiotic and funny ways you never know to promote your blog

How to earn money from blogs?

Get more viewers to your blog using facebook fan page

Go to template.
Click Backup/Restore.
Download the template.

Be careful: Backup your template first before you continue further.

Edit HTML.
Find the ]]></b:skin> in your blogger template code.
(Use CTRL+F and search for ]]></b:skin>)

Just above ]]></b:skin> Add the below CSS Code:
#trickstown-float {
position:fixed;position:absolute;bottom:0px; left:0px;
clip:inherit; top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Add HTML Code:
Now you have to place the HTML code for the widget that needs to float.
Place the widget code between the div tags as shown

<div id=”trickstown-float”> and </div>.
For Example the code looks like this.

<div id="trickstown-float">
Widget Code

You can make customizations for this floating widget as you like. Make changes such as the background, margins, 'bottom' with 'top' , and 'left' with 'right' and which ever the change you may want to make.
Please let me know if you have any doubts to clarify.
Thank you
Author: Bhanu Chander Bathini (CEO, Tricks Town.)
Hey friends, I am Bhanu Chander a Web Designer/Developer, Content writer, Freelance SEO analyst and a blogger. I am pursuing my M.Tech in Computer Science and Engg. You can contact me on for web design solutions at low cost with effective SEO.