Blogger Template With Header Only

In this post i try to understand the blogger template for header section. Blogger template consist of thousands line. It is very difficult to understand all the line at one time. My approach is to chop the blogger template bit by bit and try to understand the code.
Blogger Template With Header Only
Blogger Template With Header Only


On previous post i made a trial to understand the minimum code that can be accepted by blogger for its template. I create one template with minimum code that can be saved. The code doesn't show anything. It only contain XML declaration, <html>, <head>, <skin>, <body> and <section>. This template only consist of 9 lines. You can read the article in my previous post.

Read : Minimum Code Blogger Template 

On this post i try to continue my learning bit by bit. The first element that should be exist in a blog is a header.

How to make a header on blogger template?



Blogger has many widget or gadget that can be put as Blogger element. One of them is Header Widget.

As we learned previously, Blogger need at least one section in the blogger template and we should put an id for that section. To refresh our memory, below is the code for Minimum Code Blogger Template.

<?xml version="1.0" encoding="UTF-8" ?>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head> 
<b:skin></b:skin>
</head>
<body>
 <b:section id="header"></b:section>
</body>
</html>   

Lets look at the Layout tab in Blogger Dashboard. We can see a favicon block and a header block with + sign and "Add a Gadget" words.
The Layout of Minimum Code Blogger Template
The Layout of Minimum Code Blogger Template
The header block is coming from section tag that we create before in Minimum Code Blogger Template. That's why blogger requires at lease one section in a blogger template. We can create another block with section tag. We will discuss it latter on other post.

I will add a header widget on header section. To do that i click the Add a Gadget link on Blogger layout.

Configure the Header Widget
Configure the Header Gadget

If we look at the Layout Blogger we can see that there is additional element in header section. Below is the new look of blogger layout with Header Only.

Blogger Layout With A Header Gadget
Blogger Layout With A Header Gadget

How about the code? Blogger add line 6 until 76 to get the header gadget installed. The detail code can be seen in the box below.
Additional Code for Header Gadget from line 8 until 77
Additional Code for Header Gadget from line 8 until 77


  <b:widget id='Header1' locked='false' title='Blogger Template With Header Only (Header)' type='Header' visible='true'>
    <b:includable id='main'>

  <b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
      <!--
      Show image as background to text. You can't really calculate the width
      reliably in JS because margins are not taken into account by any of
      clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
      width if the user is using shrink to fit.
      This results in a margin-width's worth of pixels being cropped. If the
      user is not using shrink to fit then we expand the header.
      -->
      <b:if cond='data:mobile'>
        <div id='header-inner'>
          <div class='titlewrapper' style='background: transparent'>
            <h1 class='title' style='background: transparent; border-width: 0px'>
              <b:include name='title'/>
            </h1>
          </div>
          <b:include name='description'/>
        </div>
      <b:else/>
        <div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot;                      + &quot;background-position: &quot;                      + data:backgroundPositionStyleStr + &quot;; &quot;                      + data:widthStyleStr                      + &quot;min-height: &quot; + data:height                      + &quot;_height: &quot; + data:height                      + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
          <div class='titlewrapper' style='background: transparent'>
            <h1 class='title' style='background: transparent; border-width: 0px'>
              <b:include name='title'/>
            </h1>
          </div>
          <b:include name='description'/>
        </div>
      </b:if>
    <b:else/>
      <!--Show the image only-->
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: block'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
        </a>
        <!--Show the description-->
        <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
          <b:include name='description'/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <!--No header image -->
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
      </div>
      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
    <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'><span><data:description/></span></p>
  </div>
</b:includable>
    <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
  </b:widget>

I think this is enough for now. Later on we will try to understand the meaning of every single code above.

Submit your email below to get the lattest article update:

0 Response to "Blogger Template With Header Only"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel