News Update :

Rabu, 09 Januari 2013

Cara Membuat Popup Facebook Like Box Dengan Timer Pada Blog

Print Friendly and PDF
Facebook is the largest social sharing website.Most of the bloggers use it to develop their website.There are different social sharing icons to increase the traffic sources.Here is the pop up facebook like box for increasing the visitors to your site.



By adding this pop up box  the number of likes to your facebook page will be increased.


To add the facebook pop up like box to your blog follow the below 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/AVvXsEi8fwPZvuxjgaYSktr1FbsHn94zhbnyeiwT9Y47-WPikrE5_w6TGIZMCEjJ2AyfK_hyBfZBRZtDDffKAUlkvH2JrxFzcfZqQEhSEtBmzKgXsh7vynH9SOwTwE2jeaJNHZFePBh1ZaY-26A/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7YKs5sA3u3sCGcDVV1swIAiG-QLtVLA58tRhEExVqgBxdA_zh43yj3aa-fyars0OzJU-aqoks8QGsKT4SPj38bHV72FOJKnsZCPFQ8YkC0_HvVoPGSoxLmrf3ekjtmDDDN32Yz8k7264/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fwPZvuxjgaYSktr1FbsHn94zhbnyeiwT9Y47-WPikrE5_w6TGIZMCEjJ2AyfK_hyBfZBRZtDDffKAUlkvH2JrxFzcfZqQEhSEtBmzKgXsh7vynH9SOwTwE2jeaJNHZFePBh1ZaY-26A/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fwPZvuxjgaYSktr1FbsHn94zhbnyeiwT9Y47-WPikrE5_w6TGIZMCEjJ2AyfK_hyBfZBRZtDDffKAUlkvH2JrxFzcfZqQEhSEtBmzKgXsh7vynH9SOwTwE2jeaJNHZFePBh1ZaY-26A/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7YKs5sA3u3sCGcDVV1swIAiG-QLtVLA58tRhEExVqgBxdA_zh43yj3aa-fyars0OzJU-aqoks8QGsKT4SPj38bHV72FOJKnsZCPFQ8YkC0_HvVoPGSoxLmrf3ekjtmDDDN32Yz8k7264/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fwPZvuxjgaYSktr1FbsHn94zhbnyeiwT9Y47-WPikrE5_w6TGIZMCEjJ2AyfK_hyBfZBRZtDDffKAUlkvH2JrxFzcfZqQEhSEtBmzKgXsh7vynH9SOwTwE2jeaJNHZFePBh1ZaY-26A/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fwPZvuxjgaYSktr1FbsHn94zhbnyeiwT9Y47-WPikrE5_w6TGIZMCEjJ2AyfK_hyBfZBRZtDDffKAUlkvH2JrxFzcfZqQEhSEtBmzKgXsh7vynH9SOwTwE2jeaJNHZFePBh1ZaY-26A/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fwPZvuxjgaYSktr1FbsHn94zhbnyeiwT9Y47-WPikrE5_w6TGIZMCEjJ2AyfK_hyBfZBRZtDDffKAUlkvH2JrxFzcfZqQEhSEtBmzKgXsh7vynH9SOwTwE2jeaJNHZFePBh1ZaY-26A/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/AVvXsEjGFJKBftnGMogIRYzYkzerdDFYmrUjvBpZWlX6zLfC9yKozPfnuoxIZvDYbekVe8d4fM1bPLeP3SEIY4Q7NzQ473GI28Dhn5E9wBuAwrhRtI97dNoE2-0215rR_eXgfPA2L6c2YUyzFCU/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-e48tSpEz9NfUTrnIVGjA_NSe99MqeENmN3N4mBHG7IYggCLFlT2JwjK2AxEwS2cBMfO9LKA3LQohWEIp4r_Iu_ezOOkKGFsbqUYaoTxy1i5xU8WzX3GZ_z-GljMnzaaKZlQ3Otgrm4Q/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/AVvXsEi8fwPZvuxjgaYSktr1FbsHn94zhbnyeiwT9Y47-WPikrE5_w6TGIZMCEjJ2AyfK_hyBfZBRZtDDffKAUlkvH2JrxFzcfZqQEhSEtBmzKgXsh7vynH9SOwTwE2jeaJNHZFePBh1ZaY-26A/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%2Fspiceupblogging&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 spiceupblogging 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>
Comments
1 Comments

1 komentar:

 

© Copyright The Tutorial Blogger 2013 -2014 | Design by Onedra | Published by Templates | Powered by Blogger.com.

Pesan Admin :Selamat Datang Bro ≧◉◡◉≦ <div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='news'>news</a></div><div style='background-color: none transparent;'><a href='http://news.rsspump.com/' title='news'>news</a></div>