Customize blog label dengan design sendiri dan tambah Link ke Home di bahagian atas Blog

Untuk menaikkan score SEO (Search Engine Optimization) blog, adalah amat digalakkan untuk menggunakan label untuk setiap post yang dipublish di blog masing-masing. Default label yang diberikan oleh template asas blogger adalah teramat simple dan tidak begitu menarik. Saya mula menggunakan label selepas menyedari bloggerblogger otai semuanya menggunakan labeling pada blog diorang. Dalam post kali ni, saya akan menerangkan :

  1. Cara untuk membuat label pada post
  2. Cara untuk mengeluarkan link untuk label di bahagian atas blog
  3. Menggunakan CSS untuk mencantikkan label
  4. Tambah link ke Home sebaris dengan label (by default tidak ada link ke home)

1. Cara membuat label pada post

Selepas siap menaip post terbaru, di bawah butang Publish, terdapat ruangan untuk Labels, Schedule, Permalink, Location, Search Description dan Options. Klik pada ruangan Labels dan tulis label untuk post tersebut. Kemudian klik Done.
post labelling

2. Cara untuk mengeluarkan link untuk label di bahagian atas blog

Balik semula ke dashboard blog anda, kemudian pilih layout. Klik pada add-gadget di ruangan cross column dan pilih Labels
add new label
add label

customize blogger label

Di ruangan title, tulis tajuk untuk label list anda, pilih option-option yang ada mengikut kesukaan anda. Pada ruangan Display, pilih sama ada List atau Cloud. Untick Show number of posts per label untuk menghilangkan bilangan post bagi setiap label. Nombor ni biasanya akan mencacatkan keindahan label. Terpulang pada selera masing-masing.
label jenis cloud
Label Display Cloud



label jenis list
Label Display List
Label yang anda lihat di blog anda tak sama dengan gambar di atas kan? Sabar, teruskan membaca

3. Menggunakan CSS untuk mencantikkan label

Part ni memerlukan anda untuk edit HTML code bagi template blog. Untuk keselamatan, sila backup template sebelum mengubah kandungan HTML code template blog.
Dari dashboard blog anda, pilih Template-Customize-Advanced-Add CSS
customize label blogger
Masukkan kod di bawah di ruangan Add CSS. Anda boleh mengubah  Font style, warna Font, warna yang bertukar apabila pengguna hover mouse atas label dan lain-lain. Klik Apply to Blog setelah selesai

.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. Tambah link ke Home sebaris dengan label (by default tidak ada link ke home)

Label yang ada sekarang hanya menunjukkan semua label yang ditanda pada setiap post dalam blog anda tetapi tidak ada link untuk balik semula ke muka depan blog(Home). Untuk menambah link ini, juga memerlukan sedikit pengubahsuaian dalam kod HTML bagi template blog anda. Sila backup template anda sebelum membuat perubahan pada kod HTML untuk keselamatan. 
Seperti biasa, dari dashboard blogger, klik pada template-Edit HTML kemudian tekan butang Jump to Widget dan pilih label1 atau nama yang anda beri dalam add gadget tadi. Kemudian expand code bagi label1 dan code bagi main dengan menekan anak panah di sebelah nombor line kedua-duanya.

customize label blogger
expand widget

tambah link ke home blogger
Masukkan kod dibawah betul-betul selepas <ul> yang pertama dalam skop label1. Kod ini untuk label display type list.
<!–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–>

Masukkan kod di bawah pula selepas <b:else/> yang pertama selepas </ul>  yang terakhir. Kod ini untuk label display type cloud.
<!–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–>
Selepas siap semua sekali, tekan butang Save Template untuk save kod HTML blog anda dan tekan View Blog untuk melihat hasil kerja anda.

Customize blog label dengan design sendiri dan tambah Link ke Home di bahagian atas Blog

8 thoughts on “Customize blog label dengan design sendiri dan tambah Link ke Home di bahagian atas Blog

Leave a Reply