BloggerFocus: crawler - Tips, Reviews, Blogging and More

As promised from my previous article, I will be sharing a simple guide on how to replace your blogspot static header with a dynamic header. The steps require you to add a few lines of codes to your template's HTML. Once the codes added, it will automatically switch the arrangement of your blog's heading as shown in the picture below.

My page with Static Header(Click To Enlarge)

My page with Dynamic Header(Click To Enlarge)

By having your blog post title appear first instead of your blog main title, you prevent Google crawler from treating all your post as duplicates. If you were to maintain the static header, Google crawler tend to omit results because the crawler sees each post as having the same header, in this case your blog's main title header. That explains the reason why you occasionally see this message appearing at the bottom of your searches (especially when you try searching for your own blog):

"If you like, you can repeat the search with the omitted results included."

Now that you are convinced with the benefit of having a dynamic header, lets move on to adding the dynamic header to your blogspot.

Step One
As usual, backup your blog's template before making any changes to your template HTML.

Step Two
Start by locating the following HTML codes (located somewhere near the top):

<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*

Delete this line from your code:

Copy the dynamic header codes from here:

<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> | <data:blog.title/></title></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/> - BloggerResource</title>
</b:if>

Paste the copied code directly above the CDATA code. It should look something like this:

<head>
<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> | <data:blog.title/></title></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/> - BloggerResource</title>
</b:if>

<b:skin><![CDATA[/*

Your last step is to move the <head> between the dynamic header code and the CDATA code. The final arrangement of your codes should look something like this:

<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> | <data:blog.title/></title></b:includable>
</b:widget>
</b:section>
<b:else/>
<title><data:blog.pageTitle/> - BloggerResource</title>
</b:if>

<head>
<b:skin><![CDATA[/*

Click on the Save Template button.
Congratulations, you have succesfully changed your blog's static header to a dynamic header. Try it out.

Like my review? Subscribe to me now.
Got something to say? Drop me a comment or email me at sksee82@yahoo.com