computer-celltricks

Saturday, September 11, 2010

Add The "Add a Gadget" on Header and Blog Posts of Blogger Page Elements

As well as another Content Management System (CMS) base sites (ie : Wordpress, Joomla, Mambo, Drupal etc) Blogger Template consist of Page Elements (header, main, sidebar and footer) and Each element of this page, usually also composed of a few gadgets (the name may be different on each CMS).
Pege Elements are very important. In addition to its function, Elements (Widget) of the page and Gadgets, also affect to the overall look of the pages of our blog.
One of the advantages of a CMS base sites is the Flexibility, In these CMS sites, we could cange the Elements, add or less the Gadgets and also set the appereance (display) of the Page..

When we first create a Blog in Blogger, the Default Templates consisting of 4 page elements: Header, Blog Posts, Sidebar (which consists of About Me, Blog Archive and the Follower), and a Blank Page Elements at the bottom of blog pages (usually filled with Footer). From the above picture seen that the Header and Blog Posts does not have the facility to add gadgets. To optimize the blog and to be able to add various functions (gadgets) in it, then the Header and Blog Posts must be change.

Let's do it by following this steps:

1 . As usually Log in to Blogger
2. On your Dashboard, select the Layout menu, than click the Edit HTML. Under the Edit Template you can see your Blog's HTML. (please Back up first...!)
3. To have an “Add a Gadget” option, under “Header”, Check the "Expand Widgets Templates" then Scroll down and towards the bottom, you will see these lines (use Ctrl+F to find):

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger Test Result (Header)' type='Header'>
<b:includable id='main'>

Change with this :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger Test Result (Header)' type='Header'>
<b:includable id='main'>

This will give you 1 more Page Element in your Header. You can add it more by change the number of maxwidgets="..."

4. To add "Add a Gadget" on the Blog Posts, find these lines

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>

Than change with this:

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='main' var='top'>

Once You have done, don't forget to Save Template... And You will have :