Cara Membuat Kategori/Label Default Blogger jadi Keren

Label adalah menandakan dan menempatkan suatu postingan jadi ber-kategori. Perlu diketahui juga, bahwa Blogger hanya menyediakan gadget label masih tampilan sederhana. Untung saja Blogger bersifat open source yaitu bebas mengedit kapan saja. Sekarang bagaimana kita ubah saja Widget default label pada blogger menjadi keren dengan menggunakan kode CSS. Label berfungsi untuk pengkategorian suatu artikel dengan judul tertentu yang berguna memudahkan pengunjung dalam memilih artikel dalam satu kategori sesuai dengan keinginan pembaca, karena bisa menampilkan berupa link yang mengarah suatu artikel dengan kategori tertentu.

Baca Juga :

• Cara Membuat Related Post Thumbnail&Snippet Responsive
• Cara Membuat Labels Keren, Responsive!

Screenshoot :

Preview Label Cloud :

Cara Membuat Label/Kategori Cloud Pada Blogger jadi Keren

Cara Pertama :

1. Buka Blogger - Kemudian login.

2. Dashboard - Template.

3. Edit HTML.

Proses Pembuatan :

1. Temukan <CTRL+F> kode ]]></b:skin> atau </style>

2. Copy&paste kode berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

/* CSS Label */
.widget-content.list-label-widget-content {padding:0;}
.widget-content.cloud-label-widget-content {display:inline-block;}
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5 {font-size:100%;opacity:1}
.cloud-label-widget-content{text-align:left;padding:10px;}
.label-count {background:#fff;white-space:nowrap;display:inline-block;padding:5px 7px;margin-right:3px;border:1px solid #FF9934;border-radius:4px;}
.label-count:hover {background:#fafafa;color:#222;border-radius:4px}
.Label li {background:#fff;color:#666;padding:5px;text-align:left;width:100%;border-bottom:1px solid #eee;transition:all .3s ease-out;}
.Label li:hover {background:#fff;color:#FF9934;}
.Label li:before {content:"\f105";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:inherit;padding-right:4px;
color:#666;transition:all .3s ease-out;}
.Label li:hover:before {margin:0 0 0 5px;padding-right:4px;color:#29abe2;}
.Label li a {color:#666;transition:all .3s ease-out;}
.Label li a:hover {color:#FF9934;}
.Label li span{float:right;background-color:#999;color:#fff;line-height:1.2;margin:0 5px 0 0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:12px;transition:initial;border-radius:2px;}
.Label li span:hover{background-color:#FF9934;color:#fff}
.label-size{background:#fdfdfd;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;border:1px solid #FF9934;transition:all 0.3s;border-radius:5px;}
.label-size:hover{background:#FF9934;border-color:#FF9934;}
.label-size a {display:inline-block;color:#444;padding:8px 10px;
font-weight:400;}
.label-size a:hover {color:#fff;}
.label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#444;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
.Label li:hover {color:#29abe2;}
.Label li a {color:#aaa;transition:all .3s ease-out;}
.Label li a:hover {color:#29abe2;}
.Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-family:'Arimo',sans-serif;font-size:13px;font-weight:400;border-radius:2px;}
.Label li span:hover{color:#29abe2}
.label-size{background:#fff;color:#fff;display:block;float:left;margin:0 4px 4px 0;font-family:'Arimo',sans-serif;font-size:13px;transition:all 0.4s;}
.label-size a {display:inline-block;color:#fff;padding:8px 10px;
font-weight:400;transition:initial;}
.label-size a:hover {background:#29abe2;color:#fff;transition:all 0.2s;}
label-size a:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;padding-right:4px;
color:#fff;transition:initial;}
.label-size a:hover:before {content:"\f02b";font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;color:#fff;transition:initial;}
.label-size:hover, #footer-wrapper-inner .label-size:hover{background:#29abe2;color:#fff;transition:initial;}
.label-count {background:#333;}

3. Simpan Template.
4. Buka Tata letak/Layout.
5. Tambahkan :  <Add a gadget > Choose Label>

6. Jangan lupa pilih dari Daftar menjadi Cloud pada Elemen gadget Label.

7. Simpan gadget.

Demikian Tutorial Blogger kali ini, Semoga Bermanfaat! Thanks for Reading & Sharing and Visited : Cara Membuat Related Post Thumbnail& Snippet Responsive.