Thursday, January 26, 2017

facebook Static like Box widget that appear on mouse hover

facebook static like box widget is a stylish widget. and it will show on mouse hover. it means facebook like box will appear when someone will move the mouse on a frame. by using this widget your template will look more stylish and advance.  this widget is created with Jquery and CSS. so it will not affect the page loading speed. Also, read this: facebook popup like box widget for your website stylish design.
you can also say this is the widget that is fixed on the right side. and It will show the facebook like box. when you or someone else will move the mouse on it. to add facebook static like box widget in blogger blog follow our below steps.
facebook Static like Box widget that appear on mouse hover

how to add facebook Static like Box widget in blogger blog

  1. go to the blogger and log in your account.
  2. select your blog where you want to add this widget.
  3. from your blog dashboard click on the layout option.  
  4. click on the add gadget link from the sidebar section. 
    facebook Static like Box widget that appear on mouse hover
  5. a new window will display on your screen. select HTML/javascript gadget from this window. 
    facebook Static like Box widget that appear on mouse hover
  6. now in the next page leave the title area. and paste the following code into the text box. 
    facebook Static like Box widget that appear on mouse hover
  7. click on the save button. and facebook static like box widget is added to your blogger blog. 


<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".hob").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.hob{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3tf7oQkYNK0a24ePSjGOYhimrInicUc7w6szyv_I5xupSmRa143DhBnIOt5vc5MHkSWJ9Oxc0FFQXY_Tsal9rcGjxamSb0291GTaUfq27wudl0eAAPP2FA3z4wNGgtAmehrgQMXKKbnM/s1600/facebookbg.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.hob div{border:none;position:relative;display:block;}
.hob span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.hob span a{color: #808080;text-decoration:none;}
.hob span a:hover{text-decoration:underline;}
</style><div class="hob" style=""><div><a href="http://helponblogging.blogspot.com/" rel="dofollow" target="_blank" title="help on blogging All Blogger Tricks blogging tips"><img src="http://bit.ly/2jXczM5" alt="help on blogging All Blogger Tricks blogging tips" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://helponblogging.blogspot.com/" rel="dofollow" target="_blank" title="help on blogging All Blogger Tricks blogging tips"><img src="http://bit.ly/2jXczM5" alt="help on blogging All Blogger Tricks blogging tips" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://helponblogging.blogspot.com/" rel="dofollow" target="_blank" title="help onblogging all blogger tricks blogging tips"><img src="http://bit.ly/2jXczM5" alt="Techtunes" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/92tricks-580765418758066;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe></div></div>

customization
this script also needs a little bit customization. in this widget, you need to replace 92tricks-580765418758066 with your own facebook page name. the replacing area is marked with the red color. you can also remove <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>  if your template already have a Jquery script.
that's it. thanks for reading my this post. keep visiting for more useful posts. and if you have any question about this post you can ask me by dropping your comment below.


No comments:

Post a Comment

Template Designed By 92TRICKS © Copy Rights All Right Receved
Scroll to Top