Tuesday, June 7, 2011

Tuesday Tutorial - Adding Media Button Links To Your Blog

Everyone has those easy-to-find media buttons on their sidebar these days... so I decided it was time for Mandipidy to jump on board. While I was at it, I figured I would write up a tutorial for anyone else who is interested in adding button links to their sidebar.

1. Decide what you want to link to. Twitter, facebook, feed burner, email... pick a handful of ways that readers can easily follow you. Here is a list of icons that I have rounded up... feel free to right click and copy any of them that you would like to use (or you can find or create your own).
All of these images are 49 x 49 px:








2. Once you have saved your images, upload them to your photobucket account. You can use the editing options to tweek the colors, resize the images, or add borders if you would like.

3. Create a place in your sidebar for your icons to go. To do this, go to your blogger dashboard. Click "Design." Click "Add a Gadget" in your sidebar:

A box will pop up with many options. Choose the option that says "HTML/JavaScript":

Another box will pop up. This is where you will put your code for your media buttons:

4. Go back to photobucket, and copy the html code for the image that you want. To do this, let your mouse hover over the image you want. When you do, an options box will pop up. Click on the html code to copy it:

5. Paste your copied code into the content box in blogger:

6. Change the first web address in the code to direct to the proper webpage. Here I have highlighted the web address that I am going to change:

The button is an etsy icon, so I will replace the web address with the web address for my etsy shop and click "save":

Follow steps 4-6 for each button until you have all the icons that you want to have on your sidebar.

Let me know if you have any questions! And if you aren't into designing your own blog, I now have a services page with rates for custom blog designs.
I'm linking to these parties.


Melanie said...

just wanted to stop in to say that i adore your new banner! well done! :)

Jamie said...

thank you thank you!

BigBearswife said...

everything looks great!

Elisabeth S. said...

Great post! I did some a while back but I don't like the ones I have. Now I know I can customize better.

Nikki said...

how do you get them to line up next to each other?


Maegan said...

Awesome! I totally want this. And I'll be hitting you up for services to create this for me come July, we've declared June a month of no spending, except for necessities. While I see this as a necessity, the hubs does not. Dang!

melissa said...

oh yay!!! i am excited about this! i am totally out of the loop when it comes to designing and adding things to the blog. i just write and post, write and post:) as soon as i get a free minute i will be coming back to this!!


Kelly said...

thanks f or the tip!

Jessica @ Barefoot by the Sea said...

Thanks for this! Great tutorial!

Hope you are doing well!

malia said...

your new banner is fab... unique and eye-catching, really special. and thanks for the tute on this... malia

Foundinthe-ALI said...

This is awesome! I was just searching for this!

for the email and the rss feed, what do you link it to?

Albion said...

Thank you so much for this tutorial! I'm not the most tech-minded and have been struggling with my blog. This was perfect for me. Thanks!! :)

greet said...

Ive been looking for something like this for AGES. Thank you! One question - how do you get them all to be side by side and not stacked?


The Blonde Mule said...

This is awesome -- thank you so much! I just added icons to my blog per your instructions. I don't use Photobucket, so I had to figure out a way around that part, but it worked!


lemontreestudio said...

Thank you so much! This was WAY easier than I expected and your instructions were really clear.