Let's say you want to add a button to your blog which people can copy and add to their blog. Not only do you want a button, but you want that button to link back to your blog. How do you do that?
Well, let's assume you've got your button design already. You need to load it into a hosting site. I use Photobucket but there are lots of other hosting sites out there.
Load your button image into your hosting site and make a note of the http code for the image. In Photobucket, they call it the "direct link".
This is the image I'm going to be using for this demo:
The direct link code for this image is http://img.photobucket.com/albums/v679/annelee55/photos/blog%202015/matryoshka.png. You'll see in a minute what to do with this code.
I'm going to make the image link to my blog so I need to get the URL for my blog. That's found in the address bar when I'm on my blog - http://annelee55.blogspot.co.uk.
Okay, I've got my button and its code and I've got the URL for the place I want to link to - my blog. Now I need to get a box where I can put the code. I won't go into HTML details here, just take it from me that this is the code you need to use!
<center><img src="http of button image"><br><textarea rows="5" cols="20"><a href="URL of BLOG" target="_blank"><img src="http of button image"></a></textarea></center>
So, filling in my codes, I get this:
<center><img src="http://img.photobucket.com/albums/v679/annelee55/photos/blog%202015/matryoshka.png"><br><textarea rows="5" cols="20"><a href="http://annelee55.blogspot.co.uk/" target="_blank"><img src="http://img.photobucket.com/albums/v679/annelee55/photos/blog%202015/matryoshka.png"></a></textarea></center>
Okay, so how does that look? Like this:
Okay, fill *your* image code and URL of where you want your image to link to into that first code. Now what? Load it in to your blog.
Note - you need to be logged into your blog. When you're logged in, "design" is at the top right of your blog's navigation bar - beside your e-mail address, "new post" and "sign out".
1. Click on "design".
2. Choose "Layout".
3. Choose "Add a Gadget" at the top of the list on the right hand side - or the left if that's where your sidebar of gadgets is.
5. Paste your code into the Content window - you don't need to add a title if you don't want to (* see below) - and then click on "Save".
6. Your new button and code box will appear at the top of your gadgets list. If you don't want it at the top, drag it to where you want it to sit.
7. Go up to the top of the layout page and click on "Save arrangement".
Your new button and code box will now appear on your blog sidebar.
* If your blog is adamant that it wants a title for your new gadget, just put this code in the title space: <!--space--> and it'll leave it blank. Where it says "space", hit your spacebar.
If you'd like the text area bigger - where the words are that others will copy - just change the 5 and/or the 20 to bigger numbers.
If you want to check that your code is correct before you start loading it into your blog (I *always* check mine!), go here and paste it into the box then click on "see HTML".
I hope that helps. If you have any problems with your code or just want someone else to do the code for you, let me know and I'll be happy to help.