Create A Banner Or Button
Now, I actually posted this a couple of days ago, and straight after posting my sidebars lost a few of their widgets, so I had to delete the post and have my fantastically helpful hosting company re-build the site from before posting this post (Paula and Dan from D9Hosting are fabulous, whenever I have a problem they get back to me personally within hours!).
Never mind, I still want you to have this post, I might just try and leave out the screen shots I did – you will still be able to follow, trust me. So here it goes:
Have you ever wondered how to create a flash looking banner or button to advertise your website? I certainly did, and a little while ago I actually found out, from one of my fellow webmasters Maya, who runs a very successful blog for beach lovers called Completely Coastal. I came across her blog searching for possible sites for a link exchange to my beach site. And there it was, in her sidebar on the right hand side – a great button to advertise your site, even with a copy-and-paste html code for anybody to grab it and display it on their site! Of course I needed to know how she did it. And Maya was so nice to explain it to me.
One thing I changed in her instructions, though – she said she created the button with Paint.net, and I tried that, but I have to say I found the program too complicated for me, I just couldn’t work it out. (Blonde? 😉 )
The software I have been using to create my banner is called XHeader, and it is probably one of the best free website tools I have downloaded so far. It is absolutely free and so easy to use, it’s not funny. 😉 In fact, all the header graphics for this site and for my site Healthy Diet Weight Loss have been created with XHeader. It really comes in handy for all sorts of graphics for your site.
So after Maya explained to me how to create a banner or button for my sites to advertise them, I played around with XHeader for a while to create a nice 125×125 graphic. If you have a look at my website Lighthouse Home Decor
(note: this is my Beach Decor website, and I am starting to build backlinks to some of the inner pages of it now to get the pages ranked in the search engines, too, not just the home page, that’s why I use another one of my keyword phrases “Lighthouse Home Decor”; this will over time give me more visitors to the site through my other keywords, too),
you will notice the new “button to grab” on the left hand sidebar towards the bottom. This is exactly what Maya has on her site, too, and that’s what I want to show you. You can create all sorts of sizes of banners or logos with XHeader.
When you create a button or banner for your site, I believe it is important that you keep it in line with the theme of your site, like colors, pictures, etc. What I have done for my Lighthouse Home Decor site is just grab a piece of the site graphics and incorporated it into the button (you find the crab and the thong at the bottom of the site 😉 )
So, here is what you do:
- Download your free software XHeader and install it on your computer.
- Have a good play with the software – you can’t do anything wrong! Here is what I usually do:
- Click on “new”
- Click “Create a blank header”
- Enter the size of your graphic. Now, the square little button is 125 x 125 pixels. But you could really make it any size you want.
And then just start having a go at creating a nice button! I usually start by importing an image, then adding text and transparency etc.
Once you have created your masterpiece, just save it as .jpg in a location of your choice. (I always go for “superb” size).
Once you have done that, you need to upload the image to your website. I have a self-hosted WordPress blog, so I uploaded it (from the folder I had saved it to) via my free FTP program FileZilla to my website (wp-admin/images/YourImageTitle.jpg). You need to do that because you will need an URL for the image.
TIP: If you do not know much about file transfers via FTP, there is another solution: Photobucket, a free image hosting site. Just become a member of photobucket, and you can upload any number of pictures or graphics from your computer to your account in photobucket, and each of the photos will then have an URL for you to use.
So, once your image is uploaded to your website (or Photobucket) and you know the URL, here is the magic:
To display the button on your site, including the Text window with html code for other people to “grab it”, you need to use this code:
<img alt=”Your keywords for your site” src=”the URL of your Image“/><br>
<textarea style=”width: 125px; height: 125px” name=”textfield”><a href=”The URL of your Website” target=”_blank” title=”The Title of your website“><img border=”0″ src=”the URL of your Image“/></a></textarea>
The red colored text is what you will have to fill in with your details. Voila!!! Isn’t that cool??? I thought so.
…I am going to upload my new button for this site straight after doing this post, so check out my sidebar and let me know what you think!! And if you like, you can also grab my new button and put it on your site… 😉
Thanks, Maya, for your very much appreciated help!
I would love to hear back from all of you who try this out, to see how you go. And of course, if you create a banner or button for your website or blog like I have done with this method, let me and my readers know and leave us a link to your site so we can check it out!