Feb 1, 2010

'crosscol-wrapper' div Below Blog Header

The first thing I do when I start playing with a new blogger template is modify the header to allow me to display either a horizontal navigation bar or ads below the header image. Most of my templates all have that modification in use. Before Blogger unveiled the custom pages you may have noticed that the section they go in, below the header, was already displaying. I spotted it around Christmas when I opened up a new template to modify, but didn't see it on any of the templates I was currently using.

If you have a modified blogger template you may not be able to see the area the new custom Blogger pages are suppose to go. But with a simple modification to your template's code you'll be able to take advantage of the 'crosscol-wrapper,' to either display links to your custom pages or to display ads on your garden blog.

Here is the template I currently use for the Chicago Gardeners blog. As you can see from the Layouts page, it has a modified header that displays a header and a picture below the title. Most of the headers of blogs I author look like this.

Modified blogger header no crosscol-wrapper
When I discovered the new 'crosscol-wrapper' div in a new template around Christmas I started to wonder why it didn't display on any of my blogs and could only be found in new ones. After thinking about it for a few minutes I realized that the one thing all of my templates had in common was that they all had modified headers. Something about the modified headers didn't allow for the 'crosscol-wrapper' div to display, as you can see from the screen shot above.

locked crosscol-wrapper blogger codeThe 'crosscol-wrapper' div is located below the line that reads <div id="'content-wrapper"> . From my experience with Blogger's templates I knew that this section of code is what rendered the new section below the blog's headers that I spotted in that fresh template I opened around Christmas.

unlocked crosscol-wrapper blogger codeI also knew that if I changed 'no' to 'yes' (both highlighted by green arrow) that it would display the link "add a gadget" in the Layout section of the template, so I did. Before modifying your blog's tempalte make sure to backup your template in case something goes wrong.

modified blogger header with crosscol-wrapperAfter changing 'no' to 'yes' and saving the changes to the template's code; I know have this new section displaying in my blog's template below the header. I can use it for the new custom pages or I can display an advertisement or any of the other gadgets available through Blogger.

While this new section that has been added by Blogger kind of replaces the head modification, it can still be used in conjunction with the header modification to give you more options if you'd like to display various gadgets in your header.

1 comment:

  1. This is very helpful for me (I'm a psychology student, so I don't know the first thing about HTML, but I'm quick ;) ). I have another question, don't have the time to scan into your blog to see if you have the answer to this question, so maybe you can help me: How can I change the length and width of a section? In the code I mean.


I hope you find this blog a useful garden blogging resource. Sometimes I may reply to comments with my MrBrownThumb account or I may reply with my Garden Bloggers account. Hope this isn't confusing. If you're looking for gardening information check out "Google For Gardeners"

Note: Only a member of this blog may post a comment.