Monday, September 14, 2015

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

post labelling

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
add new label

add label

customize blogger label

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 jenis cloud
Label Display Cloud

label jenis list
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

customize label blogger


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.

customize label blogger
expand widget

tambah link ke home blogger

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
Customize blog label dengan design sendiri dan tambah Link ke Home di bahagian atas Blog


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

6 comments:

uncle gedek said...

This is too complicated to understand for 'orang tua' like me!

baahaha!

anajingga said...

wow codinggggg..menyeramkan saya..singgah petang ke sini.salam ukhwah dari anajingga.com

Khairul Hilmi Sidek said...

copy paste je..

Samantha King said...

Thankful for the helpful sharing! The information is clear and accessible.
Cricket World Cup Download | IPL 2016 Season 9

Madam Enimem said...

this is a very Informative post, I am Glad to read this.
APK Apps Free Downloads | Chef Story App

Naeem Abbasi said...

goood

Post a Comment

Ask me here. Anything. I will answer as I know

Popular Posts

Recent Posts


air asia bloggers community

Unordered List

Text Widget

Pages

Total Pageviews

My Blog List



Google+ Followers