How to Make A Blog Button (For Dummies)

Aug 2, 2012 by jbmumofone+

In the run up to my one year blogoversary I have been re-visiting some old posts. Here is one that I wrote for the wonderful Love New Blogs. I am posting it here in case any of you guys missed it and may find it a useful one.

So, way back in August I began writing my blog, Mum of One.  I thought it might be fun but honestly didn’t expect to keep at it for more than a month or two.  However within a week I was hooked. I met so many other lovely parent bloggers, I joined twitter, and I discovered the really fun side of blogging.  I also soon realised a fantastic way of meeting other bloggers and discovering fabulous new blogs was by joining in with memes like Silent Sunday and Saturday is Caption Day.

Before long I decided that I wanted to have a go at running my own but noticed that most of the others asked their entrants to link back to them via a blog badge or button. I decided to try and make one myself. Now, I should probably mention here that I am NOT AT ALL experienced with computers and I had never before heard of html code.  I still have no clue what html even stands for, nor do I care really.

Now there are some really helpful posts out there on how to do this and I spent an entire day painstakingly copying html code into Word, carefully inserting my details, praying that I wouldn’t accidentally delete a ( or a <  and inadvertently blow up the internet, and pasting into the html editor on my blog.

What I didn’t discover until many hours later is that wordpress.com doesn’t like you doing this and, without my knowing, would delete bits of the code so I either ended up with just the picture but no code for others to grab, or just the code in a box with no picture.

Finally after much laptop-slamming, hair-tearing, screaming and weeping I came across the most MAGICAL website, My Cool Realm.  I might just want to marry it’s author. So, here it is…how to make your own blog button in 5 easy steps:

1.  Choose your image and upload somewhere to resize.  I use photobucket as it is pretty straightforward and free.  125 x 125 px is generally a good size for a blog button.  You can also easily edit your image and add text etc easily here.

 

 

Here if you hover on adjustment, bottom left, the above menu will appear and click on resize, bottom row, second from left.

 

 

2. Type 125 into width and height boxes, click apply and then save.

 

3. Once saved Photobucket will show you a number of links to your image on the right of the screen.  Click on Direct link to copy the code.

 

 

4. Next, head on over to My Cool Realm, http://www.mycoolrealm.com.

 

 

You then need to paste your direct link code from photobucket into the Your Image URL box. Also fill in your blog name and blog URL boxes. If you are on wordpress.com for container type you will need to click on Pre, for blogger or wordpress self-hosted you can click on Textarea. Then click preview and…TADA, there is your button.

 

 

5. Finally, if you are happy with it click Get Code.  Your button code will appear in a box at the bottom of the screen, click select and your code is now ready to be pasted on to your blog in the html editor.

 

And here is mine!

 

<div align="center"><a href="http://www.jbmumofone.com" title="Mum of One"><img src="http://i1109.photobucket.com/albums/h433/jbmumofone/How%20to%20make%20a%20blog%20button/Blogbuttonimage-1.jpg" alt="Mum of One" style="border:none;" /></a></div>

 

Feel free to grab it