Add Facebook Style jQuery Popup Facebook Like Box In Blogger

I had give the name facebook style because its looks same with facebook popup. Now let's start the tutorial

Facebook Style jQuery Popup Facebook Like Box Demo

LIVE DEMO

How to Add facebook style jQuery Popup Facebook Like Box in Blogger

• Go to Blogger Dashboard 
• Click on DropDown Menu and select Template
• Backup your Template before making any changes to your blog
• Now Click on Edit HTML --> Proceed --> Expand Widget Templates
• Press Ctrl + F and search the code shown below

</head>

• Now Paste the following code Before/above </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

• Now Press Ctrl + F and search the code shown below

]]></b:skin>

• Now Paste the following code Before/above ]]></b:skin>

#latesthackpopup{
position:absolute;
top:100px;
z-index:999;
display:none;
padding:0px;
right:600px;
border:10px solid #6F6F6F;
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#latesthackpopup h1{
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwk9ScsdhulM5ARY7-ZeEqY-Da0BgQKxmEa0Ju5MpEyqWlaLofMQNO-BJPP9JP7PUn58Uwpw1IVFN5rrk_6OVq-uJTckvkNC8NAhxMKM_kAhByA4RqpOeDzHYF3dDGV5Ca7d-Lb50B_EY/s1600/latesthack.png) 98% no-repeat;
border:1px solid #3b5998;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:normal !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif;
overflow:hidden;
}
#htmlground{
font-size:12px !important;
font-weight:normal !important;
height:260px;
padding:1px;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden;
}
#latesthackfooter{
background:#F2F2F2;
height:56px;
padding:10px 10px 10px 10px;
overflow:hidden;
}
#latesthackpopup a{
background-color:#eee;
border:1px solid #ccc;
color:#111;
font-weight:normal;
padding:5px 8px 5px 8px;
text-decoration:none;
display:inline-block;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif;
outline:none;
position:relative;
font-size:18px;
margin:1px;
}
#latesthackpopup a:active{
top:1px;
left:1px;
}

• Now save your template
• Now Go to Layout and select HTML/Javascript and add the code shown below

<script src='http://js.howtouses.com/blogger/faceboooook.js' type='text/javascript'></script><div id='latesthackpopup'><h1>Join us on facebook</h1><div id='htmlground'><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Flatesthacking&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe><div align='right'>mybloggertools.org</div align='right'></div class='htmlground'><div id='latesthackfooter'><div align='right'><a href="#"  id="latesthackclose" onclick="return false;">Close</a></div align='right'></div id='footer'></div class='latesthackpopup'>

Replace latesthacking with your facebook username

Like it? Share it.