Cara Mengganti Penampilan Label Lebih Keren ( Bag.1 )

Label atau yang lebih kita kenal dengan istilah kategori merupakan widget bawaan blogger yang bisa kita pasang di blogspot, fungsi dari label atau kategori adalah untuk mengelompokkan postingan sehingga memudahkan kita maupun pengunjung untuk membaca sesuai kategori yang di inginkan.

Secara defult penampilan label atau kategori pada blogger adalah daftar dan cloud, yang apabila kita pasang hasilnya sangat sederhana dan umum .
Nah jika sobat blogger tertarik ingin merubah atau mengganti penampilan label agar lebih keren sobat bisa ikuti panduan yang ingin saya bagi pada postingan kali ini, berikut penampilan label yang saya maksud :

Lumayan keren kan?

Selain penampilanya yang keren fitur ini juga memiliki beberapa kelebihan diantaranya memiliki efek goyang apabila mouse di arahkan ke salah satu label tertentu, memiliki efek blur pada halaman label yang di kunjungi dan beberapa efek lainya.

Agar sobat tidak penasaran sobat bisa langsung mencobanya, berikut langkah sederhana cara mengganti penampilan label lebih keren ( bag.1 ) :

1. Setelah login ke akun blogger sobat bisa langsung ke pengaturan Template
2. Klik Edit HTML
3. Cari kode ]]></b:skin> ( gunakan Ctrl+F untuk pencarian lebih cepat )
4. Letakkan kode di bawah tepat di atas kode ]]></b:skin>

 .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;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
                    M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a  {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover  {
text-decoration: none;
}

       5.  Lihat Pratinjau, jika tidak ada kesalahan silah sobat Save Template

Demikian sedikit penjelasan tentang cara mengganti penampilan label lebih keren ( bag.1 ), tunggu postingan selanjutnya pada bag.2 yang tentunya akan menawarkan hal yang berbeda.
Salam Blogger