Friday, January 2, 2015

How to add Facebook like box on blogger

Facebook is one of the best ways to get traffic to your website or blog.
And make your visitors to find you easily on Facebook ...
So In this tutorial i will show you how to add  Facebook like Box for Blogger ..

It will look like That :




1/ Open your blog

2/ In your blog Dashboard go to Layout

3/ Choose the place where you want to add you like box and click Add a Gadget

4/ Choose HTML/JavaScript

5/ Enter a title for example (Follow us on facebook )

6/ Paste this code ..

<!-- http://net-explain.blogspot.com/ facebook like box-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-330"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.gplusbox{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2cpUh3gEoIzU8bgqLQvFhAwCilxzlaBLqrBUN-PrAsE4yOYYTuE_hZbW26cmAUJ8XjJyR0MF3G8hPi1P3EGJX1wKN4mwdSj_9ntfVAepnlBDtEEC0rnBTv8361MqaGk6vjueijWG6ErQ/s1600/G++theblogservices.png") no-repeat scroll left center transparent !important;
display: block;
float: right;
height: 275px;
padding: 0 0px 0 46px;
width: 325px;
z-index: 99999;
position:fixed;
right:-330px;
top:20%;
}
.gplusbox div{
padding: 8px;
background: white;
border: 2px solid #D64937;
border-radius: 15px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
</style>
<div class="gplusbox">
<div>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/115935237586164014917/posts?hl=ar
" data-source="blogger:blog:followers" data-width="320">
</div>
<script type="text/javascript">

      (function() {
        window.___gcfg = {'lang': 'en'};
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
<a href="http://www.theblogservices.net/" target="_blank" title="The Blog Services"><img src="http://bit.ly/theblogservices" alt="The Blog Services" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a>
</div>
</div>
<!-- http://net-explain.blogspot.com/ facebook like box-->

DONE ...


Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Posts RSSComments RSSBack to top
© 2015 Net Explain ∙ Designed by BlogThietKe
Released under Creative Commons 3.0 CC BY-NC 3.0