How to add a Tweetthis button to your blogger template

Twitter has grown very popular these days and every one is looking out for to add a retweet button to their blog and track their retweeted posts on twitter within their blog posts. Adding a Tweetthis button to your blogger posts template is as simple as adding the social bookmarking button.

Caution: Don't forget to take the backup of your blogger template before making any changes to it. Sometimes changes all changes doesn't work fine for every blogger template.

Login into your blogger account and Navigate to the "Layout" section. Under that choose the "Edit HTML Page" option and check the Expand widgets option
Now look for this code

<div class='post-header-line-1'/>

Imp Note: Dont forget to check the Expand widgets option or else you cant find the code

Note: This code will help you in placing the widgets to the top left side of the blogger posts.

Now copy and paste this code immediately below the above code
Code 1:
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

The above code will give you a bigger "tweetthis" button

Now for a smaller "tweetthis" button you can use this code
Code 2:
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

If you want to place the widget to the top right side, then you need to modify the codes above like this for smaller and bigger buttons:
CODE 1:
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<div style="text-align: right;">
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>
</div>

CODE 2:
<script type="text/javascript">
tweetmeme_style = 'compact';
tweetmeme_url = '<data:post.url/>';
</script>
<div style="text-align: right;">
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>


The above codes doesn't make my blog look much better for me and i am feeling a bit unhappy. Now this is the code which i used in my blog for a better "tweetthis" button. This code will give us "tweetthis" button which comes as embedded in the posts compared to the earlier above buttons which doesn't come like that and comes above the posts.

Now Look for this code in your blogger

<div class='post-header-line-1'/>

underneath that you need to place this following code

<!-- Tweetmeme button code starts -->
<span style='float: right; margin: 0 0 5px 5px;'><script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script></span>

<!-- Tweetmeme button code ends -->

Now for those who are interested in adding the "tweetthis" button below left side of the post you can use this code.

Check for this code first in your blog
<data:post.body/>

Now underneath that code you need to add this following code

<span style="float: right; margin: 0 0 5px 5px;"><script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script></span>

Add Post To: |Digg| Twitthis| Technorati| del.icio.us| Stumbleupon| Sphinn| Reddit| BlinkList| Furl| Spurl| Yahoo| Simpy|