If someone Stumbles your blog it can bring a lot of traffic to your site so it is a good idea to make it easier for visitors to your site to Stumble it.
But have you ever tried to add a StumbleUpon button to your Blogger template only to find that the instructions are impossible to follow, you cannot work out where to put the code or your icon sits higher than your text?
When this blog was run on the Blogger platform, I played around with the code provided by StumbleUpon and got it sitting how and where I want it, neatly inline with the text, and so I have now created this simple tutorial so you can too.
Log in to Blogger
Click on ‘Layout’
Click on ‘edit HTML’
Click on ‘download full template’ and save a backup of your blog to your hard-drive in case anything goes wrong
Check the ‘expand widget templates box’ (you are still in ‘Layout’, ‘edit HTML’)
Click anywhere in the actual code then press ‘ctrl’ and ‘f’ at the same time (which will bring up the find box)
Enter post-footer-line-1; into the find box and click next to find the line of code that should either be identical with or look a lot like:
<p class=’post-footer-line post-footer-line-1′>
Make some space under this line by clicking at the end of it and hitting ‘enter’ a few times then past the following code into your template:
<span style=’float: left; background: url(http://cdn.stumble-upon.com/images/16x16_su_round.gif) left no-repeat; padding-left: 20px;’><a expr:href=’"http://www.stumbleupon.com/submit?url="+ data:post.url + "&title=" + data:post.title’ target=’_blank’>Stumble it! </a></span><br/>
Save your template. Easy peasy. You can change the background url to any button you want to use if you don’t like the one I am using here.
Cross posted at Coping in a Technological World.