Monday, August 18, 2014

Facebook Like Box & Subscription Pop Up Box For Blogger

Today i'm gonna show you an awesome article through which you can embed both Facebook like box and subscription box in single pop up window in just 5 steps.

Step 1: Go to your Blogger template and click on Edit template.

Step 2: Now find the word </body> by using Ctrl+F function

Step 3: Now just above the word </body> paste the following code


<!-- fb like box and subscription box in single pop up by bforblogger.com-->

<style type='text/css'>
#alltechcorner div.overlay {
background-color: #000;
}

#alltechcorner {
position:fixed !important;
position:absolute;
top:50px;
left:50%;
margin:0px 0px 0px -152px;
width:300px;
height:auto;
padding:16px;
background:#000;font:normal Dosis, Georgia, Serif;
color:#fff;
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: 2px 4px 9px #0082FF;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
z-index: 999999;
}

#alltechcorner a.alltechcornerclose {
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;
z-index: 9999;
}
</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;#alltechcorner&#39;).animate({top:&quot;50px&quot;}, 1000);
// Widget by www.alltechcorner.com
$(&#39;a.alltechcornerclose&#39;).click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>

<div id='alltechcorner'>
<div class='overlay' style='opacity: 0.8; height: 1000px; width: 1263px; position: fixed; left: 0px; top: 0px; z-index: -999999;'/>

<center>
<b>Join Us At 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%2Falltechcorner&amp;width=300&amp;height=240&amp;show_faces=true&amp;colorscheme=dark&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=196282097100252' style='border:none; overflow:hidden; width:300px; height:258px;'/>

  <b>Subscribe for more awesome posts</b> <hr/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=AllTechCorner&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='background: #00AAFF; border:1px solid #ccc;padding:3px;text-align:center; border-bottom-left-radius:5px; border-bottom-right-radius:5px;' target='popupwindow'><p>Enter your email address:</p><p><input name='email' style='width:140px' type='text'/></p><input name='uri' type='hidden' value='AllTechCorner'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='Subscribe'/></form>
  <span style='font-size:10px;'>Facebook like box and Subscription box in single pop up by <a href='http://www.alltechcorner.com'>AllTechCorner.com</a><br /><a href="http://www.alltechcorner.com/2014/05/fb-like-box-and-subscription-box-in-single-pop-up.html" target="_blank">Get this Widget</a></span>
</center>

<a class='alltechcornerclose' href='#'>&#215;</a>

</div>
<!-- fb like box and subscription box in single pop up by bforblogger.com -->

Step 4: Now in the above code replace alltechcorner and Alltechcorner with your facebook page username and feedburner ID name respectively.

Step 5: Now save the Template and boom just reload your website for the awesome widget.  


No comments:

Post a Comment

© 2014 B for Blogger | Privacy Policy | Contact Us