Fiddling with HTML - Linkety Link Labels

If you have been keeping your eye's peeled on this blog you will have noticed that I have been fiddling...a lot...with the layout and links.  I guess that I am working towards making my blog look pretty and welcoming and in the process, trying not to let it look like a gazillion others.  I am not there yet, but I am learning and I think that it would be handy to make notes about what I am learning here.  Maybe you can learn too.  If not,
then at least it will be a good place to remind myself of what I did, just in case I need to do it all over again!

Hoooo-boy, I hope not. All the cutting and pasting is a royal pain in the butt.

Let me make it Very Clear - I am a building architect, not a computer architect....I know nothing, zilch, zero, niks {get the message?} about HTML. On the other hand - Flower Daddy knows a little bit about it, and chimes in whenever I get stuck and fixes my problem...often a bit of Googling is required first...

So, what I am trying to show you here is how to create these linkety link labels:

First you need to create your images in whatever imaging software you are comfortable with and then save them as image files, e.g. jpg.  My right margin is 320 pixels wide, so I made a white background 310 pixels wide and centred my word on that background.  Make the height of your image consistent and just high enough to fit each word on.  You need 1 image for each word.  So, here, I have 8 images and the text is centred on the white background.

My blog is on blogspot, so all my uploaded images are automatically saved online to Picasaweb.  So this is where I have saved these images too.  But you could also do it on Photobucket (as an example, I am sure there are other appropriate places).  So for Picasaweb I click on the folder I want the image to live in and then select the "add photo" button.  Once your photo is uploaded copy the image URL and save for later.

Then create a new blogger HTML gadget - go to "layout", click "add gadget" in which ever area you want your links, then select the "HTML/Javascript" gadget.

When you have done #3 above a window pops open where you can add lots of lovely nonsensical 'code'.  What you see below is what mine looks like after I have done lots of copying and pasting of image and weblinks.

Ugh - I prefer pretty colours and pictures to all this code language!

A very brief explanation of what you see above follows, it is actually not as bad as it seems when broken down into bits:

So, let's cut to the chase!  If you want your link to open in a new tab, copy this into your HTML gadget window:

<a href="http://paste your weblink here" target="_blank"><img src="https://paste your image URL here" />
</a>

If you are happy for your link to open in the same page as your current page, then use this instead:

<a href=" http://paste your weblink here"><img src="https://paste your image URL here" />
</a>

Keep copying and pasting until you have how ever many images you want.  Save your gadget.  Save your blogger arrangement.  HEY PRESTO!  Job done!

For the weblinks - I have obviously linked to my various shops and facebook.  Those are easy enough to find weblinks for.  But, I have also linked to "pages" created in blogger.

First you need to create the pages and select "don't show".  When you have created your pages, click on the page in the "pages" window.  This will take you to the "pages" page {make sense??}.  e.g. if I click my "about me" page, it takes me here: http://twolittleflowers.blogspot.co.uk/p/about-me.html.  So this is your weblink for that page.  You can use it in your HTML gadget.

Nifty to know - if you want a bunch of small images next to each other, in 1 line, you just do exactly the same as everything I have explained here.  Except that you make your images smaller.  So, if my right column is 320 pixels.  If I wanted 4 little images in a row, then I would size each of them no bigger than 80 pixels wide.  The code that we are using is like a sentence.  Without hitting the return key, the sentence all stays on the same line, or just moves over to the next line when it runs out of space.  So, in our HTML gadget we haven't included any 'code' to tell the computer to put the images on separate lines.

Whew!  This post has taken me forever to put together.  I hope that is has been useful to someone.  Please let me know how you get on with this - if it works for you, if something doesn't make sense, or whatever you fancy sharing.

Next thing to figure out is how to put all these linkety links into 1 picture frame image....and I don't have a clue where to start!