Twitter Tweet Button for Blogger

Twitter is one of the most popular social networking site, From this social site you can get more traffics on your websites or blog. Here i am going to discuss three type of twitter tweets buttons in different-different styles. Horizontal button with counter, vertical button with counter and normal button, all these buttons are you can use at the end of your post for more traffics.

How to add this widgets

Here three types of twitter tweet button choose any one of them and add just after below code. To find this code just copy given code and follow these steps.
Login on Blogger
Go Dashboard >> Template >> Edit Html >> Press Clt + F.
and search below code.

<data:post.body/>

Vertical count

<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='vertical' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='sites18' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>

Horizontal counter

<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='horizontal' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='sites18' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>

Normal button

<b:if cond='data:blog.pageType != "static_page"'>
<div style='text-align:left;padding:5px 5px 5px 0;'>
<a class='twitter-share-button' data-count='none' expr:data-text='data:post.title' expr:data-url='data:post.url' data-via='sites18' data-related='' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
</div>
</b:if>

Settings

Replace My twitter name sites18 with your own Twitter name

This button is aligned to left of page if you want to align it to right or middle then replace text-align:left; with text-align:right; and text-align:center; respectively.

This button will visible on below of post if you want to add it before the post then add code just above of <data:post.body/>

Finally save your template and you are done.