Friday, July 29, 2016

Mahbub Ali Khan

Top Blogger Widgets - Part 1 (Floating Facebook Like Box Widget)


Blogger widgets are the most vital part of blog design. Widgets not only enhance the looking attractiveness, it also plays a vital role in blog’s user-friendliness. New bloggers struggle a lot finding more attractiveness for their blogs. Choosing and placing the correct widget on your blog can attract more visitors. 

                                Floating Facebook Like Box Widget

BlogSpot doesn’t have vast plugin or widgets collections but it has some awesome widgets and of course useful. My post here might help you finding some better widgets for your blog. 

Floating Facebook Like Box Widget

It is safe to say that you are attempting to get more Facebook followers? These followers will turn to be your regular visitors. Include a Facebook like box to your web journal or site. Try out the floating one. The gadget stays in a settled position on the right-hand side of your site.

When you put your mouse on the logo “Facebook”, the like box will then slide and uncover itself. From my experience I can say, this floating Facebook like box has more potentiality in getting viewers focus. It covers less space on the website and user-friendly.

How to get?

Step 1:

Go to Layout from the Blogger dashboard.

Step 2:

Select Add Gadget

Step 3:

Select HTML / JavaScript.

Step 4:

Copy the code below and paste it in the Html box.
<!--Floating Facebook Widget by START-->
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".writingcraze").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .writingcraze{background: url("") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;} .writingcraze div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;} .writingcraze span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .writingcraze span a{color: gray;text-decoration:none;} .writingcraze span a:hover{text-decoration:underline;} } </style><!--Brought to you by><div class="writingcraze" style="">
<!--Brought to you by><div>
<!--> <iframe src="" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"><!--Brought to you by></iframe><!--Brought to you by><span><!--Brought to you by><center>
<a style="color:#a8a8a8;font-size:8px;" href="">Jasper Roberts</a> - <a style="color:#a8a8a8;font-size:8px;" href="">Blog</a></center>
<!--Floating Facebook Widget by writingcraze END-->

Step 5:

Finally, save the arrangement.

Still finding difficulty adding it? Feel free to comment.

This was all about adding attractive Facebook Floating Box to the blog. Will be back with new widget soon.