This is other cool jQuery popup for facebook like box with official which comes with a 4 unlike skins and really smooth to produce.This equal box contains a facebook like fix so that your readers/visitors can similar your fan attendant directly finished this pop up also it contains a modify mortal which is linked to your facebook fan author.This like box is organized by kakiheboh and they titled it as "LikeBox FB Fanpage Pro".The installation of this gadget is extremely rich,you rightful eff to make and adhesive the encipher after dynamical the facebook username.Now lets see how to add it to blogger journal.Forward see demo of the same box by clicking on the add below
add below code just above it,
Add Facebook Like Box Popup With Timer To Blogger?
- 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,
<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="tipsandtricx",
kakinetworkdotcom01title="Join us at Facebook!",
kakinetworkdotcom01skin="02",
kakinetworkdotcom01time="15",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/81212926/bloggerheroefacebookpopup.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
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="tipsandtricx",
kakinetworkdotcom01title="Join us at Facebook!",
kakinetworkdotcom01skin="02",
kakinetworkdotcom01time="15",
kakinetworkdotcom01wait="0",
kakinetworkdotcom01lang="en"
//]]>
</script>
<script type="text/javascript" src="http://dl.dropbox.com/u/81212926/bloggerheroefacebookpopup.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){$().kakinetworkdotcom({ closeable: true });});
//]]>
</script>
- Now replace tipsandtricx 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
- right click on image and get image url and change it with default.
Skin 01
Skin 02
Skin 03
Skin 04
I hope all of you will surely like this popup.And I am that this will surely increase your number of fans on facebook.Peace and blessings buddies :)
Hello There!Happy for reading the article and don't forget share this article on your social network.Thanks You ^_^