Enter your email to subscribe Devaradise. Totally free!

How to make Floating/fixed widget (by CSS)

For a Blogger, floating widget on blog maybe is an important for make easy navigation. the function of floating widget is to show that is mportant widget you want to always seen by visitors. The content of floating widget usually is a widget that ask visitors to participate on our blogs.
however, Some Blogger confused and can’t to make this widget (maybe you included, hehe) . So, here i will tell you how to make fixed widget on your blog. the ways is not too difficult.

1. Log in to your dashboard.
2. go to “layout/Page element” Menu.
3. Choose or add widget you like to made fixed style.
4. Then, see the id of that widget. the way is like the image below.

*example, your widget id is HTML4
5. After you find and know the widget ID, Go to Template
6. EDIT HTML >> Proceed. *tips : backup your template before you editing HTML
7. Check “expand widget template”.
8. find the code of your widget like image below :

*find it by do search by click CTRL + F.

9. after that, add the red code so be like Below :

<div class=”html4″>

<b:widget id=’HTML4′ locked=’false’ title=” type=’HTML’>
<b:includable id=’main’>
<!– only display title if it’s non-empty –>
<b:if cond=’data:title != &quot;&quot;’>
<h2 class=’title’><data:title/></h2>
<div class=’widget-content’>

10. then, place the css code below above ]]></b:skin> or between <b:skin><![CDATA[ and ]]></b:skin>code.

.html4 {

*css code explanation :
– .html4 is tell that your widget class is html4. it is because code <div class=”html4″></div> you add before.
– bottom:0px; and right:0px; it tell that your widgte position is at right bottom corner. you can modify it as you like. ex. top:0px; and left:0px; is for locate at top left corner.
*if your widget id is not html4, change the html4 code above by your widget id.

11. save it and Finish.

okay, That’s all. If you have any questions, just ask by leave comments below.

hope this useful for you. Happy Blogging 🙂