Saturday, February 11, 2012

TAGGED UNDER: , , ,

One Time Facebook Pop Up Like Box For Blogger

Last September i published a post showing How to add a one time Email Rss subscription pop up on Blogger.Since then i have had a number of requests for a similar gadget but with a Facebook page like box instead of the Email form.So in this post we have just that.When a visitor lands on your blog a pop up box will appear with the option to like your Facebook page.The gadget will only appear on the first visit so your readers or you wont have to see it every time.

For this i have used the gadget from the great MyBloggerTricksmaking just a few small changes.Check out the demo and screenshot below.

View Demo Button 

Remember Always Back Up Your Template Before You Make Changes - How To Back Up A Blogger Template 

Step 1. In Your Blogger Dashboard Click Design > Add a gadget > Choose html/javascript.







Step 2. Copy and Paste the following code into the Html/Javascript gadget, there is a lot of code make sure to get it all :

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#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;}
/*


User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#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/AVvXsEhcaDyrnlXSBIxp3REZbEk2uxm2_4MWecL42LaYCBG4yLwVoasO_fbMU0nILI6GpnaRtLlk99GHIAjusQu4ylzeWodPuTllp_sxO55GrwsaQK6eBF1Gl7vxzzqr7o9qKKpgZBl_4n5n57h4/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulSZlrJe1NHhGwB_zgSlZ3bhLI__IkS49HqNscimdM9z3bKmUOyA87adBAEH7OP_Lfuq5Yjh8lZKQzLOYl64xooN1fSkrjM_E8dI2PU5-KqJTYFrdCz-8caJlE3Vi2poINUYuPCqgp_-J/s1600/border.png) repeat-x top left;}
#cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcaDyrnlXSBIxp3REZbEk2uxm2_4MWecL42LaYCBG4yLwVoasO_fbMU0nILI6GpnaRtLlk99GHIAjusQu4ylzeWodPuTllp_sxO55GrwsaQK6eBF1Gl7vxzzqr7o9qKKpgZBl_4n5n57h4/s1600/controls.png) no-repeat -36px 0;}
#cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcaDyrnlXSBIxp3REZbEk2uxm2_4MWecL42LaYCBG4yLwVoasO_fbMU0nILI6GpnaRtLlk99GHIAjusQu4ylzeWodPuTllp_sxO55GrwsaQK6eBF1Gl7vxzzqr7o9qKKpgZBl_4n5n57h4/s1600/controls.png) no-repeat 0 -32px;}
#cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgulSZlrJe1NHhGwB_zgSlZ3bhLI__IkS49HqNscimdM9z3bKmUOyA87adBAEH7OP_Lfuq5Yjh8lZKQzLOYl64xooN1fSkrjM_E8dI2PU5-KqJTYFrdCz-8caJlE3Vi2poINUYuPCqgp_-J/s1600/border.png) repeat-x bottom left;}
#cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcaDyrnlXSBIxp3REZbEk2uxm2_4MWecL42LaYCBG4yLwVoasO_fbMU0nILI6GpnaRtLlk99GHIAjusQu4ylzeWodPuTllp_sxO55GrwsaQK6eBF1Gl7vxzzqr7o9qKKpgZBl_4n5n57h4/s1600/controls.png) no-repeat -36px -32px;}
#cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcaDyrnlXSBIxp3REZbEk2uxm2_4MWecL42LaYCBG4yLwVoasO_fbMU0nILI6GpnaRtLlk99GHIAjusQu4ylzeWodPuTllp_sxO55GrwsaQK6eBF1Gl7vxzzqr7o9qKKpgZBl_4n5n57h4/s1600/controls.png) repeat-y -175px 0;}
#cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcaDyrnlXSBIxp3REZbEk2uxm2_4MWecL42LaYCBG4yLwVoasO_fbMU0nILI6GpnaRtLlk99GHIAjusQu4ylzeWodPuTllp_sxO55GrwsaQK6eBF1Gl7vxzzqr7o9qKKpgZBl_4n5n57h4/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/AVvXsEiMVSoS_ZsHfKfB0VZwCV-Km1b8IoSZwdHIbDqSIlBzBpJz6-swD8ZPu9rbPS74WWXr7LGMg3s3fRbYUwbcKYe6JFjaD9rhEfmYbKPF4Rb0PGL3WqN_4DlWmUzmrdgV6i0NUbQLJP6FebPE/s1600/loading-background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYri5NqLkuind6gpCQFx4Zt6FCCS8wVfuyQKrqnowCQoT8R-5TlvNuhvlkvlTICee9WDpOj8vxtkfpGsJQPP4IHu21TVFmAQPp7UkG7GdZNLIzdE78WS8f62199EXFJF_VyNGx4UoaINaY/s1600/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/AVvXsEhcaDyrnlXSBIxp3REZbEk2uxm2_4MWecL42LaYCBG4yLwVoasO_fbMU0nILI6GpnaRtLlk99GHIAjusQu4ylzeWodPuTllp_sxO55GrwsaQK6eBF1Gl7vxzzqr7o9qKKpgZBl_4n5n57h4/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;}
/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
.box-title {
color: #3B5998;
font-size: 20px !important;
font-weight: bold;
margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://yourjavascript.com/11215013191/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:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fspiceupyourblog&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.spiceupyourblog.com">Blog Gadgets</a> Via <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>

Important - You have two ways to make it work for your blog, firstly Change spiceupyourblog highlighted in yellow with your facebook username.Find more information on creating a professional Facebook page and username here.Or if your page does not have a simple username you can create your like box here and replace the code in bold above with the code you get.

That's it a cool Facebook pop up widget that will surly increase your facebook fan count.Thanks again to MBT for the original gadget.Make sure to check out more of ourFacebook Tips And Gadgets.

Drop Your Comments And Questions Below. 


Source: http://www.spiceupyourblog.com

About the Author

Have a good day/night!

0 comments:

Please no spam! Remove comment!

WARNING !

This site does not host any media file or any other file which might be under the influence of copyright. The links on this site lead to other sites! Not responsible for accessing and downloading files from links that lead them! Accessing links on this site, and downloading files from these leading assume your responsibility !!!

Labels

Info Download Video Oameni Jocuri Amuzament Romania Muzica Torrent FileList.ro Hip-Hop Stiri LG YouTube Bani Imagini Bacau Hack Software 2014 Auto PC Fotbal 2012 AI DE PLM Rapperi Filme Made in Romania FOR LIFE Arta Internet Cocalari Telefoane Muzica Adevarata Trailer Windows Blogger Tehnologie Artisti Copiii Online Servicii Online Fashion Facebook NU in Romania America 2013 Muzica de kkT TV Vedete Culinar Picture of the Day Animale Poza Zilei RObotzi Pitzipoance Sport Bani Pe Net Loto 6/49 Monden Slots Games Pack Sezonul 4 Sezonul 1 Sezonul 2 2015 Filme XXX JapKa Politia Seriale Online Stiinta Tutorial Underground HH Evenimente EA Sports Europa Evenimente Bacău Negative Religia Album Android Bancuri Civilizatii Gangsta-Rap Istoria Planete Subtitrari Droguri Naturist Promovare HH Concert Google Masoneria Natura Scoala Sezonul 3 Apple Microsoft Politica Samsung Adolescenta Counter-Strike 1.6 Fructe Pronosticuri Romani au Talent Sex Sexy Toshiba Pariu cu Viata Tatuaje Templates China Update Anglia Manele Subway Pub Cultura FIFA 07 Online Inventie Made in China Realitatea Rock Serials Elevi Rusia Satana Simulator System Requirements Warcraft III: The Frozen Throne 2017 3D Audio Club Zebra Documentar DozaDeHas Franta Gadget HTML Italia Medicamente Mobile Poker Racing Rapper Cocalar Reclama Afaceri EA Mobile Interviu Motociclete SKIDROW Sistem de operare Tigari WWE .dll 2016 Alcool Asus BeatBox Bulgaria Cartea Recordurilor Cool Driver England Las Fierbinti Mac OS Maps Warcraft Mircea Badea The Stage Valentine’s Day AdSense Antarctica Avioane Balul Bobocilor Box Casa de Cultură Bacău Crack FIFA Farse FreeStyle Gameloft Gepex Park Germania PSP Rasta Razboi Statusuri Terorism Trafic de Acte Twerk Team Twitter Versuri Videochat WebDesign Zodii eMachines 2018 ACTA Anonymous Basket Bauturi Bere Biletul Zilei Camera ascunsa Club Kremlin Crestin-Ortodox Dancing Fonturi Glu Google+ Handbal Linux MPC Micron Rezumat Setari
Subscribe on : YouTube

Statistics

Blog Archives

Copyright ©

Copyright ©
Proudly Powered by JK07.