Saturday, 19 October 2013

Blog Layout Tips & Tricks #6: How To Make A Blog Button & HTML Grab Code

Along with how to make 'tabs', how to make a blog button is the most frequently asked question in my email box. It's one of the easiest demos to do and is a good way to 'ease yourself in to' HTML if you're not very confident. In my experience, when I've button swapped with a lot of bloggers, I'll ask for their code and their reply will be something like "code? I don't have one of those?" but in honesty, swapping buttons using a hyperlink is a bit tedious for bloggers, especially when you swap with lots of people. You'll appreciate how quick and easy 'grab codes' can make your life once you've learnt how!
For this particular tutorial I'm using Picmonkey and Mycoolrealm, although there are lots of different programs and sites that can recreate the same thing. These are the sites I personally use and find the easiest to follow.

It's sort of 'customary' for your blog button to be either 200x100 or 200x200, a sort of unwritten blogging 'rule'. However don't feel like you NEED to stick to this. I believe mine is slightly bigger on one measurement as the text wouldn't fit on to a 200x100 box. It's also advised you use a white background if you round the corners of your blog button. Otherwise, those with coloured sidebars will have annoying white borders around the images. Using Picmonkey you can make the corners transparent so look out for that. If not, maybe try and stick to white for the convenience of the bloggers you are swapping with, remember they may be quite a 'perfectionist' about their layout, so try to keep things as pretty as possible, even if you aren't too bothered.

To start, I create a simple box shape with the attributes 200x100 (or 200x200) and save. Mine is coloured grey in this demo so it stands out against my white post background. I use Photoshop software to create the box, although simple, free, Paint software does the exact same thing. You could definitely create the entire button image on Paint or PS very easily. For those who want it a bit more fancy or with different fonts, Pic Monkey is a simple, free*, online editing website. Upload the simple box image to Pic Monkey, add in the text, images and effects you want and save!

Upload the image to photo-album style site. An account on one of these sites is essential if you are to do any kind of blog design work yourself. I use Photobucket, it works perfectly for what I need. Upload the image saved from Pic Monkey and view it. Find and copy the 'Direct Link'. On Photobucket this is on the right hand side of the page. By clicking the box it will automatically copy it for you. 

Go to Mycoolrealm and fill in the boxes with your blog URL and title. Paste the 'Direct Link' we took from Photobucket in to the Image URL box. Play around with the options below the boxes to get a style right for your own personal layout. Press Preview > Get Code > Scroll Down > Copy The Code. Go back on to Blogger > Layout > Add Gadget > 'HTML/Javascript' > Paste The Code > Save. Now view your blog and notice the button with grab code sat in your sidebar! The code is the part other bloggers will copy in to their own 'HTML/Javascript' gadgets to add your button! No hard work for you once your grab code has been created!

Remember you can follow AIFA on Bloglovin' and Twitter!


  1. Amazing post! Found this so useful and have now added my blog button to my blog ;) My current one is a draft kind of one which I quickly made by following this tutorial, but I'll hopefully be making a better one! Thanks for writing this :)

  2. nice post !!! following ur blog here. hop u do the same :)

  3. Ohmygoodness! This post helped me so much! I'd spent hours looking for a tutorial I could understand until Elise recommended this to me on twitter! This helped no end! THANK YOU! :)


Thanks for taking the time to comment! I try to reply as much as possible!