Friday 16 October 2015

Simple way to add Facebook popup Box in Blogger

Facebook is a highly browsed Social Networking site , Engaging your readers via facebook is very important because there are many people searching for high quality contents so if your blog have good contents then Engaging your readers via Facebook will brings more benefits for you as we know there are many ways to promote your site on Facebook but today i will share with you a best and very effective method that is by adding a simple and clean Facebook Page Like Popup Box. Using this popup box you have a very good chance to engage your Readers/Visitors to your site when some one will come to your blog then before seeing any thing he/she will see your facebook popup like box if they will like you facebook page they will be engaged for life time with your blog , so here i am sharing that how can you add it on your blogger blog easily just follow some steps........ 



Step 1

Log in into Blogger Dashboard.
Step 2

Go to Template and Click on Edit HTML Button

Step 3

Find below Code With the help of CTRL+F
</body>

Step 4

Copy and Paste below code before </body>:

<style type='text/css'>#haakblogFBpop {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;}#haakblogFBpop a.haakblogclose {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 src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>$(window).bind(&quot;load&quot;, function() {// Animate Top$(&#39;#haakblogFBpop&#39;).animate({top:&quot;150px&quot;}, 1000);// Widget by www.haakblog.com$(&#39;a.haakblogclose&#39;).click(function() {$(this).parent().fadeOut();return false;});});</script><div id='haakblogFBpop'><!-- Widget by www.haakblog.com Start --><center><b>Don&#39;t Forget To Join US Our Community</b></center><center><iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fbloggerblogtricks&amp;width=300&amp;height=258&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/></center><!-- Widget by www.bloggerblogtricks.blogspot.com End --><a class='haakblogclose' href='#'>&#215;</a><center style='float:right; margin-right:10px;'><span style='font-size:xx-small; color:#000; text-decoration:none;'></span><a href="http://www.bloggerblogtricks.blogspot.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href='http://bloggerblogtricks.blogspot.com/2014/03/Facebook-Like-Popup-Box-in-blogger.html' style='font-size:xx-small; color:#3B78CD; text-decoration:none;' target='_blank'>Widget</a></center></div>
 Note : Change Bloggerblogtricks to your facebook page name like http://facebook.com/bloggerblogtricks

No comments:

Post a Comment