Add StumbleUpon Badge to Blogger

The best way to gain exposure is by adding a StumbleUpon badge to Blogger which has real-time count  that shows how many times your post has been viewed and stumbled.

You can get the button codes from official badges page but here I will explain how to have these badges for Blogger from six different styles that StumbleUpon provides (updated on January 2013).

Step 1: Login to Blogger, go to Template tab, click “Edit HTML” and check “Expand Widget Templates”.

Step 2: Find closing </body> and before it add:

<script type="text/javascript"> 
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = 'https://platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script>

Step 3: Generate the code for the badge below.

StumbleUpon Button options

Layout:  Horizontal 1 Horizontal 2 Horizontal 3 Vertical No count 1 No count 2

---

Float:  None Left Right 

Show on:  All pages except static pages Post pages only Every page 

Preview and code

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='float: none;'>
<su:badge layout='5' expr:location='data:post.canonicalUrl'></su:badge>
</div>

</b:if>

Step 4: Find <data:post.body/> and above/below it (or both) add the above rendering code.

Step 5: Save your template.

Points to be noted

• layout - StumbleUpon button size ranges from 1 to 6.
• The codes marked in blue are conditional tags that I have used to show it on every page except for static pages. You can change it, here is an example:

  <b:if cond='data:blog.pageType == &quot;item&quot'>
  {StumbleUpon Badge code}
  </b:if>

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →