VALEEDANJUM

Ad 468 X 60

Wednesday, 13 February 2013

Widgets

How To Add POP UP Facebook Like Box For Blog & Website

Posted by Unknown , 00:57 Be the first to comment!

New Facebook Pop Up Like Box for Blogger


This widget pops up a jQuery window containing Facebook likebox as soon as a new visitor arrives.That was a magic of jQuery, however, that didn't work in some third party blogger templates. Therefore, today I'm going to share a very simple and more attractive pop like box which will be only used if you want to increase your Facebook likes rapidly.It will appear both on homepage and sub pages depending which page the visitor is accessing. I have set the cookie refresh time to 30 days, which means that this lightbox will appear again for the same visitor after 30 days. We can easily set the number of days to prompt the visitors about your Facebook Fan page. Lets get straight to the one step installation process.

Step 1: Go To Blogger >> Layout >> Click "Add A Gadget"("HTML-JAVASCRIPT")

And Paste below code inside that HTML/JavaScript gadget


<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/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-8l-QpDD_Mkg1aRcsOg-XLc373fuBx37hblRNVpR_ynKIJoxR0julnlGvc0wAlDR_AiOFJ676WF5VV8taWcZg6Jlr8W4lbrj4Vo1HXShn1Fc-Czb8DwRCXZo_c2HKWtzGFMWJAaOZ4Y/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-8l-QpDD_Mkg1aRcsOg-XLc373fuBx37hblRNVpR_ynKIJoxR0julnlGvc0wAlDR_AiOFJ676WF5VV8taWcZg6Jlr8W4lbrj4Vo1HXShn1Fc-Czb8DwRCXZo_c2HKWtzGFMWJAaOZ4Y/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/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/AVvXsEi3ULqFK8dkXdXz_7fSuS3fRX2DToN-g4sqn9R8LNKakM53iwlB7DoKGdZNQOH-OPBNy6DEwW1KKnE4RzGVF1K5vuqQxilbVfftjOXmOq-vCY14xMCNgJXjljpIARYHM8jFmGUqYylE234/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiX4qyX901UXf0p2gs76RHaa03UarGxl2KAQnevaq60JTBKhxBho7KoB1gRkvGESR8TLaN1cntJIFSAecyE4hCJSueaZIHkNDrzhGnPExf83y2vPYjn2aw4a1Q3kdNGkg3QVhf2V81gEc/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/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/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%2FAllinone789&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>
</div></div>

And finally the red color text "Allinone789" is the user name of my facebook page

How To Add In Website?


Step 1: Just Go To Your HTML File.

Step 2: Now Copy The Below Code And Paste It Between <body> </body>.


<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/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-8l-QpDD_Mkg1aRcsOg-XLc373fuBx37hblRNVpR_ynKIJoxR0julnlGvc0wAlDR_AiOFJ676WF5VV8taWcZg6Jlr8W4lbrj4Vo1HXShn1Fc-Czb8DwRCXZo_c2HKWtzGFMWJAaOZ4Y/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-8l-QpDD_Mkg1aRcsOg-XLc373fuBx37hblRNVpR_ynKIJoxR0julnlGvc0wAlDR_AiOFJ676WF5VV8taWcZg6Jlr8W4lbrj4Vo1HXShn1Fc-Czb8DwRCXZo_c2HKWtzGFMWJAaOZ4Y/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/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/AVvXsEi3ULqFK8dkXdXz_7fSuS3fRX2DToN-g4sqn9R8LNKakM53iwlB7DoKGdZNQOH-OPBNy6DEwW1KKnE4RzGVF1K5vuqQxilbVfftjOXmOq-vCY14xMCNgJXjljpIARYHM8jFmGUqYylE234/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiX4qyX901UXf0p2gs76RHaa03UarGxl2KAQnevaq60JTBKhxBho7KoB1gRkvGESR8TLaN1cntJIFSAecyE4hCJSueaZIHkNDrzhGnPExf83y2vPYjn2aw4a1Q3kdNGkg3QVhf2V81gEc/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/AVvXsEgw_gbkEiwKoLrH16ygiei5bxTyGWqRWDbP2FxyYeqrIqXw75WEy8Rxv7NJtzu9OzstMnq_cbp3wtGUDv6fibR-aXPsS1jj9RcW3qGVti68_-cdqJ-zDPkB-wUYZ5Ym07EItw_iQfRzFf4/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%2FAllinone789&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;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.exeideas.com">EXEIdeas</a></p>
</div></div>


Setp 3: Save It, Now You Are Done.











SHARE THIS POST   

  • Facebook
  • Twitter
  • Myspace
  • Google Buzz
  • Reddit
  • Stumnleupon
  • Delicious
  • Digg
  • Technorati
Labels:

0 comments:

Subscribe to: Post Comments (Atom)