Tuesday, February 26

Buttons, buttons, buttons!

Not these buttons.
You will be forgiven for thinking that I have gone button crazy. I know there has been lots of button talk going on around here lately but I just had to share my new found knowledge.

Last week for my most favourite linky ever I shared just how easy it was to modify and add social media buttons to your Blogger blog. What I should have mentioned though was that there is actually very little difference when doing it for a Wordpress or any other type of blog. But never mind, now you know.
A Parenting Life
This type of button

While I was busy making lots of pretty new stuff for myself, I also whipped up a blog button for the lovely Kirsty over at My Home Truths. Though really all I did was organise some code for an already existing image. And when I say organise some code I just copied and pasted a few different links into this rather awesome site that did all the work for me.

Anyway as you can imagine Kirsty was just a little pleased with her spiffy new button and code to share with all her link buddies that she asked me if I would ever do a post about making your own blog button.

Well hold the phones lovely, all your dreams are coming true and here is how to make your own blog button according to me. For the second time. When I first discovered this site way back in December 2011 I posted on how clever I was and how clever you could be.

I did think about just directing Kirsty to it, only really there is not much detail and I neglected the whole where to save your image which is kinda important. Plus, nothing like a free post idea is there?

So first things first.

Your image that you will use for you button needs to be saved somewhere online so it can have a URL. This is very similar to what is needed for when we created the social media buttons I like to use somewhere like Photobucket. Actually I don't just like somewhere like Photobucket, I actually use it, but I am sure there are plenty of other similar ones if you would rather, tumblr, flicker etc.

Anyways, if you are using Photobucket you will see that there are a whole range of URL options to choose from.

Yep that's the URL stuff I was talking about.
Once you have your image URL head to here which is the "Grab My Button" code generator site. 

It looks a bit like this

It really is as easy as filling in the blanks. Just copy and paste.
Now I have never really bothered changing the container's border or background colour. If you know what colour you want and have the right combination of letters and numbers for it, enter it in the boxes.

What I do really recommend doing though is setting the width of the code container. I like it at about 125 pixels. Most buttons these days are 150x150 pixels so setting the code container box to 125 keeps it all neat and tidy. Plus it makes it easier to fit into your side bar.

I also like to have my button links open in a new window, but that is just a personal preference and I don't even know why that is. You can decide for yourself whether you tick the yes or no button on that one. Once you have entered all the details click on the preview button and a new little box will pop up with code for you to copy and paste into where ever you want.

The code will look a little like this

<div align="center" style="padding: 5px;"><img src="http://i1186.photobucket.com/albums/z380/lourhi/I-Must-Confess-Button-150x150_zpsa33b2bb0.jpg"  title="My Home Truths" alt="My Home Truths" /></div><textarea style="background:#f0f0f0;border:solid 1px #cccccc; color: #777777; font-size:100%; height: 50px; margin:auto; text-align: left; padding: 2px 0 2px 5px; display: block;  width: 125px;">&lt;div align="center">&lt;a href="http://myhometruths.com" title="My Home Truths" target="_blank"&gt;&lt;img src="http://i1186.photobucket.com/albums/z380/lourhi/I-Must-Confess-Button-150x150_zpsa33b2bb0.jpg" alt="My Home Truths" style="border:none;" /&gt;&lt;/a&gt;&lt;/div></textarea>

Which then magically turns to this when entered in a HTML box
My Home Truths


Then all anyone needs to do is copy and past the code below the button and voila, your button is now on their blog! Awesome huh?

Sharing this handy button information with all those who blog on Tuesday with EssentiallyJess and you should share it on Twitter, Google or Facebook (or all three) There are buttons below.
 photo fwbksignature_zps702ebc7d.jpg



