Do you like to add a good looking Subscribe section to your blog?Then simply follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>

#hsection{border:4px solid #D3D3D3;background-color:#e9e9e9;}
#hsection:hover{border:4px solid #BABABA;background-color:#e9e9e9;}

#sectionmy .sectionmy2 h2.subscription { border:0; margin:0; padding:6px 0 0 55px; height:42px; font-size:16px;font-family:"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;
font-weight:bold; }

#sectionmy .sectionmy2 h2.rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHoT0s3_EUEljjrUVgdJbubGkmBiGZFroFVQxnqN8yzGlMSSttpDAaK-AlAixe5mRMV970sc8IQqqCFfCKIG7DpeSQ5Z_WgVfaDn3ONmWBR2MZ5YO3tK3brvOtXNc9EsbGaTWVlN5Z4TJ3/) no-repeat top left; }

#sectionmy .sectionmy2 h2.email { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKgxNefXSuYECibBBYkjhbLx5wFFwS5as6VICJCH9jrcFsVahyBvJ9pHHKca_bf9GIjdn_ydwxH74P_QMpFUb54h5BGtrDbFaAF5ZjIwwFtSdk0k21nI9RYbLIwCCa8YNbfqQ89F49BbhD/) no-repeat top left; }

#sectionmy .sectionmy2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOUIZ5bZsrtXnPWuONwSrImwwY7nxKkD4G8ffXPqTNiAGwqwYw5IagNGa3lal0tAGdn6gZCk13B20G5E4tSnycXtmZt9GHF6T_3q8mI-qzX30-szz-Py3-_UVKgt9jfl87t6KwBBfU0LUl/) no-repeat top left; }

#sectionmy .sectionmy2 .subscription a { color:#252e28; text-decoration:none; }

</style>

NOTE : Host RSS.png , EmailRSS.png , twitter.png yourself.



4.Now go to Layout-->Page Element and click on "Add a gadget".

5.Select "html/java script" and add the code given below and click save.

<div id="hsection">
<div id="sectionmy">
<div class="sectionmy2">

<h2 class="subscription rss"><a href="YOUR-RSS-FEED-URL">SUBSCRIBE VIA RSS</a></h2>

<h2 class="subscription email"><a href="YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL">SUBSCRIBE VIA EMAIL</a></h2>

<h2 class="subscription twitter"><a href="YOUR-TWITTER-URL">FOLLOW ON TWITTER</a></h2>

</div></div>
</div>

NOTE : Replace YOUR-RSS-FEED-URL , YOUR-FEEDBURNER-EMAIL-SUBSCRIPTION-URL , YOUR-TWITTER-URL with your urls.

You are done.

To show your site visitors to how many people follow you on twitter use the one of below code:

1.Login to your blogger dashboard-->Layout > Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

1.Big Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=bird"></script>

2.White Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME"></script>

3.Black Twitter followers counter button:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/embed/?username=YOUR-TWITTER-USERNAME&style=black"></script>

4.Show your Twitter followers in Text:

<script type="text/javascript" language="javascript" src="http://twittercounter.com/widget/index.php?username=YOUR-TWITTER-USERNAME"></script>

This tutorial explains to you how to add Topsy Retweet Counter Buttons in below header of your every blog post.There are 2 sizes of this Topsy Retweet Counter Button.You can add any button you like.Follow the steps below to do it:



1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

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

4.Now copy below code and paste it just after the above line.

For Large Button:

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-big?nick=TWITTER-USERNAME&url=' type='text/javascript'/>
</div>

For Small Button:

<div style='padding: 4px; float: right;'>
<script src='http://button.topsy.com/widget/retweet-small?nick=TWITTER-USERNAME&url=' type='text/javascript'/>
</div>

Important : Replace TWITTER-USERNAME with your Twitter username.

5.Now save your template and you are done.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

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

4.Now add below code immediately after above code.

<script type="text/javascript"> tweetmeme_url = '<data:post.url/>'; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

It will look like this :

<div class='post-header-line-1'/> <script type="text/javascript"> tweetmeme_url = '<data:post.url/>'; </script> <script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

5.Now save your template and you are done.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see below code:

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

4.Now Copy your Retweet Counter Button code and paste it just below the above code.

NOTE: If you can't find <div class='post-header-line-1'/> in your template paste your Retweet Counter Button code just before <data:post.body/> .

CODE 1:

<div style='float:right; margin-left:10px;'>
<script src='http://www.retweet.com/static/retweets.js' type='text/javascript'/>
</div>

Result:


CODE 2:

<div style='float:right; margin-left:10px;'>
<script type="text/javascript">
size = 'small';
</script>
<script type="text/javascript" src="http://www.retweet.com/static/retweets.js"></script>
</div>

Result:


You are done.

This post explains how to add a Twitter Follower Counter/chicklet widget to your Blogger and Wordpress blogs.. like the feedburner counter

Similar to Feedburner Counter which counts your RSS Subscribers, Twitter Counter counts your Twitter Followers.

Default button :



Code :

<code>
<script 0);="" 0,="" color:="" language="javascript" rgb(255,="" src="http://twittercounter.com/embed/?username=%3Cspan%20style=" type="text/javascript">
username</span>">
</script></code>

Write your twitter account(username) in place of username

There are total of 4 colors to choose from.. You can find them here.

To add in Blogger :
Sign into Blogger » Layout » Add a gadget » html/javascript
paste the code and save it.

To add in Wordpress :
Sign into Wordpress > Widgets > Text
paste the code and save it.

Related:
Adding Twitter Bird image to your Blog

Looking for Twitter bird logo ? Twitter bird icons ? Twitter bird in vector, eps or psd or png format..? then, here is a treat for you.. Adding a cool Twitter graphic to your website/blog can encourage your site visitors to follow you on twitter.
Here is my collection of excellent Twitter bird vector logos,Twitter icon sets,etc. All these are 100% Free to download.

Cute Twitter Bird Vector Art - by Smashing Magazine

Format : Vector (.eps), photoshop (.psd)

Twitter Bird Follow me Button : by IconTexto

Format : png

Tweet Tweet Vector Icon set : by Productive Dreams

Format: Vector (psd) , png

Free Twitter Bird Icon : by TheDesignSuperHero

Format : png

Twitter Bird Icon set : by Productive Dreams

Format : png

Free Twitter Birds : by Luc Latulippe

Format : vector (eps)

Twitter Social Bookmarking Icon : by IconTexto

Format : Icon (.ico)

Free Vector Twitter Icons : by 404Creative

Format : Vector Illustrations (eps)

Free Twitter Buttons : by Randa Clay

Format : png

Tweeties : by Chris Wallace

Format : Vector Illustrations (eps) and png

Happy Twitter Birds : by Adams

Format : Photoshop (psd) , png

Twitter Follow me Icon : by antonist ~ deviantart

Format : Jpg file

High Resolution Twitter Graphics : by TheDesignerSuperHero

Format : Vector Graphic (psd) , png

TwitterBird : by Lisa

Format : jpg

Cool Twitter Bird : by chibbell
Lol.. I really like this one

Format : jpg


Know any good Twitter Bird design ? Share with us..