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

19 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

Nurul Azfa Azizan said...

Sangat membantu. Ribuan terima kasih

Megan Taylor said...

What a great Information are there in it.Home Chef Coupon

Anoushka Sakthi said...

Your ideas on how to build an attractive website to grab customers to your business is excellent with the required functionalities. I hope your article was most read for the web related searchers in the internet. Keep updating your ideas, I am waiting for the article.
Regards:
web designing training in chennai | web design training in chennai

Ummu Naufal said...

Assalamualaikum. I would like to remove the 'beauty border line' between posts in my blog and replace them with straight line to make my blog look modern. How to do that? Would you pls look at my blog here notakecilummunaufal.blogspot.my. thanks a lot for your attention.

Careen joseph said...

I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.
google-cloud-platform-training-in-chennai

kevingeorge said...

I simply wanted to thank you so much again. I am not sure the things that I might have gone through without the type of hints revealed by you regarding that situation.

Best Java Training Institute Chennai
Java Training Institute Bangalore

kevingeorge said...
This comment has been removed by the author.
Genial Belt said...

Thanks a lot for posting this post, Your post has always been an informative source for me.
Raw Edge Belt Manufacturers

CIIT Noida said...

Ciitnoida provides Core and java training institute in

noida
. We have a team of experienced Java professionals who help our students learn Java with the help of Live Base Projects. The object-

oriented, java training in noida , class-based build

of Java has made it one of most popular programming languages and the demand of professionals with certification in Advance Java training is at an

all-time high not just in India but foreign countries too.

By helping our students understand the fundamentals and Advance concepts of Java, we prepare them for a successful programming career. With over 13

years of sound experience, we have successfully trained hundreds of students in Noida and have been able to turn ourselves into an institute for best

Java training in Noida.

java training institute in noida
java training in noida
best java training institute in noida
java coaching in noida
java institute in noida

owen morris said...

Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

Hadoop training in bangalore

owen morris said...

Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

Hadoop training in bangalore

owen morris said...

Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

Hadoop training in bangalore

Vikky cmd said...

Hey, would you mind if I share your blog with my twitter group? There’s a lot of folks that I think would enjoy your content. Please let me know. Thank you.

Devops Training in Chennai

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