40 comments:

  1. I had a to research quite a bit when I made my first button.. wish I knew about this site then. great tip!

    Ai @ Sakura Haruka

    ReplyDelete
    Replies
    1. I know I couldn't believe how easy it all turned out to be as well.

      Delete
  2. You've made it sound straight forward, but my head still spins when I think about it!

    ReplyDelete
    Replies
    1. It really is all straight forward Catherine!

      Delete
  3. Thank you for sharing both your knowledge and this awesome site. As a relatively new blogger I'm not quite ready to go my own button (yet!)but I will be bookmarking this post so that it's ready when I'm ready! Rach :)

    ReplyDelete
    Replies
    1. The best things about it all Rach is that it is so easy you can make lots of them if you change your mind and want something different.

      Delete
  4. You make it sound so easy - but you lost me at First things first... :)
    One day I'll do it and credit you for helping me - but I have to think of a logo first,mmmm - Have a great week! Em x

    ReplyDelete
    Replies
    1. Oh Em it really is so simple. You could just use your header with that would look great as a button. And honestly if you ever would like a hand just let me know, I am not an expert but I can muddle my way through the simple!

      Delete
  5. I can't remember the site that teamIBOT recommend, or the tutorial, but it was so straight forward I couldn't believe I didn't do it sooner! I love the new look Rhi. xo Aroha

    ReplyDelete
    Replies
    1. Yep if you google button generators or button code generators there are a few different ones that come up. I don't expect there too be much difference in them really. I actually think I have just about worked out what the code is to just create one myself. Creating a linked image is pretty much the same as well. So many people seem scared by code or HTML that I thought I would do a few posts on just how easy it all is. Thanks for dropping in.

      Delete
  6. Thanks for the tips - I post on IBOT & FYBF so feel bad about not putting up their buttons. Will attempt this week!

    ReplyDelete
    Replies
    1. Yes it is always nice to have up buttons of the memes you join in

      Delete
  7. This seems very easy to follow - even if I probably would have no idea how to do it myself - one thing is for sure - google is my best friend - when in doubt that is the fist place i turn to for help xx

    ReplyDelete
    Replies
    1. Yep google sure does make things easier. It really is pretty simple Josefa, I am sure you could do it

      Delete
  8. Thanks for the tips. I was wondering how to make a button, I think I'd like one, and it looks so easy now!

    ReplyDelete
    Replies
    1. Oh please get one so I can put it on the blog, I think I am fast becoming your biggest fan

      Delete
  9. I'm bookmarking this so if I ever get around to making a button...
    Love the bloggers who simplify the tricky stuff. Have read a few lately.

    ReplyDelete
    Replies
    1. It really is only tricky on the surface, once you look a little deeper most of it is not too bad

      Delete
  10. You're amazing! xx

    ReplyDelete
  11. I don't even use photobucket any more. If you just upload the pic on to your blog, then you can see it in html view, and that will give you a button location to use. Just eliminates that one extra step!

    ReplyDelete
    Replies
    1. Yeah right, I think that it is a little different with blogger though, perhaps photos get automatically load to picssa and you can get it from there though. I should look into. Mind you there are some great photo editing tools on PhotoBucket

      Delete
  12. Thanks for being so generous with your time Rhianna and in sharing your knowledge! I will have to go through these steps myself to see if I can replicate what you did for me - I'm so pleased you have simplified it for the technologically challenged like me!!! You are a star!

    ReplyDelete
  13. So going to have to save this somewhere for a rainy button kind of day. Such fantastic tips here Rhianna. Very clever :) #teamIBOT was here

    ReplyDelete
  14. So awesome for you to share this info, Rhi!!! This is going to be so useful down the track! Thank you! x

    ReplyDelete
  15. Thanks for the tutorial! I really need to do a blog button...

    ReplyDelete
    Replies
    1. It so easy really, you should give it a go.

      Delete
  16. I am sure if I sat down with and read it line by line over and over again I would still be sitting here next week trying to work out what I needed to do. Thankfully, Kate from CCCMummy wanted a button for my blog and offered to make me one- which was very sweet of her - and I LOVE my new button.
    I really should find a little night course to learn how to do all this 'new tech' stuff !!!!
    Have the best weekend !
    Me

    ReplyDelete
    Replies
    1. I am sure you would be able to work it all out, it is just a matter of knowing the right order and where to copy what. I do love you button as well. Hope the weekend goes great for you as well

      Delete
  17. Arrrrgh,I'm still totally confused. I copied and pasted the code for Kirsty's I Must Confess button and it still doesn't show up properly on my blog. Any clues for what I may be doing wrong?

    ReplyDelete
    Replies
    1. Ness I am not sure at all, sorry, I know that you need to make sure you are entering it into the html view option.

      Delete
  18. I wish I had read this last year when I muddled through making buttons and installing social media buttons! Very useful information, thanks for linking at Blog Power Events.
    xx

    ReplyDelete
    Replies
    1. My pleasure thanks for hosting, I actually did one last week on social media buttons as well!

      Delete
  19. Excellent post! I had no idea how to create buttons but it was on my list of things to learn. Thank you! Rachel xx

    ReplyDelete
  20. THANK YOU!!!! I have just made one, came to you via Have A Laugh On Me - hooray! at last!!

    ReplyDelete
    Replies
    1. Oh Seana that is awesome! Congratulations and thank you for giving it a go. Made my night to know that something I had written was of use to others!

      Delete
  21. I love you forever Rhianna! I just created my blog button using you tutorial! Thank you! Sharing this on FB and Pinterest!

    ReplyDelete

Fairy wishes and butterfly kisses to you, thanks for stopping by, it really means a lot, you taking the time so say hi. I try as much as I can to write a reply but if for some chance I don't get to it please know that I always read them.