Add StumbleUpon Button in Your Blogs Posts

Hello Blogger’s, Now I am going to tell you the way by which you can add StumbleUpon button in Your Blogger’s each and every post automatically.New Blogger’s might be thinking that what is the use of adding StumbleUpon Button to your Blogger post. So,let me tell to them that this is another very good way of increasing your traffic.

StumbleUpon is a social Bookmarking Site where You Can submit your each post in this site so that,if any,users are interested in your post they will visit your site to read the article and hence it will increase your website Ranking.

Now,
Please pay your attention to read this article. It will take only 5 min for you to understand this code. Once you will understand then it will be easy for you to get into this.

Step 1 ::To add the Button First Choose the Style from the below and copy the codes given in the Box.

24x24 thumb

<p><data:post.body/></p><a class=’timestamp-link’ expr:href=’”http://www.stumbleupon.com/submit?url=” data:post.url “&amp;title=” data:post.title’ title=’permanent link’><img style=”padding: 0; border: none;” src=”http://cdn.stumble-upon.com/images/24x24_thumb.gif” alt=”Stumble Upon Toolbar” align=”"/></a>

24x24 su

<p><data:post.body/></p><a class=’timestamp-link’ expr:href=’”http://www.stumbleupon.com/submit?url=” data:post.url “&amp;title=” data:post.title’ title=’permanent link’><img style=”padding: 0; border: none;” src=”http://cdn.stumble-upon.com/images/24x24_su.gif” alt=”Stumble Upon Toolbar” align=”"/></a>

32x32 su 3d

<p><data:post.body/></p><a class=’timestamp-link’ expr:href=’”http://www.stumbleupon.com/submit?url=” data:post.url “&amp;title=” data:post.title’ title=’permanent link’><img style=”padding: 0; border: none;” src=”http://cdn.stumble-upon.com/images/32x32_su_3d.gif” alt=”Stumble Upon Toolbar” align=”"/></a>

120x20 su black

<p><data:post.body/></p><a class=’timestamp-link’ expr:href=’”http://www.stumbleupon.com/submit?url=” data:post.url “&amp;title=” data:post.title’ title=’permanent link’><img style=”padding: 0; border: none;” src=”http://cdn.stumble-upon.com/images/120x20_su_black.gif” alt=”Stumble Upon Toolbar” align=”"/></a>

160x30 thumb blue

<p><data:post.body/></p><a class=’timestamp-link’ expr:href=’”http://www.stumbleupon.com/submit?url=” data:post.url “&amp;title=” data:post.title’ title=’permanent link’><img style=”padding: 0; border: none;” src=”http://cdn.stumble-upon.com/images/160x30_thumb_blue.gif” alt=”Stumble Upon Toolbar” align=”"/></a>

160x30 thumb black

<p><data:post.body/></p><a class=’timestamp-link’ expr:href=’”http://www.stumbleupon.com/submit?url=” data:post.url “&amp;title=” data:post.title’ title=’permanent link’><img style=”padding: 0; border: none;” src=”http://cdn.stumble-upon.com/images/160x30_thumb_black.gif” alt=”Stumble Upon Toolbar” align=”"/></a>

Step2 : After Copying the Code from the above box. Go to Layout section of your blogger. Click on the Layout Tab in your blogger. As Shown in the below figure .

layout

Step 3:: After Clicking on the Layout tab,click on the ” Edit HTML ” tab. After Clicking HTML tab,it will look like this

edithtml

Step 4 ::After Clicking on Edit HTML Click on the check box of “Expand Widget Template”. After Clicking on the Expand search there,this code

<p><data:post.body/></p>

Step 5 ::It will Look like this .

search

Step 6 ::Now,Replace the Copied code from the Box and replace it by the Highlighted Code. You first delete the highlighted code and paste the code there.

Step 7 :: Save the template and view any post of your blog.

Note: See the Bottom of the post,you will see the StumbleUpon .It is done. Now,Visitor will stumbleUpon Your post and it will start bringing the visitors from stumbleUpon Website.

Hope You Have learned this Trick.

Thank You.

Related posts:

  1. Get Huge Traffic From StumbleUpon to Your Website
  2. How to Create Private Blogspot Blogs on Blogger.com
  3. Introducing Like-Dislike Option In All Your Blog Posts
  4. How to Enable Comment Moderation in Blogger Blogspot Blogs
  5. How To Add Share It Social Networking Buttons To All Your Blog Posts
About PankajGupta

Pankaj Gupta is owner of this blog. Blogdefined.Com (BD) allows Guest Blogging. You can connect with Pankaj Gupta at Google+ or via Email.

Speak Your Mind

*