Blog Layout Tutorial #1

Greetings, blogger. This is a simple tutorial about how you can add buttons to your page and link the buttons to other web pages.

1.) Search for the buttons/icons!

You can search for the buttons/icons at Google image. I looked for PNG images at deviantart and I'd found those which matches with the background image of my blog ♥ I added the words onto them and adjusted the sizes so that they fit into the sidebar.

Credits: StiloJuliii

If you think that editing the PNG images into buttons is troublesome, you can search for the readily made icons. Here is an example of 2 different sets of social network icons.

Source from: deviantart

Source from: deviantart

There're cute, aren't they? The set of icons usually come with different sizes so it's very convenient to choose which size to use.

2.) Upload the buttons/icons to photo sharing website

Once you have your buttons/icons, you need to upload them to a photo sharing website such as Photobucket or Flickr because we need to copy the html code of the image which will be used later. You can sign up for the account by registering with your Twitter/Facebook/Google account which is fast and easy. Make sure that you set the album(s) which you want to upload your buttons/icons to "public".

For Photobucket users

After your images are uploaded, please move your pointer to the button/icon which you want to add to your blog. A small window will pop out like this:

Copy the HTML code and move on to the third step.

For Flickr users

After your images are uploaded, click "share" at the top of your image and you'll see something like this:

Copy the HTML code and move on to the third step.

3.) Paste the HTML codes

Now go to blogger> layout> add gadget> HTML/Javascript and then paste the HTML code. You'll have something which looks like this:

To add another button/icon, copy the HTML code of that image and paste it on the same page without any spacing.

4.) Edit the HTML code

To link the button to the targeted web page, you'll need to edit the HTML code. This is the first set of HTML code from my Tumblr art blog button:

<a href="http://s1224.photobucket.com/albums/ee364/lychee_tze/?action=view&amp;current=Stilojuliii5-1.png" target="_blank"><img src="http://i1224.photobucket.com/albums/ee364/lychee_tze/Stilojuliii5-1.png" border="0" alt="Photobucket"></a>

The highlighted part is the address which you need to substitute with the address of your targeted web page. Let's say if the link is not being substituted, once you click the button, it'll link you to the page where you upload your buttons/icons. This is the edited HTML code:

<a href="http://zombielookingforinspirations.tumblr.com/" target="_blank"><img src="http://i1224.photobucket.com/albums/ee364/lychee_tze/Stilojuliii5-1.png" border="0" alt="Photobucket" /></a>

Can you see the difference? After that, click "save" and your button/icon will appear on your blog. Click on the button/icon to test whether it will link you to the targeted web page or not =) 

That's the end of this tutorial~ Hope this is helpful and that my explanations are clear enough ^__^ If you have any questions, feel free to ask.

Zombie signing off