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.
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.
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.
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 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.
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.
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.
I think this is enough for now. Later on we will try to understand the meaning of every single code above.
 |
| 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>
<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 |
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 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 |
<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 == "BEHIND"'>
<!--
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'/>
</div>
<b:include name='description'/>
</div>
<b:else/>
<div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' 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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<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>
<b:includable id='main'>
<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == "BEHIND"'>
<!--
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='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-position: " + data:backgroundPositionStyleStr + "; " + data:widthStyleStr + "min-height: " + data:height + "_height: " + data:height + "background-repeat: no-repeat; "' 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 + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
<!--Show the description-->
<b:if cond='data:imagePlacement == "BEFORE_DESCRIPTION"'>
<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.
Post a Comment for "Blogger Template With Header Only"