------------------------

Friday, August 15, 2008

Adding New Page Element Locations

Adding new locations for page elements not only adds flexibility, but also gives you the opportunity to do fun things like add clickable "tabs" at the top of your blog.  This is one of the easiest, and most versatile changes to make.

Safety First - Make sure to save your current template before making any changes - just in case. I, personally, decided that it would take me much more trial and error than I was willing to risk on my main site, so I created this site as a place to play. You can do the same by going to your Dashboard and creating a new blog.

Beware that the code below is missing the first <
This was the easiest way for me to convince Blogger to ignore the code within this post.

Click on LAYOUT, then EDIT HTML 
Scroll to the bottom of the page and look for this: 
div id="header-wrapper">
b:section class="header" id="header" maxwidgets="1" showaddelement="no">

You will want to change the '1' to '3', and 'no' to 'yes' so that it looks like this:
div id="header-wrapper">
b:section class="header" id="header" maxwidgets="3" showaddelement="yes">


You will then need to change the 'no' to 'yes' in two additional locations.  They are listed below:

     div id='main-wrapper'>
     b:section class='main' id='main' showaddelement='yes'>

and also

     div id='content-wrapper'>
     div id='crosscol-wrapper' style='text-align:center'>
     b:section class='crosscol' id='crosscol' showaddelement='yes'/>
     /div>

That's it!  You're Done!  
You won't notice any changes in preview, because you haven't enabled any new elements, so just take the risk, click SAVE CHANGES and then check-out your updated LAYOUT tab.  

No comments: