Streamlining Your Blogger's Sidebar

If you will kindly look to your right you will notice my new "Follow Shalunya & Boyet" box. It comes complete with the fancy buttons below:

 

These buttons link my readers to other social media sites to which I belong. This single box with eight shiny new buttons has decluttered my sidebar and given my readers new means of interacting with me on other forms of social media.  I had been hoping to win a set of fancy buttons through a blog contest but, truthfully, I never win anything. So I decided I would just make a set of the buttons for myself.  Surely, it couldn't be that hard, right?!?!?!  

Honestly, it isn't! Now I will explain that I am not an html guru.  Therefore, it did take me several hours to get the html coding correct so the buttons worked the way I wanted them too.  If you are interested in making yourself some fancy, shiny buttons, too, then stay with me.  If you don't have a blog and don't need fancy buttons, feel free to play with my buttons.  Then you may continue on and have a very happy day! :)

Now, back to fancy, shiny buttons 101.  

Step one: determine which other social media sites you use and you want to include for your sidebar box. 

Step two: acquire fancy, shiny buttons! I found mine from wplift because they included the Instagram icon. I admit I know my way around Photoshop so I did fancy them up and gave them a nice shiny topcoat.  But that is not at all necessary.  Or a simple search on Google for images for social media icons or social media buttons will provide you with plenty of other options which you might find shiny enough for your blog. Happy button hunting. 

Step three: load the buttons you will be using into a public online photo album such as flickr or Photobucket. Keep this window open in a separate tab as you will need to revisit the site often for the url location of each button.

Step four: collect a specific list of site addresses for each of the buttons you are adding.  

Step five: create your sidebar box by adding a 'gadget' to your layout in Blogger.  Chose the HTML/java script option and give your box a name.

Step five: this is where things get a little tricky but, hang tough, we can get there together! You need to place the HTML coding in the box for each button. If you are an HTML guru you can skip the details here as this is all pretty basic; but please comment below or email me because I have will need to pick your brain in the future. If you aren't an HTML whiz then keep reading.

Your code should look like this:

<a title="Follow YourName on Twitter" 

href="http://twitter.com/YourName" 

target="_blank">

<img src="http://farm8.staticflickr.com/1234/123456789_ae2eb5bb02_t.jpg"
width="32" height="32" alt="YourButtonsName" />
</a>

Let me break that down for you in layman's terms.  

<a title="Follow YourName on Twitter" This provides text when your reader hovers over the button.

href="http://twitter.com/YourName" This will send them to your Twitter account provided you change the red letters to your specific Twitter user name. This is where you will place the specific web address for each of the social media sites you are using. 

target="_blank"> This opens a new window in their browser so it is easy for them to come back to your blog to utilize the other buttons. :) 

<img src="http://farm8.staticflickr.com/1234/123456789_ae2eb5bb02_t.jpg" 
width="32" height="32" alt="YourButtonsName" /> Grab the HTML/BBC code from flickr or photobucket. This will display your fancy button on your blog. *Do Not grab just the link.

 </a> This tells the coding goodbye for you so that it knows you are done with it. 

Now the email me button is just a little bit trickier.  Change the red text below to reflect your personal email. 

<a title="Email Shalunya"
href="mailto:YourName@YourMail.com" 

target="_blank">

<img src="http://farm8.staticflickr.com/1234/123456789_ae2eb5bb02_t.jpg" 

width="32" height="32" alt="email copy" />

</a>

Tips: HTML coding is not overly particular about spacing.  So use this to your advantage. I always enter a few lines in between buttons so that if I need to change something about an individual button it is easier to find. It doesn't change the spacing of the buttons so make it easier for yourself if you should need to go back to edit your buttons.

Save after you each button you enter. By saving and testing each button one at a time it makes it easier to methodically work through any issues you are having without overwhelming yourself.