Add Twitter Counter And Share This Buttons To The Top Of Blog Posts

The 'Tweet This' or 'ReTweet' Twitter counter button is the latest 'Must Have' feature on all Blogs.Only a year ago it was the 'Digg This' button that was displayed but they have almost all been replaced.Adding the Twitter Tweet This button to your blog is easy and in this post we will look at how to add it to the top of your blogger posts and the bottom of your blogger posts.

The button can be set to float on the left or right of your posts this allows it to be 'wrapped in text' and fit in nicely as you currently see on this blog.I have the button at the top and bottom of the posts just to make it easy for the readers.

You will notice i also have the 'Share This' button Placed above the Twitter button and i will show you how to add both the Twitter and Share This buttons or just the Twitter button.

The Share This Button opens up a selection of bookmarking options when you place your cursor over it.

Here's the steps to add the buttons



Step 1. In your dashboard click 'Layout' > 'Edit Html' 

Step 2. Find the following code in your blogs html : (Click Ctrl and F for a search bar to find the code):

<data:post.body/>

Step 3. Select Your Button

Pick The Button You Want Added from the options Below then copy the code.

Twitter Only Button Code :

<a href='http://www.createtheblogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png'/></a><div style='float:left; margin-right:10px;'>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

Twitter and Share This Code :

<a href='http://www.createtheblogger.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAH6CBD-AUjFNI-vLZwNgx-R5oKymOEbxMpRKUDY_tGPIrjCQB_Y-NuBAIq44oWLLOhs0GqbQlrMI1QBj64vvS8fxl5Uj85_hYSYszmiDx3fKku6yvgZNrOTluqeT5VAq6YH7BjhwbZ6sV/s1600/best+blogger+tips.png'/></a><div style='float:left; margin-right:10px;'>
<script src='http://w.sharethis.com/button/sharethis.js#publisher=bea50586-2b9f-448d-947a-01385f28e305&amp;type=website&amp;post_services=facebook%2Ctwitter%2Cdigg%2Cdelicious%2Cstumbleupon%2Cemail%2Cgoogle_bmarks%2Cmyspace%2Creddit%2Ctechnorati%2Cybuzz%2Clinkedin%2Cwindows_live%2Csms%2Cbebo%2Cblogger%2Cyahoo_bmarks%2Cmixx%2Cfriendfeed%2Cpropeller%2Cwordpress%2Cnewsvine%2Cxanga%2Ctypepad' type='text/javascript'/>
<br/><br/>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</div>

Step 4. Were To Place The Buttons

• To place the button/buttons at the top of your posts paste the code Above :

<data:post.body/>

• To place the button/buttons at the bottom of your posts paste the code Below:

<data:post.body/>

Note - You can also Paste the code above and below And have the button/buttons at the top and bottom of your blogger posts.

Step 5. Once you have the code added click save.


Move the Button/Buttons from the left to the right



The buttons above are set to be on the left of your posts but you can move them to the right.

In the code for your Button/Buttons change the first line of code like this :

From :

<div style='float:left; margin-right:10px;'>

To :

<div style='float:right; margin-left:10px;'>

Thats your Twitter and Share This buttons added !

You can use different buttons from Twitter like the compact Twitter button, you can find that button and other Twitter gadgets and widgets on the Twitter Goodies Page.

As always help is only a comment away, Have you added the buttons ?