Thursday, 14 March 2013
How to add Pop Up Facebook Like Box widget for Blogger
Here are th Steps:
Step 1: Goto Dashboard-->Layout-->Add A Gadget-->Html Javascript
Copy and paste the following code in it.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.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:"#exestylepopups"});
}
});
</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/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQQaVHxnF5YHKRQyDm1FjjEuxcfq7Ke1kvJxfGu0NDECwib7CotYRLMOXMjvgLTW9s3U0G3xS24MmvgqSUk4xrXLrDaeXB-jxSmpLeqmh9SzMMYecdZzUS8jKRube_LIGcpXC-IkMZJY/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQQaVHxnF5YHKRQyDm1FjjEuxcfq7Ke1kvJxfGu0NDECwib7CotYRLMOXMjvgLTW9s3U0G3xS24MmvgqSUk4xrXLrDaeXB-jxSmpLeqmh9SzMMYecdZzUS8jKRube_LIGcpXC-IkMZJY/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/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/AVvXsEgl_Dva5YgM3TC_eTk0N8Wnye4Xpsa0OcSHcFttV_AfchEaLnq-FUt0uvIud8oTzaP97WdZOtWuLVHCQ-1j43RPx8zo3WZPTd6rSyCWV5xC7wxKxP9VbfvQkIdZYGdjUjmjJ-rz0omXGgc/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi12x1EjzmBDxg2WZOSD7hAkHxRl7wX_nQQYlh69eIrlHsqOfwiZIP3zu4X-RUgwT6QXBSiVS7hweLV-sfu4De3PQ0oLPFfgs7ZmDzUBv2yGrHC5-Sqcz3LdQlnEsh_VHOnfHpSaMeHTBU/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/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/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><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSoftwaresRockers&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><p style=" float:right; margin-right:35px; font-size:9px;" >Get This <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.spiceupblogging.com">SpiceUpBlogging</a></p>
</div></div>
Step 2: Replace SoftwaresRockers with your facebook page name.
<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:"#exestylepopups"});
}
});
</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/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQQaVHxnF5YHKRQyDm1FjjEuxcfq7Ke1kvJxfGu0NDECwib7CotYRLMOXMjvgLTW9s3U0G3xS24MmvgqSUk4xrXLrDaeXB-jxSmpLeqmh9SzMMYecdZzUS8jKRube_LIGcpXC-IkMZJY/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGQQaVHxnF5YHKRQyDm1FjjEuxcfq7Ke1kvJxfGu0NDECwib7CotYRLMOXMjvgLTW9s3U0G3xS24MmvgqSUk4xrXLrDaeXB-jxSmpLeqmh9SzMMYecdZzUS8jKRube_LIGcpXC-IkMZJY/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/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/AVvXsEgl_Dva5YgM3TC_eTk0N8Wnye4Xpsa0OcSHcFttV_AfchEaLnq-FUt0uvIud8oTzaP97WdZOtWuLVHCQ-1j43RPx8zo3WZPTd6rSyCWV5xC7wxKxP9VbfvQkIdZYGdjUjmjJ-rz0omXGgc/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi12x1EjzmBDxg2WZOSD7hAkHxRl7wX_nQQYlh69eIrlHsqOfwiZIP3zu4X-RUgwT6QXBSiVS7hweLV-sfu4De3PQ0oLPFfgs7ZmDzUBv2yGrHC5-Sqcz3LdQlnEsh_VHOnfHpSaMeHTBU/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/AVvXsEjqAnKXVpnJR3Rl9UtT8C1vOUG5faxQsYf3mQ4sN5pS4exTulak5nhvP25Ti3ZSgcl7I0r4ktYb2ZTGXrM504SZeUSMC4CAc_0ocm8q8j0Y9bCgOdkBV1djgpMeU_S_LmhqJAHuUBcpgZc/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><h3 class="mdbox-title">Receive all updates via Facebook. Just Click the Like Button Below...</h3></center><center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FSoftwaresRockers&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><p style=" float:right; margin-right:35px; font-size:9px;" >Get This <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.spiceupblogging.com">SpiceUpBlogging</a></p>
</div></div>
Step 2: Replace SoftwaresRockers with your facebook page name.
Step 3: This is designed to appear the likebox once. If you need this to appear all times of loading your site, then change the value true to false.
Step 4: Now save the gadget.
Note: To make your widget appears only on your homepage do the following...
Add the following code before the provided code.
< b:if cond='data:blog.url == data:blog.homepageUrl'>
And add the following code after the provided code
< /b:if>
0 comments:
Post a Comment