Cara Mudah Membuat Label Cloud Unik Berwarna pada Blog
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:
- Pilih Template pada menu Elemen Rancangan
- Pilih Edit HTML >> Cari kode ]]> </b:skin> dengan menggunakan Ctrl - F untuk mempermudah pencarian
- Kemudian Copy dan Paste kode berikut ini tepat sebelum kode ]]></b:skin>
/*--------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.
Salam Blogger,
h72
0 komentar:
Post a Comment
No spam...