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("load", function() {
// Animate Top
$('#alltechcorner').animate({top:"50px"}, 1000);
// Widget by www.alltechcorner.com
$('a.alltechcornerclose').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&width=300&height=240&show_faces=true&colorscheme=dark&stream=false&show_border=false&header=false&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('http://feedburner.google.com/fb/a/mailverify?uri=AllTechCorner', 'popupwindow', 'scrollbars=yes,width=550,height=520');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='#'>×</a>
</div>
<!-- fb like box and subscription box in single pop up by alltechcorner.com -->
Recommended For You:
- How To Show Adsense Ads Between Posts In Blogger
- How to display particular youtube video's thumbnail in blogger
- How to display thumbnails of youtube videos in blogger. 100% working.
- How to edit your blogger template effectively
- How to re-size a youtube video in blogger
- Leaf Look To Blogger Labels
Step 5: Now save the Template and boom just reload your website for the awesome widget.
0 comments:
Post a Comment