Monday, 12 July 2010

DIY: How to create a banner




It took me quite a while to figure out how to create a banner but... tada!!! If you see the post below it seems that i finally made it! :o)

After popular request I am now writing down the relevant steps. And here we go...


Method 1: The hard way

Step 1
Create the picture of your banner.

Step 2
Create a post that has the picture of the banner inside. Give a title to the post for example Banner. Might be good to add some text as well so you can locate the post later in the html code (steps below).

Step 3
You might find this step quite confusing but please do not panic! :oP
After you publish the post go to your main blog page, right click on your screen & select the View Source. Here you can see the code of the whole page in HTML format.

What you need to do in this step is to track the code of the post you just published that contains the banner. An easy way to do this is to press CTRL + F. A pop-up window will appear where you can search for the title of the post e.g Banner or the text you entered. You are looking basicly for the picture's url. The url of the picture should be like src="something/nameofyourpicturefile".
See my code found in blue in the previous post as a guidance for what you are after. Every details should be the same as my code except the http section where there should be two links:
* the link of your post (href)
* the link of your picture (src as described above).

Copy the code somewhere like a word document or text file. Replace the href, src, height, width appropriately.

Step 4
Go to your blogs design view and click to Add a Gadget & add HTML/JavaScript. In the content section paste the code you just changed above. This step will act as a hyperlink to your post.

Step 5
Now go back to edit your post. Paste again the code that you just pasted in your HTML/JavaScript gadget. Then you would be able to see the banner picture. In order share the code with your followers, substitute the following:
* where you have  substitute it with   <
* where you have  >  substitute it with   >


Method B: The easy way

Step 1
Create the picture of your banner.

Step 2
Go to your blogs design view and click to Add a Gadget & add Picture. In the link section paste the URL of your blog & then add your blog banner image from the browse section. Shrink to fit will help your image to shrunk to 220 pixels wide (if is bigger than this). The Title or Caption section is optional.

Step 3
For your followers. Once you have your blog banner on your blog, the followers can get the blog banner in the following way:

* by right clicking on the blog banner image & then clicking to Save Picture As somewhere in their computer
* by going in their blog design view & clicking to Add a Gadget & add Picture
* finally in the link section by pasting the URL of your blog & then adding your blog's banner image


Tada! You now have a banner for your blog! Ping me if you have any questions that I can help with...

3 comments:

Becky said...

This is really helpful!

Veronika said...

Very helpful tutorial, I might have to have a go at this myself, thanks! :)

Joyti said...

Thank you for posting this...I am going to save it 'cause I am sure it will be very helpful to me :)

ad 8