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? I have played around with the code provided by StumbleUpon and got it sitting how and where I want it and 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.
Cross posted at Coping in a Technological World.
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? I have played around with the code provided by StumbleUpon and got it sitting how and where I want it and 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.
Cross posted at Coping in a Technological World.
If you like this tutorial you could always Stumble this site to say thankyou ;-)
Thank you very much for publishing those steps. I have struggled trying to add StumbleUpon!
ReplyDeleteThey make it sound so easy and then it isn't... I tried several different tutorials and they all had issues so in the end I modified the code, played around with where I wanted it to sit and then realised that what I had done, once I had mucked around for ages, was actually quite straightforward so I thought I should share it. Anyway I am glad you found it useful.
ReplyDeletethank you for this very good information. I'll add it to my all blogs!!!
ReplyDeletethanks
car alarm
http://www.soundandalarm.com/
ReplyDeleteThank you so much for this. For some reason the super-fancy-secret code wasn't appearing on the StumbleUpon site for me. Your tutorial was simple to use and thanks for including the code. I changed it a little and stuck it up by my Tell a Friend link and it works perfectly!
ReplyDeleteYou are a rock star!
Recent blog post: Because Nipples Are Circles, Obviously