How to add unique like and tweet box for all post in blogger homepage

How to Add Like & Tweet Box On Every Single Post On Blogger Homepage
Today, this easy tutorial will guide you "How to Add Facebook Like and Twitter Tweet Buttons Box On Every Single Post On Blogger Blog Homepage?". I am sure your readers will like these buttons on your blog. Because social networking is the most powerful way for increase traffic to your blog.

Facebook Like, Twitter Tweet and Google +1 are the three main online systems for spreading your post all over the world, more likes and tweets you have more post is shared and you will get more views. Make your blog more attractive by adding these buttons with the help of simple CSS code.

How to Add Like & Tweet Box On Every Single Post On Blogger Homepage

  • Go to Blogger Dashboard > Template > Edit HTML > Proceed
  • Take Backup Of Your Template Before Make Any Changes
  • Now Click Expand Widget Templates and Press Ctrl + F and Search For ]]></b:skin> Code and Paste The Below Code Right Above It.   

     .post-homepage-share{box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;-moz-box-shadow: 0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:right;width:130px;height:65px;background: #f9f9f9;border:1px solid #ddd;margin:5px 0 0 10px;padding:5px 10px 2px 0}
  • 3. Now again make a search for <div class='post-header'> and paste the below code right below it.
<b:if cond='data:blog.pageType != &quot;item&quot;'><div class='post-homepage-share'><span style='float:right'><a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'/></span><span style='float:right;padding-right:5px'><div class='fb-like' data-font='verdana' data-layout='box_count' data-send='false' data-show-faces='false' expr:href='data:post.url'/></span></div></b:if>
  • If you already had facebook and twitter pulgin avoid this step.Place this code before </head>
 <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

Now codes are placed and you can save your template, now refresh your blog and see if like and tweet box has loaded or not, if you think that the box is getting too much up or too much low you can change the margin value in the above code in red color.

Note : Using these Like and Tweet for every single post on your blog may make your blog a little slow, as everytime a person loads your homepage additional requests for like and tweet buttons will be carried out so try using it if it fits best than enjoy :)

5 comments:

  1. facebook like is not coming

    ReplyDelete
  2. the whole widget is not working my blog please help me about it
    my blog is >> http://haseebnet.blogspot.com

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. Hello sir, you are doing a great work in helping to the new bloggers, sir your blog template is very cute, sir i also have this template. Sir i want some modification in template means i want drop down menu bar like this "http://www.mybloggertricks.com/2011/11/css3-multi-level-drop-down-menu.html" but how to add i am not understanding so kindly please can you modify my template with this menu style and recent comments box as you have used in your site.

    I will be thankful toyou :)

    ReplyDelete
  5. I want to testify on the works of
    DR EZIZA. He is a great man who
    was able to
    cast a spell that brought to me
    the woman I
    love .This man is able and
    capable to solve
    any problem of yours. He is
    specialized in
    the following:
    (1)Spell for protection from
    danger
    (2)Spell for magic
    (3)Spell for same sex love
    (4)Spell for healing
    (5)Spell for invisibility
    (6)Spell for riches and fame
    (7)Spell to get a good job
    (8)Spell for strong love and
    relationship
    (9)Spell to bring your ex back
    This man has great powers and
    is incrediblly
    generous.You can contact him on ezizaoguntemple@gmail.com or +2348058176289
    He can help you without stress try him today...

    ReplyDelete

Please don't spam. We hate spammers