New Share Button With Counters On Blogger

Save on del.icio.us Add to Technorati Digg this article! Add it on Reddit! 10 Comments

I'm sure you would have noticed the recent addition of share counters at the end of the article on my post pages. My friend, Paul Crowe from "Spice Up Your Blog", had posted a video tutorial about the same which you may check out on his blog. So, if you wish to have this new share counter on your blog, then just follow the steps in the tutorial given below.

What non-sense is he talking about? Is that the question that's running on your mind? Well, then have a look at the following picture to get a better idea about what I'm talking.

Before we start the actual tutorial, let's first get the scripts which make the share counters appear. Go the following link : Sharethis. Register with them and hit the "Publishers>>Get the Share Widget" tab. Select the following options on the page that appears.

1. Website or Blog? Choose website.

2. Pick your style - Third Option (Horizontal counters)

3. From the various networking sites, choose the ones which you want to have on your blog. Just use the left and right arrows to add and remove the various counters. The up and down arrows aligns your counters - which one should appear first in your list. It's pretty self-explanatory.

4. Choose the Oauth widget or Classic Widget.

5. Now, hit the "Get the button" tab and copy the scripts that are generated to two separate text documents temporarily and name them Script 1 (Script in the top/first box) and Script 2 (Script in the bottom/second box). 

Now, you have the scripts with you. You need to place them on your blogger template with some CSS to make it more attractive. So, let's get it done!!!

1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, search for the following piece of code.

]]></b:skin>

2. Add the following code (CSS) just above the line mentioned in step 1.

.social {
border: dashed #ddd;
border-width:1px 0 1px 0;
margin: 10px auto 10px;
display:block;
padding: 3px 0 1px 0px;
overflow: hidden;
margin-left:0px;
}

3. Next, search for the following piece of code.

</head>

4. Place the coding present in the text document Script 2, just above the line mentioned in step 3.

5. Save your template. Then, expand your template and search for the following piece of code.

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

6. Add the following piece of code just below the line mentioned in step 5.

<b:if cond='data:blog.pageType == "item"'>
<span style='font-size:20px; font-family:Georgia; font-style: italic; line-height:21px; margin-top:1px; margin-bottom:-2px;'>Enjoyed the article?</span>
<div class='social'>
<div style='margin-left:10px; margin-top:0px; margin-bottom:3px;'>
YOUR SHARE THIS CODE FROM SCRIPT 1
</div>
</div>
<div class='clear'/>
</b:if>

7. Replace the line highlighted in green with the coding present in the text document Script 1.

8. That's it! Save your template. 

Note: The counters will be visible only on post pages. If you wish to have them on all the pages, then remove the first and the last line in the coding mentioned at step 6.

I would like to point out one advantage with this counter which is better loading time. That is, you get all the counters at one place. So, it saves a lot of time in loading your scripts. Hope you enjoyed this post. Share your opinions about the counter/post via comments!

Enjoyed the article?

Subscribe to this Blog via Email:

Click here to subscribe to FREE email updates from "Everything About Blogging", so that you do not miss out anything that can be valuable to you and your blog!

What's Next?

Save on del.icio.us
Add to Technorati
Digg this article!
Add it on Reddit!
Leave a comment

Other Recommended Posts

• Blogger Tutorials