Cara Membuat Label Dengan Css

Label di blog adalah kata kunci yang mengkategorikan seluruh isi/konten blog. Label juga merupakan link-link singkat dan sederhana menuju postingan anda. Kebanyakan blogger pemula tidak menggunakan label pada artikel yang di tulisnya, mungkin ini di sebabkan karena mereka tidak tau apa sih fungsinya label tersebut. Sebenarnya apa itu label dan cara menggunakannya. Label yang ada di blogger tersebut sama halnya dengan kategori sebuah tulisan atau artikel yang kita tulis tersebut, atau bisa juga di sebut topik pembahasan.

Fungsi Label yang ada di blogger adalah agar kita bisa mengelompokkan artikel berdasarkan label/kategori yang sama, dan mempermudah pengunjung blog untuk melihat artikel lainnya berdasarkan Label/Kategory. Label juga berfungsi untuk menampikan Related Post atau Artikel Terkait lainnya berdasarkan label artikel.

Tentu sobat pernah atau bahkan sering melihat kalimat Related Post, Artikel Terkait, Related Post atau Artikel Terkait tersebut tidak akan terlihat jika artikel kita tidak ada label/kategorinya. Untuk Menggunakan fitur label yang sudah di sediakan blogger itu sangat mudah. Anda tinggal isi atau tulis label/kategori pada setiap artikel yang anda buat pada bagian labels, letaknya di sebelah kanan bawah.

Dipostingan kali ini saya akan coba bagikan ke pada sobat cara membuat Label keren di Blog

1. Pertama masuk ke Akun Blogger sobat 
2. Pilih Dashboard -- Template -- Edit HTML 
3. Tekan Kontrol F lalu cari kode ]]></b:skin> 
4. Jika sudah ada letakan kode ini 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 #B20000; 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; }