Saturday, August 4, 2012

How to add StumbleUpon button to Blogspot

In this post, I will show you how you can add a Stumbleupon button to each of your Google Blogger posts.

Step 1

First, visit the StumbleUpon website ( to decide which badge style you prefer   As I was preparing this tutorial, there were 6 different styles of badges for selection as the ones below.

Style 1
Style 2
Style 3
Style 4
Style 6

Step 2
Log in your Blogger dashboard and click the "Template" tab.  Thereafter, click the "Edit HTML" button.

Step 3
After you have completed Step 3, Blogger will show you the partial HTML codes.  Make sure you check the "Expand Widget Templates" to see the complete codes.

Step 4
Next,  use the Find function of your browser to look for this snippet of code.  Move on to Step 6 once you have located this code.


Step 5

Place your cursor after the <data:post.body> and paste the code below.
You can change the layout='2' to a badge value that is to your liking as in Step 1.

<!-- Place this tag where you want the su badge to render -->
<su:badge expr:location='data:post.url' layout='2'/>

<!-- Place this snippet wherever appropriate -->
<script type='text/javascript'>
  (function() {
    var li = document.createElement(&#39;script&#39;); li.type = &#39;text/javascript&#39;; li.async = true;
    li.src = (&#39;https:&#39; == document.location.protocol ? &#39;https:&#39; : &#39;http:&#39;) + &#39;//;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(li, s);

Step 6
Click the "Save Template" button and test the blog.

You should see the Stumbleupon button in each of your posts now! :)

Pin It


  1. It's nearly impossible to find educated people about this topic, however, you sound like you know what you'гe talκing about! Thanks
    website design

  2. Simply amazing. see @