Add StumbleUpon Buttons [With Counter] To Blogger Blogs

Add StmbleUpon Buttons To Blogger BlogsNow you can add “Stumble It” buttons/badges to your blogs, along with a counter to show the number of stumblers stumbled on your site/post via StumbleUpon.com
The buttons are straight from StumbleUpon, with no modification required. Your readers will simply click these buttons to submit your pages to StumbleUpon and all the visitors coming to your page from SU will be counted by SU and the number of visitors will be shown in these buttons.
Of all the social bookmarking sites I have ever used, I prefer StumbleUpon for the massive traffic it provides. Two of my posts (Post #1 and Post #2) already received over 20,000 visits each, from StumbleUpon. BTW if you liked any of those posts, I would be happy to get a thumbs up from you 🙂

STEPS TO FOLLOW:

STEP #1
Go to this page [StumbleUpon Buttons] and select the type of button you want to use on your blog.

StumbleUpon Buttons

In the second step, select the first option “Any web page or blog“.
And finally copy the code in the third step. It will look something like this:

<script src=”http://www.stumbleupon.com/hostedbadge.php?s=2″></script>

STEP #2
Now log in to Blogger, go to Layout -> Edit HTML and mark the tick box “Expand Widget Templates“. Then find (CTRL+F) this code in your template:

<data:post.body/>

And immediately ABOVE/BEFORE it, paste the code you just got from StumbleUpon, with two more additional lines of code (highlighted as BOLD, below) to hide these buttons in your blogs homepage.

<!–SU-BUTTON-STARTS–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
&lt;script src=&quot;http://www.stumbleupon.com/hostedbadge.php?s=2&quot;&gt;&lt;/script&gt;
</b:if>
<!–SU-BUTTON-STOPS–>

Save the template and Show off your big numbers!

Leave a Reply

25 Comments on "Add StumbleUpon Buttons [With Counter] To Blogger Blogs"

Notify of
avatar
Sort by:   newest | oldest | most voted
Poras Gupta
Guest

Oh Great !
Thanks For Sharing

View Comment
Iqbal
Guest

Nice sharing brooo….keep posting 🙂

Tutorial Blogger

View Comment
Reza Winandar
Guest

It's like a digg or tweet button, isn't it?

View Comment
Sai - Blogger Widgets
Guest

Yeah, but unlike Digg and Twitter buttons, it doesn't count the number of thumbs ups (cause, in Digg and Twitter buttons, number of Diggs and Retweets are counted).
In fact these buttons simply count the number of visitors coming from StumbleUpon, so of course sites which mainly depend on SU for traffic, can show huge numbers on these buttons, further increasing the chances of getting more thumbs ups.

View Comment
Ghazala Khan
Guest
Interview Request Hello Dear and Respected,I hope you are fine and carrying on the great work you have been doing for the Internet surfers. I am Ghazala Khan from The Pakistani Spectator (TPS), We at TPS throw a candid look on everything happening in and for Pakistan in the world. We are trying to contribute our humble share in the webosphere. Our aim is to foster peace, progress and harmony with passion. We at TPS are carrying out a new series of interviews with the notable passionate bloggers, writers, and webmasters. In that regard, we would like to interview you,… Read more »
NDS Roms
Guest

thank you so much!

View Comment
Good Jokes
Guest

Great guide thanks for making !!

Jokes For Fun

View Comment
satuiku
Guest

waw… tks for info..

View Comment
Steve
Guest

It doesn't work…any ideas what I did wrong??

View Comment
Watch Megavideo movies
Guest

Woah. Thanks for the share 🙂

View Comment
DesiMusic4uk.net
Guest

I want to know how to get the widget you have on under every post…which is |Share this post| |Bookmark this post| and that please can you tell me

my blog

http://somearticles4u.blogspot.com

View Comment
Sai - Blogger Widgets
Guest

That's a simple multi-tabbed widget, with content of my choice. You can create a similar widget, by following this tutorial (read part 1 too)

Collapsible Multi-Tabbed Widget For Blogger Blogs

View Comment
Anonymous
Guest

These tutorials are excellent, thanks!

I'm having a little but of trouble though. I've tried adding both the tweet this button and the stumbleupon button but the stumbleupon button keeps showing up on the line below the tweetme button. I tried right aligning the button but it's still a line below. Any help would be appreciated!

View Comment
Ashley
Guest

Thanks for the tip! I am trying to align stumbleupon and tweetmeme buttons on my blog, but am having trouble figuring out what code I should be using to properly align them (without touching the post body). Yours do this about, but what code should I use? Thanks!

View Comment
Divya Sai
Guest

Instead of copying the codes of both the buttons directly, paste them inside a html-table. Like this:

<table border="0"><tr>
<td width="70%">StumbleUpon_Code_Comes_Here</td>
<td>TweetMeme_Code_Comes_Here</td>
</tr></table>

Change the width from 70% to any other value to perfectly place the buttons.

View Comment
ittech
Guest

oh great , it s my first visit to yours great site with lots of info. thanks

View Comment
Suzanne
Guest

Hmm. The problem I have is that the badge is at the top of the post. How can I get it to the bottom of the post?

View Comment
Divya Sai
Guest

In STEP #2, instead of pasting the code ABOVE it, paste it BELOW that code:
<data:post.body/>

View Comment
Boffill
Guest

This has been very helpful to me. Not only that it hides the stumbleupon button and also the adsense ads on my home page! THanks thanks!

View Comment
monish
Guest

i just looking for this stumbleupon badge, finally i got it from this site. no words to say thanks…..see where i put this badge in my blog

http://watchcricketmatch.blogspot.com/

View Comment
wpDiscuz