Posts
This is another cool jQuery popup for facebook like box with timer
which comes with a 4 different skins and very easy to customize.This like box
contains a facebook like button so that your readers/visitors can like your fan
page directly through this pop up also it contains a cool image which is linked
to your facebook fan page.This like box is designed by kakiheboh and they named
it as "LikeBox FB Fanpage Pro".The installation of this gadget is
extremely easy,you just have to copy and paste the code after changing the
facebook username.Now lets see how to add it to blogger blog.First see demo of
the like box by clicking on the button below
- Go to Blogger Dashboard > Edit HTML
- Download a copy of your template
- Hit Proceed button
- Now find below code in your template
</body>
add below code just above
it,
<!-- helperblogger.com Likebox Pro FBFan Code Start -->
<style>#fblikepop {
background-color: #fff;
display: none;
position: fixed;
top: 200px;
_position: absolute;
/* hack for IE 6*/
width: 450px;
border: 10px solid #6F6F6F;
z-index: 200;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
margin: 0pt;
padding: 0pt;
color: #333333;
text-align: left;
font-family: arial,sans-serif;
font-size: 13px;
}
#fblikepop body {
background: #fff none repeat scroll 0%;
line-height: 1;
margin: 0pt;
height: 100%;
}
.fbflush {
cursor: pointer;
font-size: 11px !important;
color: #FFF !important;
text-decoration: none !important;
border: 0 !important;
}
#fblikebg {
display: none;
position: fixed;
_position: absolute;
/* hack for IE 6*/
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000000;
z-index: 100;
}
#fblikepop #closeable {
float: right;
margin: 7px 15px 0 0;
}
#fblikepop h1 {
background: #6D84B4 none repeat scroll 0 0;
border-top: 1px solid #3B5998;
border-left: 1px solid #3B5998;
border-right: 1px solid #3B5998;
color: #FFFFFF !important;
font-size: 14px !important;
font-weight: normal !important;
padding: 5px !important;
margin: 0 !important;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
#fblikepop #actionHolder {
height: 30px;
overflow: hidden;
}
#fblikepop #buttonArea {
background: #F2F2F2;
border-top: 1px solid #CCCCCC;
padding: 10px;
min-height: 50px;
}
#fblikepop #buttonArea a {
color: #999999 !important;
text-decoration: none !important;
border: 0 !important;
font-size: 10px !important;
}
#fblikepop #buttonArea a:hover {
color: #333 !important;
text-decoration: none !important;
border: 0 !important;
}
#fblikepop #popupMessage {
font-size: 12px !important;
font-weight: normal !important;
line-height: 22px;
padding: 8px;
background: #fff !important;
}
#fblikepop #counter-display {
float: right;
font-size: 11px !important;
font-weight: normal !important;
margin: 5px 0 0 0;
text-align: right;
line-height: 16px;
}</style>
<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script type="text/javascript">
//<![CDATA[
kakinetworkdotcom01username="btsnts",
kakinetworkdotcom01title="Join us at Facebook!",
kakinetworkdotcom01skin="02",
kakinetworkdotcom01time="15",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="http://code.helperblogger.com/likebox-with-timer.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
<!-- helperblogger.com Likebox Pro FBFan Code End -->
- Now replace btsnts with your facebook username
- You can edit the title of the likebox popup,to change it simply edit the word "Join us at Facebook!"
- The pop up will disappear after the time which you have set,I have set the time to 15 seconds,you can change it by simply changing the value in kakinetworkdotcom01time="15"
- The widget appears immediately after a visiter eneters. If you want it to appear after one minute or more then edit wait: 0 in kakinetworkdotcom01wait="0",
- To change the skin i.e. image in pop up then simply edit the kakinetworkdotcom01skin="02" change 02 with 01,02,03 or 04. Below are some examples of skins
Skin 1
Skin 2
Skin 3
Skin 4
I hope you will like this.. thank you!
Score: Helper Blogger
