Add Home Button to Blog Header and Customize Blog Labels

To increase SEO (Search Engine Optimization) score for your blog, it is a very wise idea to use label for all your blog post. Default label given by simple template in Blogger.com is too simple and not so much attractive. I start using label after realizing a lot of blog tycoon are using labels in their blog. In this post, I will share on how to:

1. Create label on post
2. Display labels in your blog header area
3. Use CSS to customize labels look
4. Add a home button inline with labels (by default no home button provided except for the post footer)

1. Create label on post

After completing your new post, under the Publish button there is an area for Labels, Schedule, Permalink, Location, Search Description and Options. Click on Labels area and  fill in your post label. Then click on Done

2. Display labels on your blog header area

Go back to your blog dashboard then click on Layout. Click on add-gadget in cross column section and choose Labels. 

In title box, fill in your label list title, modify all the other options as you wish. In Display area, choose either List or Cloud. Untick Show number of posts per label to hide post count for every label. Those numbers are usually hard to customize but it's up to you.

Label Display Cloud

Label Display List

Your blog labels look different than the picture above?Don't worry, read on

3. Use CSS to customize labels look

This part includes blog template HTML code editing. Backup your template before modifying any HTML code

From your blogger dashboard , click on Template-Customize-Advanced-Add CSS

Insert codes below in the Add CSS section. You can modify Font style, Font Color, mouse hover color and other styles. Click Apply to Blog to save this changes

.label-size{

margin:0 2px 6px 0;

padding: 3px;

text-transform: uppercase;

border: solid 1px #C6C6C6;

border-radius: 3px;

float:left;

text-decoration:none;

font-size:10px;

color:#666;

}

.cloud-label-widget-content{

text-align:center

}

.label-size {

background:#ffffff;

display:block;

float:left;

margin:0 3px 3px 0;

color:#ffffff;

font-size:11px;

text-transform:uppercase;

}

.label-size a,.label-size span{

display:inline-block;

color:#2E2E2E !important;

padding:6px 8px;

font-weight:bold;

}

.label-size:hover {

background:#E2E2E2;

}

.label-count {

white-space:nowrap;

padding-right:3px;

margin-left:-3px;

background:#ffffff;

color:#fff !important;

}

.label-size {

line-height:1.2

}

4. Add a home button inline with labels (by default no home button provided except for the post footer)

Your Labels now show all labels tagged in your blog posts but there is no Home button to return to your blog homepage. To insert this Home button, also needs you to modify your blog template HTML codes. Backup your template before making any changes for your own safety.

From your blogger dashboard, click on template-Edit HTML then click on Jump to Widget and choose label1 or any names given in add gadget step. Then expand the codes for label1 and codes for main by clicking on small arrow beside the line number of those 2 codes.

Insert the codes below right after first <ul>  label1 scope. These codes are for list display type labels.

<!--add home to label type list-->

<li><a class='home-link' expr:href='data:blog.homepageUrl'>Home</a></li>

<!--add home to label type list-->

Insert the codes below right after first <b:else/> after last </ul>. These codes are for cloud display type labels.

<!--add home to label type cloud-->

 <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'><a class='home-link' expr:href='data:blog.homepageUrl'>Home</a></span>

<!--add home to label type cloud-->

Click on Save Template button to you save your blog's modified HTML codes and cick on View Blog to view the results

Good Luck

Read This Got This : $25K for solving a riddle

Read This Got This : 4 ways to eat keropok lekor

Read This Got This : Google analytics for blogger