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 www.writingcraze.com 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU5iSsm67Aqcn5K9F7TTZM4rUfEbUpE9guEyoJGGd3_BrBCj12Y5PvlqT59ShyGLxwKaws7XnLXnS4C4DD5lODB2JqWI87XO6MDZ3pUo97V4z0w7aCy9FLH3IWsrwR4JJDNqIcic01xkU8/") 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 www.writingcraze.com--><div class="writingcraze" style="">
<!--Brought to you by http://www.writingcraze.com/2013/11/floating-facebook-like-box-widget-for.html--><div>
<!-- http://www.writingcraze.com/2013/11/floating-facebook-like-box-widget-for.html--> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fwritingcraze&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;color:000;"><!--Brought to you by www.writingcraze.com--></iframe><!--Brought to you by www.writingcraze.com--><span><!--Brought to you by www.writingcraze.com--><center>
<a style="color:#a8a8a8;font-size:8px;" href="http://jasperroberts.com">Jasper Roberts</a> - <a style="color:#a8a8a8;font-size:8px;" href="http://www.writingcraze.com/2013/11/floating-facebook-like-box-widget-for.html">Blog</a></center>
</span></div>
</div>
<!--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.
