25 November 2013

Scrolling Facbook Popup Like Box Widget for Blogger

// // 5 comments
Scrolling Facbook Popup Like Box Widget for BloggerIn our blog we’ve already shared few Popup widgets for Facebook for blogger. These facebook widgets mostly used to get more likes for blogs and websites. Here TechTrickHome brings you another exclusive facebook popup widget with closing button to gain more facebook likes. As per our  view this widget won’t annoy visitors anymore, it'll reminds those readers  who are just newly launch on your blog. If any visitor launch on your blog then this widget will automatically  popup to ask them to like the facebook page, after that reader liking facebook then automatically it won’t appear again for them.
This widget  designed with  an amazing scrolling effect, popup style, with simple format. Webmasters don’t need to work hard for adding this widget into their blogs, simply copy the code given below and add it to the blog or website. Users can adjust the color of widget according to their wish by easy customization tips. Let’s begin the tutorial part for adding facebook popup widget.




Add Likebox on Blogger


  • Sign into your blogger account
  • Goto Dashboard
  • Select ‘Layout’ link tab
  • Click on ‘Add a Gadget’ and select ‘HTML/Javascript’ link tab widget
  • Now copy the below code and paste in it 





<style type='text/css'> #techtrickhomeFBpop { position:fixed !important; position:absolute; top:-1000px; left:50%; margin:0px 0px 0px -182px; width:300px; height:auto; padding:16px; background:#FEFEFE;font:normal Dosis, Georgia, Serif; color:#111; border:2px solid #333; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } #techtrickhomeFBpop a.bsclose { position:absolute; top:-10px; right:-10px; background:#fff; font:bold 16px Arial, Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#000000; border:2px solid #333; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:22px; -moz-border-radius:22px; border-radius:25px; cursor:pointer; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type='text/javascript'> $(window).bind("load", function() { // Animate Top $('#techtrickhomeFBpop').animate({top:"50px"}, 1000); // Widget by www.techtrickhome.com $('a.bsclose').click(function() { $(this).parent().fadeOut(); return false; }); }); </script> <div id='techtrickhomeFBpop'> <!-- Widget by www.techtrickhome.com Start --> <center><b><a class="TechTrickHome">Don't Forget To Join With Our Community</a></b></center> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftechtrickhome&amp;width=292&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe></center> <!-- Widget by www.techtrickhome.com End --> <a class='bsclose' href='#'>&times;</a> <center style="float:right; margin-right:10px;"><span style="font-size:xx-small; color:#000; text-decoration:none;">+Get this at</span> <a target='_blank' style="font-size:xx-small; color:#3B78CD; text-decoration:none;" href="http://www.techtrickhome.com/2013/11/scrolling-facbook-popup-like-box-widget.html">TechTrickHome</a></center> </div>



  • Now save it and you're done



Customization

Change techtrickhome with your facebook fan page name.


You just created a new stylish likebox widget for your blog,just have a look on it.we bet you'll like it.Do share your view with us.If having any problem regarding this,then just use the below comment section.Your comments will be highly appreciated.

Articles You May Like

5 comments: Leave Your Comments

  1. Wow I wanna try this on my blog! Thanks for the heads up. :)

    ReplyDelete
  2. This is very effective though at times annoying since it add delay in entering your site.

    ReplyDelete
  3. Is it possible to have the same widget work on a different platform?

    ReplyDelete