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 (https://www.stumbleupon.com/dt/badges/create) 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

Style5

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.

<data:post.body>

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;//platform.stumbleupon.com/1/widgets.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(li, s);
  })();
</script>

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

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