ADD FLOATING WIDGET FOR BLOGGER

Hey friends hope you all are fine. As we all know floating widget is an awesome idea to make the visitor attention on that. Many of us are aware of the social sharing widget with floating touch, but if you want to add you own material on that floating tab then you will get to know how to make that after this tutorial. This tutorial deal with the Css trick. Now lets begin with the steps.

How To Add Css Code?

• Login to your Blogger account.
• Go to your blog “Template” section.
• Click “Edit HTML” and then “Proceed”.
• Press CTRL+F and search this ]]></b:skin> tag.
• Copy the css code below and paste it before ]]></b:skin> tag.
• Click “Save Template” and done! ready for the next step.

Css Code:

#topbloggertricks {
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); }

How To Add Widget Code?

• Now from your blog, go to “Layout” section.
• Click “Add A Gadget” and then “HTML/JavaScript”.
• Add the widget code below into text area section.
• Then save. Remember this don’t put a title into title area.
• Visit your blog.

Widget Code:

<div id=”topbloggertricks”>Widget Code Here</div>

Note:

Remove/Replace the “Widget Code Here” with your widget code.

Customization:

You can change “bottom” with “top” , and “left” with “right” , or what ever position you like (vice-versa).

Kindly Bookmark this Post using your favorite Bookmarking service: