Blog Design - Social Media Buttons

 

Social Media Buttons

There are probably many ways of creating social media buttons for your blog, but here is how I did mine.

Once again, social media buttons are basically just images that link to a website. So first you want to create some images that will work for your social media buttons. I just did this the same way that I would make a header image, only after I had the images the way I wanted them I shrunk them down so they were the same width as my sidebar (in this case about 220 pixels). Keep in mind that you want to follow all the same rules for making header images – background the same color as your blog background, crop them down the same way, etc. You want to make sure you have a separate image for each site you want to link to as well.

Once you have your images, upload them to a photo-hosting website. I use Photobucket, because they make it easy to grab the html code for my images, but you can use any website that you like.

Once you have the files uploaded, you need to find direct link to your image. Once again, I like Photobucket because they make it really easy to find. Also have the web address for the page you want to link to.

Here is where the direct link is located in Photobucket (click on the images to see them bigger):

Blogdesignpost15

Then you’ll need to plug the web addresses into an html code to create an image that will link to a certain website. It’s not as hard as it sounds. Here is the code (you will replace the bolded words with the web addresses that correspond):

<a href="this is where you put the address for the page you want to link to – ex. twitter" target="_blank"><img src="this is where you put the direct link for the image you want to use" border="0" alt="" /></a>

If you want to copy the code from this post, just highlight the above text and press Control-C.

Once you have the web addresses plugged into the code, all you have to do is put the code into your blog sidebar. To do this you’ll need to create a new html gadget.

Blogdesignpost16

Then just paste your html (with the web addresses in their proper places within the code) into the gadget.

Blogdesignpost17

You’ll do the same thing for each button you want to create.  I recommend putting the html code for all of your social media buttons in the same html gadget – that way they’ll be closer together on your page.  If you upload them all in separate gadgets they’ll have wide, awkward spaces.

links copyblogpost

You can use this same method for making any style of social media button that you want - I recently read another social media button tutorial and discovered that if you want to make the small, round buttons, just make your own small, round images (like the image above), and insert them into your blog the same way I described. The only difference is that you'll want to make the images small enough so that they will fit side-by-side in your sidebar - so for me, I made them 50 pixels wide and all the html codes into the same gadget, and they automatically line up in my sidebar horizontally. If you want to make this style of social media buttons, here are links to the Facebook font and the Twitter font. There isn't a Pinterest font available, so I had to Photoshop that one in, but a couple fonts that people have used in the place of the Pinterest logo are Bello Script and Billabong fonts.

And that’s it!  I'm sure there are different ways of going about this, but this is how I did my current buttons.  Please let me know if you have any questions about this.

I’ll do one more post next week with some tips on all the details of your blog and how to make them cohesive, and then we’ll be done!  Please let me know in the comments if you have any questions about anything blog-design-related, and I’ll try to cover it in the next post!




You may also like:
She Said... said...

i've been meaning to update my blog... as soon as we get more up to date photos... maybe after the baby is born? but I LOVE your tutorials! Thank you SO MUCH for the help! Your blos is so cute!

© Through Clouded Glass. Design by MangoBlogs.