Monday, February 8, 2010

How To Add The Twitter Counter And Share This Bookmark 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.You can test both buttons above.

Here Is A Preview Of The Buttons :



twitter and share button for blogger


Here's the steps to add the buttons

1. Get To Your Blogs Html

Click 'Layout' ► 'Edit Html' ► Tick The 'Expand Widget Templates' Box


Blogger layout

edit html blogger

Expand widget templates blogger



2. Find The Area For The Button

In your blogs Html find the following code:
(Click 'Ctrl and F' for a search bar to help find the code - For more help on this click 'Extra Help' link at the top of the post)
<data:post.body/>


3. Select Your Button

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

Twitter Only Button Code :

<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 :

<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>
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/>

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

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 !

InfoRemember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post.
If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow - when you comment here it helps Your Blogs Google rank !

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 ?

Did You Like This Post ? Click Like Below To Let Us And Your Friends Know - Thanks !





Jump To Comments

Subscribe To The Rss Feed Or Recieve The Latest Posts By Email

Get The Latest Full Posts By Email - It's Free
Write About Or Link To This Post On Your Blog - Easy Links :
Link Directly To This Post :

Link To The Homepage :
Hey ! People That Read This Post Also Loved These Posts
Still Looking For Something ?
Search This Blog
Custom Search
Important Must Read Before Posting A Comment

In order to keep our comments Do-Follow we have some guidelines you need to follow.
Do not put links in the body of your comment as it will automatically be blocked !
Asking a question ? Make sure to tick the subscribe to comments by email box to be alerted of the reply.
blog comments powered by Disqus
 

Some Money Makers For Your Blog

1. Info Barrel Paid To Write, if you can write a blog you can write for I.B.

1. Xomba Paid To Write, Another great paid to write articles website

3. Chitika Ads For Your Blog, work well alongside AdSense

Thanks For Calling

free counters

Five From The Archive

Who Writes This Stuff ?

Hi Im Paul Crowe,

The Author Of Spice Up Your Blog To Get More Info About Me View My Full About Me Page.

Drop Down Archive

Admin Links