How to Add StumbleUpon Share Button For Blogger

• Share on Twitter
• Share on Facebook
• Share on StumbleUpon
• Share on Delicious
• Share on Digg
• Share This!

Like all other Social networks, Stumbleupon has released some really great looking sharing buttons.

Stumbleupon has got 6 different sharing buttons.
Integrating this into blogger will require some template edits.
To add this widget to blogger, follow these instructions:



Step 1:
Log in to Blogger, go to Design / Layout > Edit HTML and tick the "Expand Widget Templates" checkbox.




Step 2:
Now find (CTRL+F) this in the code:



<data:post.body/>

Case 1:

Going for style 5.

To place the stumbleupon share button at the top right corner of your post paste this code before/above it :



<div style="float:right;padding:4px;">
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=" + data:post.url'/>
</div>

NOTE: Don't forget to save the template.
NOTE: To change the button position from "Top-Right" to "Top-Left" just change the float position to left. i.e. float:right changes to float:left check it in Case 2 below.

Case 2:

To place the stumbleupon share button at the top left corner of your post paste this code before/above it :



<div style="float:left;padding:4px;">
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=5&amp;r=" + data:post.url'/>
</div>

NOTE: Don't forget to save the template.
NOTE: Now to change the button style (text in green). In the code above, change s=5 to s=1 or s=2 or s=3 or s=4 or s=6 to get the other button styles. Check it in case 3 and case 4 below.


Case 3:

Going for style 2.

To place the stumbleupon share button at the top right corner of your post paste this code before/above it :



<div style="float:right;padding:4px;">
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=2&amp;r=" + data:post.url'/>
</div>

NOTE: Don't forget to save the template.

Case 4:

Going for style 6.


To place the stumbleupon share button at the top right corner of your post paste this code before/above it :



<div style="float:right;padding:4px;">
<script expr:src='"http://www.stumbleupon.com/hostedbadge.php?s=6&amp;r=" + data:post.url'/>
</div>

NOTE: Don't forget to save the template.
This will put a stumbleupon share button to every post. But you won't be able to choose which post you want to include or exclude the button.