How to add Pop Up Facebook Like Box widget for Blogger

Friends, here is the widget for blogger from which your facebookk likes will be increased named as pop up facebook like box... Clickon demo to see the widget

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/AVvXsEiKVH5-jDcTNn2g3t2fjVZhG71QggkG09dKXJhU1_bagBm6Q3TjApFIGueRczjsk1PUi67x7GtWDfDl7UZbS1M5TCsOmp1advVYqzgekz3xOjdRY245kNzyvvSuG8R8Yj0yzqIObO6d-Us/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWd_a8F_a8WRBRJ6LpqPXyPhA4NurmTywvXNR8LFfkRCXg3mXAI4-Vqs-3zXOG8ikuY3hgtjbpfDPPsWiwOB7A_BEL0KPNM0U-NWzwC040pSTm_fojeW3nStHwo0QiZ9Lc15gKeCDSY-Q/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKVH5-jDcTNn2g3t2fjVZhG71QggkG09dKXJhU1_bagBm6Q3TjApFIGueRczjsk1PUi67x7GtWDfDl7UZbS1M5TCsOmp1advVYqzgekz3xOjdRY245kNzyvvSuG8R8Yj0yzqIObO6d-Us/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKVH5-jDcTNn2g3t2fjVZhG71QggkG09dKXJhU1_bagBm6Q3TjApFIGueRczjsk1PUi67x7GtWDfDl7UZbS1M5TCsOmp1advVYqzgekz3xOjdRY245kNzyvvSuG8R8Yj0yzqIObO6d-Us/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWd_a8F_a8WRBRJ6LpqPXyPhA4NurmTywvXNR8LFfkRCXg3mXAI4-Vqs-3zXOG8ikuY3hgtjbpfDPPsWiwOB7A_BEL0KPNM0U-NWzwC040pSTm_fojeW3nStHwo0QiZ9Lc15gKeCDSY-Q/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKVH5-jDcTNn2g3t2fjVZhG71QggkG09dKXJhU1_bagBm6Q3TjApFIGueRczjsk1PUi67x7GtWDfDl7UZbS1M5TCsOmp1advVYqzgekz3xOjdRY245kNzyvvSuG8R8Yj0yzqIObO6d-Us/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKVH5-jDcTNn2g3t2fjVZhG71QggkG09dKXJhU1_bagBm6Q3TjApFIGueRczjsk1PUi67x7GtWDfDl7UZbS1M5TCsOmp1advVYqzgekz3xOjdRY245kNzyvvSuG8R8Yj0yzqIObO6d-Us/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKVH5-jDcTNn2g3t2fjVZhG71QggkG09dKXJhU1_bagBm6Q3TjApFIGueRczjsk1PUi67x7GtWDfDl7UZbS1M5TCsOmp1advVYqzgekz3xOjdRY245kNzyvvSuG8R8Yj0yzqIObO6d-Us/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/AVvXsEh5APn9zYKi6j_2FqUj6dN_rv43VJ99L0iVXc-9xMCqWTplwu9U9WNN0HL_rplwzbUJiQjDR896WL5IKh2GYKH493KIA5F_MU1UsGmnay6R2Q82EmZRiBl3SQLpVzkeH3rtypYtF75Z5yk/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI2IPNOKdc0GJhruDOctg5HZAhf5ppW6EAZtnZoVb1YQ_4WPhzLq5sCM_qJrnQkszcVIjeL54z0PgOYjca6JCIUKnBeZ4IFXsVr8YVCKlUipWcuohh0efpnJlgIhmWsew_8ZmKda7ViDg/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/AVvXsEiKVH5-jDcTNn2g3t2fjVZhG71QggkG09dKXJhU1_bagBm6Q3TjApFIGueRczjsk1PUi67x7GtWDfDl7UZbS1M5TCsOmp1advVYqzgekz3xOjdRY245kNzyvvSuG8R8Yj0yzqIObO6d-Us/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&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;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>

source

Author : Unkown Blogger

Share this

Related Posts