How To Make Floating Widget
Hi, bloggers! Now, I will post about how to make floating widget . The main function of this trick is to save our blog space. Because this t...
https://iskablogs.blogspot.com/2011/01/how-to-make-floating-widget.html
Hi, bloggers! Now, I will post about how to make floating widget. The main function of this trick is to save our blog space. Because this trick not needs space in the sidebar, but floating on our blog and always visible although we scroll. So, the visitors will always see the widget. If you already know and you want to make floating widget on your blog, you can follow the steps below.
1. Log in to your blogger account
2. Go to Deisgn --> Edit HTML
3. Find this code : ]]></b:skin> , then copy the code below and paste above ]]></b:skin>.
4. After that, find this code </body> , then copy the code below and paste above </body>
1. Log in to your blogger account
2. Go to Deisgn --> Edit HTML
3. Find this code : ]]></b:skin> , then copy the code below and paste above ]]></b:skin>.
#trik_pojok {
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); }
=> You can change "bottom" with "top" , and "left" with "right" , up to where you want to put.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); }
4. After that, find this code </body> , then copy the code below and paste above </body>
<div id="trik_pojok">
YOUR WIDGET / IMAGE / ADVERTISEMENT SCRIPT
</div>
=> You must change "YOUR WIDGET / IMAGE / ADVERTISEMENT SCRIPT" . For example I want to put a bannerYOUR WIDGET / IMAGE / ADVERTISEMENT SCRIPT
</div>
<div id="trik_pojok">
<a rel="nofollow" href="http://tipsandtricksfor.blogspot.com/"><img border="0" src="http://robots1996.fileave.com/besar.jpg" ></a>
</div>
5. Save now!
<a rel="nofollow" href="http://tipsandtricksfor.blogspot.com/"><img border="0" src="http://robots1996.fileave.com/besar.jpg" ></a>
</div>