Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Loading...

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

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&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;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>
<!-- End popup -->

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.

https://www.facebook.com/groups/imtiazblogtrick

2013, By: Seo Master

seo How To Add Floating Facebook Like Box Widget For Blogger 2013

Seo Master present to you:
How To Add Floating Facebook Like Box Widget For Blogger
This Tutorial Related Social Media Shearing Widgets For FaceBook like Box Floating.Add facebook like box to blogger, how do I make it?. Do you know facebook and twitter now becomes biggest social media and many people in the world use it.its A Best Source For increase Your Blogger And Blog Site  traffic Increase.So i Hope you Will Enjoy this.Amazing Css Style .






Join Me On Facebook


Add Floating Facebook Like Box


1. Go to Blogger > Layout > Add a gadget
2. And select HTML/JavaScript
3. Add this code into it



<style>
#thiswidget {
   height: 20px;
   width: 56px;
   border-radius: 0 0 5px 5px;
   float: left;
   padding: 0 0 0 12px;
   background-color: #D0D0D0;
}
#boxshare {
   display: scroll;
   position:fixed;
   bottom:40%;
   left:2%;
   width: 68px;
   background-color:#FFFFFF;
   border: 1px solid #A3A3A3;
   border-radius:5px;
   padding:0 0 2px 0;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   z-index:10;
}
#boxshare .boxbutton {
   float:left;
   clear:both;
   margin:5px;
}
.fb_share_count_top {
   width:68px !important;
}
.fb_share_count_top, .fb_share_count_inner {
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
}
.FBConnectButton_Small .FBConnectButton_Text {
   padding:2px 2px 3px !important;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
   font-size:8px;
}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {
   width:68px !important;
   -moz-border-radius:3px;
   -webkit-border-radius:3px;
}
</style>
<div id='boxshare' title="Share This">
<div class='boxbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='boxbutton' id="fb-root"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send layout="box_count" show_faces="false" font=""></fb:send></div>
<div class='boxbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="imtiazblogtrick">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div>
<div class='boxbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='boxbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align: center;">
</div>
<a href='http://www.matrixar.com/2013/03/how-to-add-floating-facebook-like-box.html' id='thiswidget'>widget</a>
</div>



Now Replace highlight with your user name of the twitter without @
4. Finally click Save it.

You can make facebook like box on right & Left your page with replace Aqua highlight from left to right. And you can adjust the distance replace 40% with the distance you want.



2013, By: Seo Master

seo Popup Facebook like Box New Style For Blogger/Blog 2013

Seo Master present to you:

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

This Tutorial All About How we Will Add Popup Facebook like Box New Style For Blogger/Blog.i will try to more easy for you.this is a most popular method for online promotion blog and website.
Popup Facebook like Box New Style For Blogger/Blog
http://imtiazbloggertrick.blogspot.com/2013/06/popup-facebook-like-box-new-style-for.html2013, By: Seo Master
Powered by Blogger.
Design by Dev Nasser