Label adalah disebut juga kategori postingan artikel, banyak ragam orang menampilkan label sesuai selera masing-masing ada yang tetap bertahan dengan standar blogger dan tidak sedikit yang menggunakan sentuhan artistik dengan menambahkan script tertentu di tubuh Blog sehingga tampilan label benar-benar keluar dari aslinya. Sebelumnya saya sudah posting tentang label bergerak apabila ditunjuk mouse
yang merupakan salah satu bentuk lain dari tampilan label.Banyak sekali
keuntungan yang didapat dengan menampilkan label/ kategori pada blog
selain memberikan navigasi kepada pengunjung juga memberikan gambaran
umum kepada mesin pencari untuk melakukan crawl/ index dari label. Dan
sangat diperlukan sekali keberadaan label bagi blog yang memiliki banyak
posting.
Nah, kali ini saya akan memberikan tutor cara membuat label cloud unik dan berwarna, so...ikuti langkah-langkahnya berikut ini :
- Login ke Blogger.com
- Pilih Elemen Rancangan >> Pilih Add Gadget >> Pilih Label dan atur settingan seperti dibawah ini
- Kemudian susun Tata Letaknya
- Simpan Gadget.
Sekarang tambahkan style label cloud berwarna yang dimaksud:
/*--------Cloud Label from www.dianmotorcell.blogspot.com ------------*/
#Label1 a{outline:none;
border: 1px rgba(0,0,0,0.2) solid;
padding: 4px 6px 4px 12px;
text-decoration:none;
color:black;
white-space: nowrap;
font-family: arial;
font-size: 10px;
font-weight: bold;
position: relative !important;
background: #58E6F9;
float:left;
padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px;
}
#Label1 a:hover {
background:#5BFDD5;
color:#5B5BFD;
}
#Label1 a:active {
background:#EC88C9;
}/*-------End cloud Label style---------*/
#Label1 a{outline:none;
border: 1px rgba(0,0,0,0.2) solid;
padding: 4px 6px 4px 12px;
text-decoration:none;
color:black;
white-space: nowrap;
font-family: arial;
font-size: 10px;
font-weight: bold;
position: relative !important;
background: #58E6F9;
float:left;
padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px;
}
#Label1 a:hover {
background:#5BFDD5;
color:#5B5BFD;
}
#Label1 a:active {
background:#EC88C9;
}/*-------End cloud Label style---------*/
- Simpan Template dan lihat hasilnya.
Demikianlah cara membuat label cloud berwarna pada blog.
Semoga bermanfaat.


Tidak ada komentar:
Posting Komentar
Untuk Pengunjung Usahakan Berkomentar yang sopan.