How to Add Stumbleupon Share Button on Blogger

How to Add Stumbleupon Share Button on Blogger

A friend of mine asks me how to add Stumbleupon share button in blogger. Well, it's pretty easy to add to on blogger, And it's similar to the Skype share button, Tumblr Share button, Pinterest share button.

What is Stumbleupon ?

StumbleUpon is a web search engine that search the rate Web pages, photos and videos, web content, StumbleUpon was founded in Calgary, Canada school in 2002. StumbleUpon finds web content that related to it's users interests.

Why Should I Add Stumbleupon Share Button?

Well, like said above StumbleUpon search Web pages, photos and videos that related to it's users' interests, So the best way to gain the organic traffic for your blog. also user can share your article, Post to Stumbleupon if you added the button to your blogger. and you can also submit your posts to Stumbleupon.


Adding The Share Button

First of all, You need to go to "Stumbleupon Discovery Tools, " and choose the button style to create the share button, Once you created the button, Copy the scripts and the codes that Stumbleupon generates.

Stumbleupon Share Button on Blogger

Now go to your blogger >> Blog >> Template>> HTML, Click anywhere in the HTML editor And search below code using the search box (Press ctrl+F) 

 <b:if cond='data:blog.pageType == &quot;item&quot;'>

paste it below search code and save the template.

Now you will see the Stumbleupon share button to every post on your blogger blog.

demo of share button

Youcan also add the HTML/Javascript gadget and past that button codes, Drag it below your blog posts gadget to show on your post footer.

How to Add Stumbleupon Share Button on Blogger

Or if you want to display Stumbleupon share button to specific post, then just copy and paste the button codes into your post html and update it.

add stumbleupon button on blog posts

So this is how you can add the Stmbleupon share button to your blogger blog and posts, If you liked this tutorial then Like and Follow us on Twitter, Facebook.

  • Recommended: how to Embed Google Street View in Blogger
  • Recommended: Create and Add Google Custom Search to Blogger Blog

    • Author

    I am Aizaz.Dinho and I loved to learn new things and teach to people like you, In my mind I'm the one who can do anything whatever I want, From my heart am still learner and loved to do impossible things, Web Development is my passion and I have PHP, MYSQL OOP PDO, Blogger WordPress also SEO experiences, You can say I'm the code ninja of meralesson

    1 comment:

    1. John Foll27 January 2017 at 18:21

      You article helped. The help on StumbleUpon was hard to understand what they meant by "Code". I thought the JavaScript section was to be put separate, but your example showed that it wasn't. But I couldn't not follow part of you guide, because I did not have the stuff to search on that you had. But the StumbleUpon help had "data:post.body" to search on, which worked for me. This is what my template had: "div style='clear: both;'" -- clear for photos floats - I couldn't place the exact code here, but you get the idea. There was not IF condition in my web template.

      Thanks!

      ReplyDelete