Wednesday 3 July 2013

Need help on how to do a blog button?

Hi everyone!

I've been asked twice now about blog buttons, so thought I'd do a post about how to do one for anyone who needs help :D

You can see I have 3 buttons, one for my blog followers on the right, another on the right for my A-Z reading challenge, and another for my blogoversary on the left.

Here we go:

  • Make your button. For this I use Photoshop and open up a new file size 200x200 pixels. Once you have made your button, save it as a JPEG.

  • Log into Google and go to Photos. upload your photo to your google pictures.

  • Open up blogger, and go to layout. There select 'add a gadget', and find the HTML one.

Copy this grab code and paste it into the gadget:
<div class="love-Books?-blog-Books!-button" style="width: 150px; margin: 0 auto;"> <a href="http://www.lovebooksblogbooks.blogspot.co.uk" rel="nofollow"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZpwUWuvN8UmOC3FjU9D8-iSHBJ4kYYg3Z98QZfBlCG8G7nkOipSrkNwyC-dZ-_QEyyh0qqvImvLk0YUbgIFRmcOMOyj2eF4W8p4d2Vka_0-UDYEZ0ix7mD_tiU6z1ReP44WLthUfggS2M/s200-no/8.jpg" alt="Love Books? Blog Books!" width="200" height="200" /> </a> </div>

  • The parts I've bolded need changing. The first one is your blog name (if it's more than one word, use hyphens as I have in between the words like I have). The second one is the width of your image (mine was 150). The third is your blog address. The fourth is your image address (you will find this by right clicking on your image and selecting 'copy image location'. The fifth is you Blog name (no need for hyphens in this part unless you have one in your blogs name).

  • Save your HTML gadget and save the changes to your blog. Open up your blog in a separate tab to make sure it works. There should be a code box with the grab code in it, so others can now grab your code and post your button!

  • To make sure it works, copy your code, and paste it into another HTML gadget and save. If you want you can keep this above the 'grab code' box so people know what your button looks like! Or you can delete it,a dn open up an image gadget, uploading your picture there with the link to your blog in the link box, then position it above your 'grab code box'.

Easy enough? Hopefully!

If you have any problems after following my tutorial on Blog button making, just holler my way at lovebooksblogbooks@gmail.com and I'll give you a hand! Also, let me know in the comments box below if this works for you! :D

2 comments:

  1. hehe, I was one of those poor souls who needed your help, lol. This was a good idea (making a post about it) because I'm sure I will need help again...and instead of bothering you, I will just come here, lol.

    Thanks so much Dee. You are awesome! :) xxx

    ReplyDelete
    Replies
    1. Hee hee you weren't the only one megan :) and thanks, I guess sometimes I am kinda awesome ;) xx

      Delete

Please leave your thoughts! Or just say hi!

Sorry about the Capatcha! I hate it too, but too much spam lately!