The most searched blogger stuff is Popup Facebook fanpage, because if your fan page has liked by a thousand or more people, i think you've a lot of traffic. Ok so this is it Awesome jQuery Facebook Likebox Popup For Blogger
Add Awesome Facebook Likebox Popup
1. Login to your blogger account2. Go to Design tab
3. Click "Add a Gadget" and then choose "HTML/javascript"
4. Paste the following code instead it
5. Save it, and you'll see how the "Awesome jQuery Facebook Likebox Popup For Blogger" look like
<style>
/* Jquery Facebook Likebox Popup Version 2.0 by MBT MyBloggerTricks.com
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdiP11mU_MA8LKJ-CRqkvljrz3qZb4zO3_trP-LTGc9qMoJvB7nI8R3UDqcBEFhKRtrIxz1vlOZST_ucSQBHHlDxBid6e8_YhllD4emvds2TopacJelBJles7mp7CyDFhqXY42zaOJiWU/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdiP11mU_MA8LKJ-CRqkvljrz3qZb4zO3_trP-LTGc9qMoJvB7nI8R3UDqcBEFhKRtrIxz1vlOZST_ucSQBHHlDxBid6e8_YhllD4emvds2TopacJelBJles7mp7CyDFhqXY42zaOJiWU/s400/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) repeat-y -211px 0;}
#cboxContent{background:#fff; overflow:visible;}
#cboxLoadedContent{margin-bottom:5px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjklYVo9fPMW1Aj5rzaJ7pbAbJdua6WOEUXv31M1b5gXFrpbx5mG5bKW3oADiHqCkROWxA6yKY8O6oEYi2L7yIQUhWaAfsOPPxwfT6r9HKr732pmxoQWGrVpIG69sJnZ10KLdi9_U8Hh1g/s400/loadingbackground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_xis4sPKnA5TAvm_KxSA513k4171LLi5WBxqcXM-i8Y0Qg4NWpucuv0as0fKIK17m7mj-yz52_kjjpU1Zfa2VFlh0FqIC94rGrnmbBY_0Q-Xk3dD5MaaKC0RaZ-m6ZZfc_9j2jejP0I/s400/loading.gif) no-repeat center center;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG1kcbkzEhmdzr2s4Bn550w6OdVdwifrlfKyCGJP4l8cyKq0v1TDBU2iecePOpycQJ-xuQjMfqXS_inP8u4iJUPgVY3-6A1AKyQhDu6nn03LAs6QBHpuBSZjasfV2imqsZh1gzzM8p4tg/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
#cboxPrevious{left:0px; background-position: -51px -25px;}
#cboxPrevious.hover{background-position:-51px 0px;}
#cboxNext{left:27px; background-position:-75px -25px;}
#cboxNext.hover{background-position:-75px 0px;}
#cboxClose{right:0; background-position:-100px -25px;}
#cboxClose.hover{background-position:-100px 0px;}
.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger Version 2.0
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #F66303;
font-size: 18px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
/* ---------MBT Subscribe Form---------- */
.box-title1 {
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
margin: 10px 0;
}
.enteryouremail{
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}
.submitbutton{
background:#F66303;
border: 1px solid #F66303;
text-shadow: 1px 1px 1px #333;
box-shadow: 3px 3px 3px #666;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://mybloggertricks.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBlogYahyagan&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<div class="box-title1 ">
<center>
<h3 style="color:#F66303;">You can also receive Free Email Updates:</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogYahyagan', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="BlogYahyagan" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
</div>
<!--Please Do not Remove the Credits -->
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>
Information
Make this change :- *30 Setting this value will effect cookie refreshment. I have set the popup to appear only once to the visitor and this popup will appear again after 30 days. If you wish to display popup to your visitors after a week then set 30 to 7. Similar if you want it to appear daily then set 30 to 1. Note that if you set the value to low then it can irritate your daily readers.
- Replace BlogYahyagan with your facebook username. If your facebook username is too long and includes numbers then do not panic and first create a Branded Facebook username for your blog in seconds by going to Facebook.com/username
- Next replace twice BlogYahyagan with your feed title. It appear at the end of your feed link.
7. Save it
Visit your blogs and see it popping up just fine! Remember as we already mentioned on previous post that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again.Next Post Create An Awesome Social Media Widget With Hover Effect
Source : MyBloggerTricks
