seo How To Add New POP UP Facebook Like Box For Blogger/Website 2013

on Thursday, April 04, 2013 | 0 Comment

Seo Master present to you:

How To Add POP UP Facebook Like Box For Blogger/Website

This Tutorial About How Add Facebook like Box In Blogspot Blogger And Wordpress Website.Its Simple And Easy,When You put it On The Blogger And Website Time Will be Shown Highlight And 10,20,30 Seond, You Can Adjust Time,But 10 And 20 Second is best ,mostly audience Dont like popup Because When You put It permanently Its Bad,But This Code is Best Because its Only Show limited Time.its a best method of increse your website traffic and rank.you get directly visters you blog and website.mostly increase use for social meadi and shearingso back and do this how? blogger and website use it,i Hope you Are understand And ready To Do This,Now We Learn How Do This in Website And Blogger.

How To Install This Widget To Blogspot Blogger?

Go To Blogger >> Template >> HTML >> Find This </head> And After past The Below Given Code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

How To Add In Blogspot?

1.) Go To Your >> www.blogger.com
2.) Open Your Blog Where You Want to Add This Box.
3.) Go To >> Dashboard >> Layout.
4.) Click "Add a Gadget" .
5.) Now Scroll To "HTML-JAVASCRIPT".
6.) Click "HTML-JAVASCRIPT" Icon To Add It.
7.) Now Copy The Below Code And Paste It To Empty Box.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done It.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done It.

Copy This Code Add To Blogger And Website.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<style type='text/css'>
#tipsntrack{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-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;
}
#tipsntrack span{
font-size:20px !important;
font-weight:bold !important;
}
#tipsntrack h1{
background:#6d84b4 url(https://lh4.googleusercontent.com/-TRM1hCHTuTQ/UQz37evmq-I/AAAAAAAABMA/3AQjHzFv_CM/h120/look.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function tipsntrack_ppopup() {
var sec = 10
var timer = setInterval(function() {
$("#mdfooter span").text(sec--);
if (sec == 0) {
$("#tipsntrack").fadeOut("slow");
clearInterval(timer);
}
},1000);
var mdwh = jQuery(window).height();
var mdpph = jQuery("#tipsntrack").height();
var mdfromTop = jQuery(window).scrollTop()+50;
jQuery("#tipsntrack").css({"top":mdfromTop});}
jQuery(window).fadeIn(tipsntrack_ppopup).resize(tipsntrack_ppopup)
//alert(jQuery.cookie('sreqshown'));
//var mdww = jQuery(window).width();
//var mdppw = jQuery("#tipsntrack").width();
//var mdleftm = (mdww-mdppw)/2;
var mdleftm = 500;
//var mdwh = jQuery(window).height();
//var mdpph = jQuery("#tipsntrack").height();
//var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
jQuery("#tipsntrack").animate({opacity: "1", left: "0" , left: mdleftm}, 0).show();
jQuery("#mdclose").click(function() {
jQuery("#tipsntrack").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="tipsntrack">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fimtiazbloggertrick&width=400&colorscheme=light&show_faces=true&border_color=%23fff&stream=false&header=false&height=251" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:251px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://www.matrixar.com/" target="_blank">Tips N Track</a> / <a href="http://www.matrixar.com/2013/04/how-to-add-new-pop-up-facebook-like-box.html" target="_blank">+Get This!</a>
</div>
</div>
<div id="mdfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>

How To Customize This code.

Only Change Highlight Code Other Wise It's not Working Your Blogger And Website.
Ist Chane Imtiazbloggertrick Ans 2nd Changing is Second 10 ,You Can Put 10 to 30 Second Here.

I hope you Like This post.Feedback, Will be in comments.