So I wanted to create my own jazzed up header after The Sibling said that the blog layout was boring. I tweaked around some websites, found a bunch of pictures and went overboard with Paint, Snipping Tool, Picasa and Picnik. I intend to keep creating new banner images and have a 'dynamic' header of sorts for a cheery, fresh look. But my troubles had only just begun.
I am no technology whizkid. My eyes glaze over when I come across HTML code. But what I wanted was a steady feed of pictures that would keep the banner refreshed and this endeavour demanded additional effort towards HTML/Javascript/CSS editing since Blogger has no straightforward solution. It took me the better part of a day to figure out how to do this and hopefully others will also benefit from it. I know it is long winded but this is what finally worked for me.
Put in the required details. I have 3 images that I want to use, so I input those details into the generator. In case the image doesn’t load I should like the blog name to show up, hence the ‘alt text’.
You can play around with the other options. The settings here will produce a banner that is 1100 x 200 pix in size and that will refresh every 15 seconds with one of the 3 images provided.
Hit the ‘Generate’ button at the bottom of the form and copy the code that appears into Notepad.
Click ‘Edit’ for the HTML Gadget and paste the code you just generated into the large box.
Challenge 5 : Removing margin for HTML/JavascriptBy default, the template will include a margin for all gadgets. This will make the HTML Gadget overflow the blog width and look wonky like so. Here, the red banner is the default Blogger Header and the box below it with the seven little girls is the HTML gadget.
A simple CSS edit will fix this.
In the Advanced potion of the Template Designer, put in the following code in the box
#HTML1{
margin-left: 0px
}
This will align the HTML Gadget properly.
Since I wanted just this banner on my blog, I removed the ‘Lithium Ribbon (Header)’ box from the Blogger Design.
The End
Now one would think that this could be achieved by using a Picasa feed for the header and playing around with code on the Blogger layout. There are some solutions for using RSS feeds from Picasa, Flickr, Photobucket etc. The Picasa one didnt work for me as all the images appeared horribly pixelated. This is because, the script was referencing the Thumbnail versions of the images and then scaling the Thumbnails.
The same happened when I tried the Slideshow Gadget and I lost patience when faced with the prospect of trawling through the HTML code of the Gadget and editing it. I couldn't figure out how to do that either.
Good Luck with whatever solution you choose to implement.
I am no technology whizkid. My eyes glaze over when I come across HTML code. But what I wanted was a steady feed of pictures that would keep the banner refreshed and this endeavour demanded additional effort towards HTML/Javascript/CSS editing since Blogger has no straightforward solution. It took me the better part of a day to figure out how to do this and hopefully others will also benefit from it. I know it is long winded but this is what finally worked for me.
Challenge 1 : Content
I wanted a header/banner that was 1100 pix wide and 200 pix high. So I created my images according to these dimensions. By default, all Blogger images are stored on Picasa Googleweb in a folder named after the blog. I uploaded my images into this folder. Challenge 2: Identifying the location of the image
I have a separate post on this. Challenge 3 : Generating code for a rotating banner
Goto http://www.htmlbasix.com/banner.shtml |
| Banner Code Generator |
You can play around with the other options. The settings here will produce a banner that is 1100 x 200 pix in size and that will refresh every 15 seconds with one of the 3 images provided.
Hit the ‘Generate’ button at the bottom of the form and copy the code that appears into Notepad.
Challenge 4: Where should this be uploaded on the Blogger page.
In Blogger-> Design->Page Elements, add an HTML/Javascript gadget under the Header.  |
| Add HTML/Javascript Gadget to Blogger Layout |
 |
| Paste the banner code into the gadget configuration box |
 |
| HTML gadget overflowing the blog width due to margin |
In the Advanced potion of the Template Designer, put in the following code in the box
#HTML1{
margin-left: 0px
}
This will align the HTML Gadget properly.
 |
| Properly aligned banner with no margin |
The End
Now one would think that this could be achieved by using a Picasa feed for the header and playing around with code on the Blogger layout. There are some solutions for using RSS feeds from Picasa, Flickr, Photobucket etc. The Picasa one didnt work for me as all the images appeared horribly pixelated. This is because, the script was referencing the Thumbnail versions of the images and then scaling the Thumbnails.
The same happened when I tried the Slideshow Gadget and I lost patience when faced with the prospect of trawling through the HTML code of the Gadget and editing it. I couldn't figure out how to do that either.
Good Luck with whatever solution you choose to implement.
