How to add Twitter button to blogger

Twitter has become so popular with more than 200 million users, and about 350 million tweets per day. This trend has made most of bloggers approaching Twitter to gain more loyal readers by adding Twitter share button, and Twitter following button. Therefore, in this tutorial, I will share the tip about Twitter buttons for blogger. That is how to add a Twitter button to Blogger. You can follow some steps below:

     1.  Go to Layout / Page Elements  >>  Add a Gadget  >>  HTML/Javascripts (if you don't know how to add a gadget, you can see addind gadget to Blogger)

     2.  Copy and paste this code into the content box:

<a href='http://twitter.com/USERNAME' title='Follow me on Twitter'><img alt='Follow me on Twitter' src='your twitter icon URL' /></a>

   3.  Change the red code to your Twitter username ; and blue code to your Twitter button image.

   4.  Save


There are some Twitter button examples here, you can use them if you'd like to.

https://lh5.googleusercontent.com/_qf2_jbv7m4k/TdtSbcSMaQI/AAAAAAAAAGM/Vp43oTj-1Cg/110835_27721_128_twitter_icon.png

http://www.805county.com/wp-content/uploads/2011/01/twitter-icon.png

You have learned how to add Twitter button to Blogger, and you may also like to learn how to add floating share button to blogger if you want drive even more traffic generated by your readers. Or just simply return to Blog On Blogspot to get the latest tips.

Read more > How to add Twitter button to blogger

Add floating share buttons

1. Go to Design > Page Elements.
2. Click Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript .
4. Copy the code below and paste it inside the content box. 
 <style> #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id="pageshare" title="Get this gadget"> <div class="sbutton" id="fb"> <a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"> </script> </div> <div class="sbutton" id="rt"> <script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"> </script> </div> <div class="sbutton" id="su"> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"> </script> </div> <div class="sbutton" id="digg" style="margin-left: 3px; width: 48px;"> <script src="http://widgets.digg.com/buttons.js" type="text/javascript"> </script> <a class="DiggThisButton DiggMedium" href=""></a> </div> <div class="sbutton" id="gb"> <a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz"> <script src="http://www.google.com/buzz/api/button.js" type="text/javascript"> </script> </a></div> <div class="sbutton" id="gplusone"> <script src="https://apis.google.com/js/plusone.js" type="text/javascript"> </script> <g:plusone size="tall"></g:plusone> </div> <div style="clear: both; font-size: 9px; text-align: center;"> Get <a href="http://howtocreateagoodblog-11.blogspot.com/2011/07/add-floating-share-buttons.html">widget</a></div> </div> 
5. To add/remove any buttons, add/remove the following codes
 

<div class="sbutton"> 

....insert BUTTON CODE here.... 

</div>

Read more > Add floating share buttons