Google+

Thursday, May 9, 2013

Pop-up Face Book like box on your blogger




  • First sign-in to your blog.
  • Then select template in left side bar of your dashboard.
  • Next select option Edit HTML in it.
  • Use ctrl+F or search manually for </body> tag.
  • Then copy and paste the code below. Above the body tag.


 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'/>
<script src='https://raw.github.com/EXEIdeas/JS/master/ColorBox-v1.3.16'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf(&#39;visited=false&#39;) == -1)
{
var fifteenDays = 1000*60*60*24*15;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString();
$.colorbox({width:&quot;400px&quot;, inline:true, href:&quot;#exestylepopups&quot;});
}
});
</script>
<style type='text/css'>
/*
ColorBox v1.3.16
(Copyright (c) 2011 Jack Moore - jack@colorpowered.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}
#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/AVvXsEhtJvBGjgg8ayhEdNLPzOndOUsWoeyEb0Jb-S9z4CyZovPbx0ZLTyHlTSuUORnGmWxBV6UPDHPL4NY8aTRGO6ZFnOGYlqvS_rWFINuZdVELXL6po5y44gh1h9J1oz2Gs89-T-DcjS3a8HA/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYryxcUr7vWDDfXw2EaSlcROZ838S9Rw29ydlJ2UY6aoR57yuZXc2aatz0z0fevNe_wUzS319F32Hy5hR_Kg_zsdU77ecrusL3_NUD2dQ8mPZAH8y1qh7P87x3hC2ECvn0v45YuURRKw/s400/border.png) repeat-x
top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJvBGjgg8ayhEdNLPzOndOUsWoeyEb0Jb-S9z4CyZovPbx0ZLTyHlTSuUORnGmWxBV6UPDHPL4NY8aTRGO6ZFnOGYlqvS_rWFINuZdVELXL6po5y44gh1h9J1oz2Gs89-T-DcjS3a8HA/s1600/controls.png) no-repeat
-36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJvBGjgg8ayhEdNLPzOndOUsWoeyEb0Jb-S9z4CyZovPbx0ZLTyHlTSuUORnGmWxBV6UPDHPL4NY8aTRGO6ZFnOGYlqvS_rWFINuZdVELXL6po5y44gh1h9J1oz2Gs89-T-DcjS3a8HA/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYryxcUr7vWDDfXw2EaSlcROZ838S9Rw29ydlJ2UY6aoR57yuZXc2aatz0z0fevNe_wUzS319F32Hy5hR_Kg_zsdU77ecrusL3_NUD2dQ8mPZAH8y1qh7P87x3hC2ECvn0v45YuURRKw/s400/border.png) repeat-x
bottom left}#cboxBottomRight{width:14px;height:43px;background:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJvBGjgg8ayhEdNLPzOndOUsWoeyEb0Jb-S9z4CyZovPbx0ZLTyHlTSuUORnGmWxBV6UPDHPL4NY8aTRGO6ZFnOGYlqvS_rWFINuZdVELXL6po5y44gh1h9J1oz2Gs89-T-DcjS3a8HA/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJvBGjgg8ayhEdNLPzOndOUsWoeyEb0Jb-S9z4CyZovPbx0ZLTyHlTSuUORnGmWxBV6UPDHPL4NY8aTRGO6ZFnOGYlqvS_rWFINuZdVELXL6po5y44gh1h9J1oz2Gs89-T-DcjS3a8HA/s1600/controls.png) repeat-y
 -175px 0}#cboxMiddleRight{width:14px;background:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtJvBGjgg8ayhEdNLPzOndOUsWoeyEb0Jb-S9z4CyZovPbx0ZLTyHlTSuUORnGmWxBV6UPDHPL4NY8aTRGO6ZFnOGYlqvS_rWFINuZdVELXL6po5y44gh1h9J1oz2Gs89-T-DcjS3a8HA/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/AVvXsEj-QCn2YRv2R4PVzvaH3iNerwh-kr0mMBPvi32o6nLYrdeODr1iUDSx8FaRScB3WB7yku-pG0WvAuAfPhSrnRs3g5odnYlOgIscYfano2UZfOwEug2AfjTGNs2kNEhyphenhyphenFi3SOTN7VvlhrmY/s400/loadingbackground.png) no-repeat
 center center}#cboxLoadingGraphic
{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7XYbgWqWG7zuBHxGzku6A5ev25eNFTZQEx3n42TmB6KeWLr923B6-7qHPIjFYNR7ZSjwVFqr2OykTsjaCwFt0pc8lMWMUExidChgPF5jdseLSakOZVRoMYHVL8bZWVvi-osiyqqg7Wy4/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/AVvXsEhtJvBGjgg8ayhEdNLPzOndOUsWoeyEb0Jb-S9z4CyZovPbx0ZLTyHlTSuUORnGmWxBV6UPDHPL4NY8aTRGO6ZFnOGYlqvS_rWFINuZdVELXL6po5y44gh1h9J1oz2Gs89-T-DcjS3a8HA/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}
#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb
 a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;
color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;
border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;
border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;
font-family:arial !important}
</style>
<div style='display:none'>
<div id='exestylepopups' style='padding:10px; background:#fff;'>
<center>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Finfounleashed&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=238' style='border:2px; overflow:hidden; width:300px; height:258px;'/>
</center><p style=' float:right; margin-right:35px; font-size:10px;'><a href='http://www.info-unleashed.blogspot.com' style=' font-size:9px; color:#3B78CD; text-decoration:none;'/></p></div></div>

Replace the infounleashed   highlighted one in the code with your Facebook page name.
You can find the name of your FB Page in title bar of your browser,when you open your page.
save the changes and Thus you are done.click view blog and enjoy :)

Note : if you don't want your pop-up to be displayed on every reload,Change" false to true" in  if (document.cookie.indexOf(&#39;visited=false&#39;) == -1) line mentioned above.


No comments:

Post a Comment