Thursday, November 21, 2013
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
</div>
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.)
Tired of checking for new posts ?
Subscribe to:
Post Comments (Atom)
0 comments: