How to make resizeable social media buttons for your blog & some pre-made ones

 Last night there was a spur of the moment blog redesign, which started with the need to make my blog look more mature and fit better with the new colour scheme I had chosen and to shuffle a few things around like my social media buttons. Here's what it used to look like (or thereabouts since I redid the layout since this picture was taken)

 And so quite a few things have been changed, most noticeably my background, header and blog signature (another how to coming soon) aswell as my social media icons. Before I used a gadget that didn't fit in with my blog to show every account I owned on every website, even trip advisor! 

So here's how you do it:

First find the images that you want to create your icons with. You can make them yourself or I used these free ones from Endless Icons. 

Then take the url from that image either by right clicking on it and selecting copy image url or by copying the website address in the address bar at the top of the page and paste it into a word document. I suggest using the right click method to make sure you are linking to the image and not just the webpage, to check simply paste the address in the address bar and if it takes you to the stand alone image then you've done it!

To use images you've made yourself simply upload the photo using google photos or other photo sharing websites and right click the image and copy the url. 

Copy the following html onto the same word document below the image url you've just pasted...

<a href=”Put the website address you want the button to go to here" target="_blank"><img height="25" src="Put the image url here" width="25" />

Replace the blue text with the image url and replace the orange text with the website address you want the button to go to. The easiest way to do this is to log onto the relevant website for the button, go to your profile and copy the website address at the top of the page. Repeat the steps for the other social media buttons. The buttons can be resized by altering the numbers shown in red, but there's more on that later.

So here's what my Twitter one looks like...

<a href=” http://www.twitter.com/jaaadejade" target="_blank"><img height="25" src="http://www.endlessicons.com/wp-content/uploads/2012/10/twitter-icon-614x460.png" width="25" />

Now its time to add them to your blog. 

After logging into blogger, go to the dashboard and click on the layout tab. Which should bring you to this page...

Select where you want your buttons to go (I chose the right hand sidebar) and then click add a gadget and find the one that is for html. Don't worry if the gadget doesn't go exactly where you want it, you can drag it to where you want it afterwards. 

Paste all of the html from the word document into the content box (this can be done super quick by pressing Control & A to select everything on the page), making sure you remove any spaces between the different buttons. Like this...

Finally click save and head over to your blog to make sure they all work. If you find the buttons are too big or even too small, head back over to the html code gadget and then press Control & F and type in 25. This will highlight all of the sizings of the buttons and so makes it easier for you to change them and you wont miss one. It will look something like this...

Although don't mistake the url for the sizes, and only change the ones that have either height or width infront of them. As you can see, I resized mine to size 60 so they are aligned vertically. 

And that's it! If you any questions or suggestions for more blog how to's, then please tweet me (you can find the link in the new social media buttons) or leave a comment below.

While its always good to know how to do something yourself and you can design it exactly as you want, sometimes it just doesn't work. So I've included the html for my social media buttons, all you have to do is replace my url with yours. But you'll have to read the above tutorial to know which that is...

Google +

<a href=”https://plus.google.com/u/0/110345788235387695973/posts" target="_blank"><img height="25" src="http://www.endlessicons.com/wp-content/uploads/2012/10/google-plus-icon-614x460.png" width="25" />

Twitter

<a href=” http://www.twitter.com/jaaadejade" target="_blank"><img height="25" src="http://www.endlessicons.com/wp-content/uploads/2012/10/twitter-icon-614x460.png" width="25" />

Instagram

<a href="http://www.instagram.com/jaaadejade" target="_blank"><img height="25" src="http://www.endlessicons.com/wp-content/uploads/2012/11/instagram-614x460.png" width="25" />

Youtube

<a href=" http://www.youtube.com/users/jaaadejade" target="_blank"><img height="25" src="http://www.endlessicons.com/wp-content/uploads/2012/10/youtube-icon-614x460.png" width="25" />

Pinterest

<a href="http://www.pinterest.com/jaaadejade" target="_blank"><img height="25" src="http://www.endlessicons.com/wp-content/uploads/2012/10/pinterest-icon-614x460.png" width="25" />

Facebook

<a href="https://www.facebook.com/pages/Its-a-little-bit-personal/300403173437382" target="_blank"><img height="25" src=" http://www.endlessicons.com/wp-content/uploads/2012/10/facebook-icon-614x460.png " width="25" />