Pin It Now!
STEPS
1.Go to your blogger dashboard
2.Now go to Layout and select add a gadget and choose HTML/javascript
3.Now copy the code given below and edit your facebook username and subscription ID then paste it inside the content box of Html/javascript
<style>
/* Jquery Facebook Likebox Popup Version 2.0
*/
#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/AVvXsEjlIE9WjFeaa7RbbaCp6rwLBThyphenhyphenqedqdeGHWMapzsKq2_ERkiUAs8kIRNnQSSO5dd6qiiw6z7BAOcpE2ZJ1eeQ-EPII8SdCw1k5T4mjSWTzP7LCkY0o0nYgr0oWDmPmvKeq_e1ha0MJQxw/s1600/controls.png) no-repeat 0 0 #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4QzDY3izcfXsxAS_PeIsQGHQJS0XKb2EBzhMNIWoV3V15ZslvP5bnodqhxo6Kg1IpVqamP_AwGamaq0tgVzIHDC1-upwo327Jri6aKwQUWxSaA0TAPLIDWmXYK2-CDoWhp2VzqLWGmGQ/s400/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIE9WjFeaa7RbbaCp6rwLBThyphenhyphenqedqdeGHWMapzsKq2_ERkiUAs8kIRNnQSSO5dd6qiiw6z7BAOcpE2ZJ1eeQ-EPII8SdCw1k5T4mjSWTzP7LCkY0o0nYgr0oWDmPmvKeq_e1ha0MJQxw/s1600/controls.png) no-repeat -36px
0;}
#cboxBottomLeft{width:14px; height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIE9WjFeaa7RbbaCp6rwLBThyphenhyphenqedqdeGHWMapzsKq2_ERkiUAs8kIRNnQSSO5dd6qiiw6z7BAOcpE2ZJ1eeQ-EPII8SdCw1k5T4mjSWTzP7LCkY0o0nYgr0oWDmPmvKeq_e1ha0MJQxw/s1600/controls.png) no-repeat 0
-32px;}
#cboxBottomCenter{height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4QzDY3izcfXsxAS_PeIsQGHQJS0XKb2EBzhMNIWoV3V15ZslvP5bnodqhxo6Kg1IpVqamP_AwGamaq0tgVzIHDC1-upwo327Jri6aKwQUWxSaA0TAPLIDWmXYK2-CDoWhp2VzqLWGmGQ/s400/border.png) repeat-x bottom
left;}
#cboxBottomRight{width:14px; height:43px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIE9WjFeaa7RbbaCp6rwLBThyphenhyphenqedqdeGHWMapzsKq2_ERkiUAs8kIRNnQSSO5dd6qiiw6z7BAOcpE2ZJ1eeQ-EPII8SdCw1k5T4mjSWTzP7LCkY0o0nYgr0oWDmPmvKeq_e1ha0MJQxw/s1600/controls.png) no-repeat -36px
-32px;}
#cboxMiddleLeft{width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIE9WjFeaa7RbbaCp6rwLBThyphenhyphenqedqdeGHWMapzsKq2_ERkiUAs8kIRNnQSSO5dd6qiiw6z7BAOcpE2ZJ1eeQ-EPII8SdCw1k5T4mjSWTzP7LCkY0o0nYgr0oWDmPmvKeq_e1ha0MJQxw/s1600/controls.png) repeat-y -175px
0;}
#cboxMiddleRight{width:14px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlIE9WjFeaa7RbbaCp6rwLBThyphenhyphenqedqdeGHWMapzsKq2_ERkiUAs8kIRNnQSSO5dd6qiiw6z7BAOcpE2ZJ1eeQ-EPII8SdCw1k5T4mjSWTzP7LCkY0o0nYgr0oWDmPmvKeq_e1ha0MJQxw/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/AVvXsEjqaGTI573IGihfoJxCdod304DuUVF8VvAApv9wf4o5cGkP_FuYjgasLKU86P4-bDvVesE2U6laTGge1tM_FPZMi4MtZ-09bn5kkK_7s0HNVm687JxmwYMsFjysTS3lWnr2DSUlhLRsm9k/s400/loadingback
ground.png) no-repeat center center;}
#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6fAvjXuRITTLQwspXSKQXA6X7QGDnmVqKsRxQlMYxo-3CEBM1ALc0PQUrCA6FlfuewHSNUVdoJIc7XYWc1AfmWSE_BL2H6dkCicJzZc6uJkfpSq8YC_PsnwHdv-WyzwmO1HvLtf1-fg4/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/AVvXsEjlIE9WjFeaa7RbbaCp6rwLBThyphenhyphenqedqdeGHWMapzsKq2_ERkiUAs8kIRNnQSSO5dd6qiiw6z7BAOcpE2ZJ1eeQ-EPII8SdCw1k5T4mjSWTzP7LCkY0o0nYgr0oWDmPmvKeq_e1ha0MJQxw/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: #336699;
font-size: 18px !important;
font-weight: bold;
margin: 10px 0;
border:6px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 7px 7px 7px #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;
}
/* ---------Subscribe Form---------- */
.box-title1 {
border:6px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 7px 7px 7px #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:#3E81C4;
border: 1px solid #336699;
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://way2bloggerz.googlecode.com/files/w2bzface.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;'>
<center><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnp2ZyGU2jH2o6vYgwJPDKh_lCYI5YreK7N8zp0yMbvLItXtvV3El9BmuxlTfOItzHJ3IiVO-ERE7NK0KNJZ79EdEkNAFTOGZ5XD-xAlC_3FDyw2sQhxUUu_5uIcMTK09eYLdniiDQcGIU/s1600/joinusonfacebook.png" width:300px;
height:104px;"/></center>
<center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fway2bloggerz&width=300&colorscheme=l
ight&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>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Diav9eMYjIWkN_7XHzIVnzP_wmwvYJpyC_hnx0jEgq3HcQ5tmgpIi5EPpp6bT7rXbjM92JeEOKeiAvZIed9iMuSp5KUkgql7EN9x99p12aRCNTgcSTheFmHJrpzyj-pKP5ZYP8GlnT9s/s1600/subscribe.png" width:300px;
height:104px;"/></center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow"
onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=itsallaboutblogging', '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="itsallaboutblogging" 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;" >Get <a style=" font-size:9px; color:#3B78CD;
text-decoration:none;" href="http://way2bloggerz.blogspot.in/">This</a></p>
</center></div>
</div>
Important Customizations
facebook page Username
change way2bloggerz in line 162 with your facebook page username
Subscription ID
change itsallaboutblogging in line 174 and line 178 with your subscription ID
No comments: