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.