How I Made a Button for my Blog: Part 2

If you missed the first part of my journey in button-making, make sure you check it out.



7. Head back to Blogger and go to where you always edit your layout: Design tab > Page Elements

In the side-bar section of your blog click 'Add a Gadget' and choose 'HTML/JavaScript'.

By the way, click on image to enlarge :)

Time to put in a little HTML. Copy and paste the code into the 'HTML/JavaScript' Gadget box.

--------------------------------------------------------------------------------------------------------------------
Code for creating a button:

<center><a href="insert button destination"><img src="insert photo link" style="width: 200px; height: 200px;"/></a></center>

--------------------------------------------------------------------------------------------------------------------

red: where the button will take you

purple: the button itself

blue: button measurements - in this case 200 pixels by 200 pixels.

8. Go to where your photo is saved. In this case I am in Picasa Web Albums (see Part 1). Time to get a link.

To find the link for this photo I right-click on the photo and select 'Inspect element'. There are probably many ways to do this but this is the only one I know. :P It works on Google Chrome.

Internet Explorer users need to right-click and then select 'View Source'.

Everyone else is on their own.

Remember to click on the image to enlarge it.  It might help in actually seeing it.

Another window will pop up with all the scary looking codes which make this page what it is... it's a whole new world.

Thankfully, Google Chrome has kindly highlighted the bit I need. (This is because we right-clicked ON the photo, remember?)

Copy it. (Press Ctrl-C since the code is already highlighted)

Almost ready to paste it into the HTML button code.  I only want the link to my photo, however, so I need to shave off a bit.  I only want the code/link from https:// to .jpg 

[code in red is superfluous and promptly removed; the rest is my photo link]

<img src="https://lh3.googleusercontent.com/-7iFbyyBFnxY/TiORaS2OZ8I/AAAAAAAABQA/wvOoy0F_g5Y/-----------.jpg" style="width: 200px; height: 200px;"> 

I really hope that makes sense.  Hang in there!  Almost done...

-----------------------------------------------------------------------------------------------------------------------

My button code now looks like this:

<center><a href="insert button destination"><img src="https://lh3.googleusercontent.com/-7iFbyyBFnxY/TiORaS2OZ8I/AAAAAAAABQA/wvOoy0F_g5Y/-----------.jpg" style="width: 200px; height: 200px;"/></a></center>

-----------------------------------------------------------------------------------------------------------------------

9.  The only bit missing is the button destination link.  In this case, my button links to my Photography page.  To grab that link I just go to the page, and copy and paste what comes up in the address bar in my browser.  Simple dimple.  I'm not even going to have a picture for that.

[Measurements are fine for me since 200x200 pixels is the size I made my photo.  If it looks strange once I save it on the blog, then I can do a little adjusting by putting in larger or smaller numbers.  Theoretically.  I haven't tried that.]

10.  Once my code is all present and correct in the 'HTML/JavaScript' Gadget box, it's just a matter of clicking 'Save'.  I preview the whole design to check that all looks good on the blog.
If the button is in the wrong place, just do a little clicking and dragging to fix it up.

Hey presto, its done!  My little button now has a home.


Theoretically anyway.  I take no responsibility for leading you up the garden path in any way since I speak out of total ignorance bar some experience in trying this out for myself until it eventually worked.  Just work with the code at the top of the page and have fun. ;)