How to add stumbleupon sharing buttons [with counter] for blogger post

Tweet

Save on Delicious

StumbleUpon is one of the most popular bookmarking sites which can sends a lot of traffic to any blogs. After your blog post is stumbled and if stumblers (members of StumbleUpon ) find it interesting, they will definitely follow the link to your blog. And in this way you will get a lot of visitors.

By Adding a StumbleUpon Button your blog enable the visitors to submit your posts to StumbleUpon and you will get additional traffic.

How to do:

STEP #1   Choose your Stumble Upon button design

For style 1 code will be

<script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>

For style 2 code will be

<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script>

For style 3 code will be

<script src="http://www.stumbleupon.com/hostedbadge.php?s=3"></script>

For style 4 code will be

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

Final Step :  First log on in your blogger account go to Design -> Edit HTML and mark the tick box "Expand Widget Templates". Then find (CTRL+F) this code in your template:

<data:post.body/>

And immediately ABOVE / BEFORE it, paste the below code

<!--SU-BUTTON-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;padding:4px;'>

<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>

</div>

</b:if>
<!--SU-BUTTON-STOPS-->

Save the template then you will get this feature in your blog.

Customization

Lest Customize it as you like.
Change style
At the begaining of this post i gives 4 style of ST button. If you like to use style 4 then just replace the red code.
How to add stumble upon button with Counter in blogger post.
For Showing button in Left side of post code will be

<!--SU-BUTTON-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left;padding:4px;'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
</b:if>
<!--SU-BUTTON-STOPS-->

For display button in home page code will be

<!--SU-BUTTON-STARTS-->
<div style='float:right;padding:4px;'>
<script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/>
</div>
<!--SU-BUTTON-STOPS-->

Thats all. If you have any problem with this tutorials fill free to comment. I will happy to help you.
Shajjjad
Chittagong, Bangladesh

This post was written by:Shajjad

Shajjad-Ul-Islam-who has written 40+ posts on Blogger-tutorials.

Shajjadul Islam is a professional blogger and web developer. Follow him on Twitter or email him