Tweaking Blogger - Adding a StumbleUpon button

I'm going to preface this blog by saying that I think that the basic social media sharing options on Blogger are great, but they are a far cry from covering all of the options available for sharing your blog posts.

So, what do you do when you want to add more options?

The easy way is to look for plug-ins - those lines of code that someone else has already done all the work on, and you just have to click your mouse a few times to install it.  If you use Blogger as your blogging platform like I do, you no doubt get frustrated with the fact that the plug-ins are pretty basic, and it's hard finding ones that do what you want them to do.  You are also limited as to where you can place your plug-ins on the blog template.

For instance, I wanted to add a StumbleUpon button for readers to be able to use to share my blog posts.  Logically, I went to my "Design" tab on the blogger dashboard and tried to find the appropriate plug in.  I found a grand total of one and quickly discovered it wasn't what I was looking for.  I want people to be able to stumble individual posts, not the entire blog.

Realizing that this was going to be more difficult than I wanted it to be, I proceeded search the web for a tutorial.  Tutorials are one of my favorite things about the internet.  You can learn how to do anything with a good tutorial - I now know how to make a skeleton key for padlocks out of a soda can, find product key codes to activate my pirated software (theoretically - as I have no pirated software to activate), and download virus-laden music files via open source peer to peer network sharing programs.

Anyhoo....

All of the tutorials that I could find, including the one on the actual StumbleUpon website, had me placing my brand new StumbleUpon button directly beneath the body of my blog post - several lines above where all the rest of the sharing options are located.

I'm not a total neat freak, but I do like some structure and organization - sharing buttons should be grouped together for your reader's convenience, not hiding around your page like an Easter egg hunt. And so, I bring you Mynx's happy little tweak for adding a StumbleUpon button to your blog where it actually belongs - with its happy little friends at the bottom of your post.

This isn't as easy as clicking your mouse a few times to install a plug-in, but it is relatively easy and pain free, and best of all, someone else still did all the coding for you! (I apologize in advance for the hard to read pictures.  Maybe I should have taken time to find a tutorial that would have fixed that.)

Step 1 - Open a notepad file and then click here to select the StumbleUpon button you would like to add for your website.  Copy the code generated in the box on the right to your open notepad file.

Step 2 - In Blogger go to your dashboard and click on the "Design" tab.  On the following screen, click on the option to edit HTML.

Step 3 - At this point I urge you to back up your current template.  Disclaimer:  I won't be held responsible if you screw up your blog by not following directions and then have no way to get it back to its original, unscrewed state.  Sorry. 

Do this by clicking on the link to download the full template. Save it someplace where you won't lose it, like directly to your desktop, and then proceed to Step 4.  In the event that you have to restore your original template, you can upload the saved version on your desktop directly to Blogger and everything will be hunky dory again.

Step 4 - Check the box!

Step 5 - Make sure that your cursor is somewhere in the box with all of the coding and use "CTRL+F" to pull up your search box. Type the term "quickedit pencil" (minus the quotation marks) into the search box and your screen should pull up an area of the code resembling this:

Step 6 - Copy your line of code that you saved to your notepad file and place it directly below the entire section of coding pictured above.  Your code will now look like this (minus the arrows, which are for reference):

The highlighted area in blue is the code for your StumbleUpon button.  Make sure to leave space directly above and directly below your new line of code to make it easier to find later if you decide to change your social media sharing buttons again.




Step 7 - Now hit the "Preview" button and viola! There should be a brand new StumbleUpon button directly beneath the rest of your sharing buttons.  Click "Save Template", and that's it.  You've got a nifty new StumbleUpon button placed where it belongs, with its happy little social media sharing option friends.

Did this help you? Please be sure to click the button below and stumble it! :)