How To Display An Awesome Looking Pop Up With Both Facebook Like Box and Subscription Box In 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. (Read my article How to edit your blogger template effectively if you don’t know how to edit a blogger 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 alltechcorner.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 alltechcorner.com –>

Recommended For You:

  1. How To Show Adsense Ads Between Posts In Blogger
  2. How to display particular youtube video’s thumbnail in blogger
  3. How to display thumbnails of youtube videos in blogger. 100% working.
  4. How to edit your blogger template effectively
  5. How to re-size a youtube video in blogger
  6. Leaf Look To Blogger Labels

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. 

More Videos

About All Tech Corner 83 Articles
All Tech Corner is all about latest Technology News, updates from the world of mobile phones, gadgets, computers, tricks and tutorials. We work hard to serve you best and to satisfy your hunger of Technology

Be the first to comment

Leave a Reply

Your email address will not be published.


*