Friday, April 12, 2013



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

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 :

Finnaly we have a "New" Blogger Page Element ready to optimized...

Simple isn't it...?


Adding the gadget

Go to Design, Page elements. Click Add a Gadget (any link will do, we will move the gadget to proper place afterwards).

Write the text/html you want in your "sticky post", click Save. I suggest to not use any title, it helps the correct alignment when gadget is hidden.

Now drag the new gadget to top of blog posts, like this:


Hide the gadget on other pages than first

Open template html for editing. Before </head> add this:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style type='text/css'>
div.main div.widget.HTML .widget-content { display:none; }
div.main div.widget.HTML { margin-bottom:-30px; visibility: hidden;}

Depending on your template you might have to change the value -30px to adjust the position of blog texts. -30px works for "Simple" template.

How to mimic a post in gadget html

Here's a "template" you can use in HTML/Javascript gadget contents to make the gadget have post-like title, spacing and body text.

Data provided by - Download Raw - See Original
  1. <h3 class="post-title">Sticky post (gadget)</h3>
  2. <div class="post-header"> </div>
  3. <div class="post-body">
  4. Some text.<br />
  5. <br />
  6. Some more.
  7. </div>

This template works at least in "Simple" and "Awesome Inc." templates, probably in others, too.

No comments:

Post a Comment

Blogger Wordpress Gadgets