Sunday, 1 February 2015

how to add a linking button to your Blogger sidebar

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.
4. From the list that appears in the mini window, click on "HTML/Javascript".
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.

12 comments:

  1. OK, it's just getting too complicated for me now. I should be able to back my blog up with your instructions, just, but don't push it, lol.

    ReplyDelete
  2. Thanks Anne, I've been thinking of doing one of these boxes for a while but I couldn't work it out. After losing my blog on Friday for an hour I will wait until my panic levels have gone down a bit and then back up the blog. Take care x

    ReplyDelete
    Replies
    1. Oh my goodness, Chel. That would have been scary!

      Delete
  3. Oh Anne, it all sounds so complicated, but I'll keep this post in mind so that I can refer to it if I think of doing anything fancy. Thanks and take care.

    ReplyDelete
  4. Fantastic, fantabulous, totally amazing, wonderful, incredible - need I go on!!! You are a wonderful wonder of wonderment Anne!! Thank you sooooooooooooooooo much for this!!! I love you! xx

    ReplyDelete
    Replies
    1. LOL, Amy. You're most welcome. :o)

      Delete
  5. Well, I read it, but I might as well have read a page in a foreign language, for all the sense it made to me ....... I just don't do technical!!

    ReplyDelete
    Replies
    1. LOL Just don't ask me how it's done on a Typepad blog because I wouldn't have a clue! :oD

      Delete
  6. I spent about half an hour sighing over that lovely Russian Doll. Awww.
    Thanks for this tip, too. Doing this on my blog soon.

    ReplyDelete
    Replies
    1. I made that Russian dolly in my Photoshop many moons ago. I have her in different colours too! :o)

      Delete

Thanks for taking the time to comment on my blethers. I really appreciate it. I do try to reply to everyone but sometimes life just gets in the way of that happening! :o)