In need of a good collection of free, easy to modify headers and code that includes a customizable navigation bar? Look no further. I’m excited to share a series of sliced headers with you today for which all you need to do to use is add text to and copy and paste some HTML code. I will explain exactly what that means in this tutorial and offer all the resources you need to get to a header like this without needing anything more fancy than MS Paint. Of course you can edit with any (more advanced) photo editing tool like Gimp (open-source and very advanced), Photoshop (expensive but my absolute favourite), Picasa (free online), etc:
Step 1: Download your header of choice
All the different headers that I made, are available for download in one zip file. Go to the bottom of this page and click on the download link. Then, pick the header you like best and move to step 2. For your reference, the table below shows the options and file names.
Step 2: Download the header pack
You will find a download link at the bottom of this page. Click on it and you will get a file with all the headers. You will only need the folder of the header of your choice. Use the reference image to find out the file name for your header of choice.
Step 3: Edit the text
You will see that each folder contains 7 images. Image 1 is the top image on which you will write your blog/site name, images 2 – 7 are the menu items.
Open up your favourite image editing programme, add the text to the image and save under the same name. Click here if you need help with that in a free tool like Picasa.
Step 4: Save images online
Save your images online to Dropbox (this is a referral code) and get ready to collect the links for each image OR use Photobucket and get ready to collect the links for each code from there for the next step.
Step 5: Paste code into widget
Next step is to copy the code below in the download pack into an HTML widget in Blogger or WordPress.
<table id="Table_01" width="1000" border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td colspan="6"><A HREF="LINK TO PAGE 1 HERE"><img src="IMAGE URL 1 HERE" alt="" width="1000" height="204" /></a></td> </tr> <tr> <td><A HREF="LINK TO PAGE 1 HERE"><img src="IMAGE URL 2 HERE" alt="" width="167" height="46" /></td>
<td><A HREF="LINK TO PAGE 1 HERE"><img src="IMAGE URL 3 HERE" alt="" width="166" height="46" /></a></td>
<td><A HREF="LINK TO PAGE 1 HERE"><img src="IMAGE URL 4 HERE" alt="" width="167" height="46" /></a></td>
<td><A HREF="LINK TO PAGE 1 HERE"><img src="IMAGE URL 5 HERE" alt="" width="167" height="46" /></a></td>
<td><A HREF="LINK TO PAGE 1 HERE"><img src="IMAGE URL 6 HERE" alt="" width="166" height="46" /></a></td>
<td><A HREF="LINK TO PAGE 1 HERE"><img src="IMAGE URL 7 HERE" alt="" width="167" height="46" /></a></td>
</tr> </tbody> </table>
Replace the link in the IMG tag (the bit in between brackets – leave the brackets up) with a link to your image. Replace the A HREF code with the link you want the image to point to when you click on it.
And that’s all there is to it!
Recent Comments