|Not these buttons.|
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.
|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.|
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;"><div align="center"><a href="http://myhometruths.com" title="My Home Truths" target="_blank"><img src="http://i1186.photobucket.com/albums/z380/lourhi/I-Must-Confess-Button-150x150_zpsa33b2bb0.jpg" alt="My Home Truths" style="border:none;" /></a></div></textarea>
Which then magically turns to this when entered in a HTML box
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.
I had a to research quite a bit when I made my first button.. wish I knew about this site then. great tip!ReplyDelete
Ai @ Sakura Haruka
I know I couldn't believe how easy it all turned out to be as well.Delete
You've made it sound straight forward, but my head still spins when I think about it!ReplyDelete
It really is all straight forward Catherine!Delete
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
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
You make it sound so easy - but you lost me at First things first... :)ReplyDelete
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
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
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 ArohaReplyDelete
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
Thanks for the tips - I post on IBOT & FYBF so feel bad about not putting up their buttons. Will attempt this week!ReplyDelete
Yes it is always nice to have up buttons of the memes you join inDelete
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 xxReplyDelete
Yep google sure does make things easier. It really is pretty simple Josefa, I am sure you could do itDelete
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
Oh please get one so I can put it on the blog, I think I am fast becoming your biggest fanDelete
I'm bookmarking this so if I ever get around to making a button...ReplyDelete
Love the bloggers who simplify the tricky stuff. Have read a few lately.
It really is only tricky on the surface, once you look a little deeper most of it is not too badDelete
You're amazing! xxReplyDelete
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
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 PhotoBucketDelete
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
Awe shucks. My pleasure lovelyDelete
So going to have to save this somewhere for a rainy button kind of day. Such fantastic tips here Rhianna. Very clever :) #teamIBOT was hereReplyDelete
So awesome for you to share this info, Rhi!!! This is going to be so useful down the track! Thank you! xReplyDelete
No worries Grace, happy to helpDelete
Thanks for the tutorial! I really need to do a blog button...ReplyDelete
It so easy really, you should give it a go.Delete
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.ReplyDelete
I really should find a little night course to learn how to do all this 'new tech' stuff !!!!
Have the best weekend !
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 wellDelete
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
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
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.ReplyDelete
My pleasure thanks for hosting, I actually did one last week on social media buttons as well!Delete
Excellent post! I had no idea how to create buttons but it was on my list of things to learn. Thank you! Rachel xxReplyDelete
THANK YOU!!!! I have just made one, came to you via Have A Laugh On Me - hooray! at last!!ReplyDelete
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
I love you forever Rhianna! I just created my blog button using you tutorial! Thank you! Sharing this on FB and Pinterest!ReplyDelete