Bagaimana Menciptakan Label Keren Di Blog?

Hampir semua blogger pasti ingin memiliki tampilan berbeda dari blog yang mereka kelolah. Mungkin sobat salah satunya kan? Pada postingan saya kali ini, ingin mengatakan jawaban dari pertanyaan menyerupai judul postingan saya "Bagaimana Membuat Label Keren di Blog?".

Tampilan blog yang keren juga sangat besar lengan berkuasa pada jumlah kunjungan ke blog sobat, walaupun tidak terlalu besar pengaruhnya. Tapi sebagai blogger, kita berusaha menampilkan yang terbaik untuk pengunjungnya. Mulai dari konten yang berkualitas sampai ke dilema template bahkan widget yang keren juga. Nah, saya akan mengatakan tutorial memperindah blog sobat dengan label yang keren.

Tag label berfungsi untuk mempermudah pengunjung blog dalam menentukan artikel mana yang di perlukan atau di cari. Berikut ini saya bagikan tutorialnya beserta pola gambar.

Membuat Label Keren di Blog

1. Pertama sobat masuk ke akun ➜ blogger.com

2. Kemudian pilih ➔ Template/Tema

3. Klik ➜ Edit HTML
4. Sobat cari aba-aba ➜ ]]></b:skin> Untuk mempermudah silahkan sobat tekan Control F
5. Setelah itu tambahkan aba-aba di bawah ini tepat di atas kode ]]></b:skin>

/*-----Labels Cloud----*/
.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border:5px dashed #000000;border-bottom-right-radius:30px;border-top-left-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{border:5px dashed #FA0830;background:#000000} .label-count{white-space:nowrap;border-bottom-right-radius:30px;border-top-left-radius:30px;padding-right:3px;margin-left:-3px;background:#000000;color:#fff!important} .label-size{line-height:1.2}

6. Save template
7. Kemudian sobat kembali ke dasboard blogger.com
8. Pilih ➜ Tata Letak

9. Klik ➜ Add Gadget/Tambahkan gadget

10. Pilih ➜ Label

11. Sebelum klik ➜ Save, sobat ganti pengaturannya yang sebelumnya List menjadi Cloud

12. Setelah di ganti, silahkan sobat save dan lihat kesudahannya menyerupai gambar di bawah ini

Sobat sanggup menganti aba-aba yang di atas dengan beberapa pilihan style di bawah ini:

Style A

.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5{font-size:100%;filter:alpha(100);opacity:10} .cloud-label-widget-content{text-align:left} .label-size{border-radius:30px;background:#FA0830;display:block;float:left;margin:0 3px 3px 0;color:#ffffff;font-size:11px;text-transform:uppercase} .label-size a,.label-size span{display:inline-block;color:#ffffff!important;padding:6px 8px;font-weight:bold} .label-size:hover{border-radius:30px;background:#333333} .label-count{white-space:nowrap;border-radius:30px;padding-right:3px;margin-left:-3px;background:#333333;color:#fff!important} .label-size{line-height:1.2}

Hasilnya :

Style B

.label-size {
display:inline-block; margin: 0 4px 4px 0; padding:7px;
font:13px verdana; float:left; background: #FF0000;
-webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
pointer-events: none; position: absolute;
content: ''; height: 0; width: 0; bottom: 0; right: 0;
background: linear-gradient(315deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:hover:before, .label-size:focus:before, .label-size:active:before {
width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;}

Hasilnya :

Style C

.label-size {
display:inline-block; margin: 0 4px 4px 0; padding:7px;
font:13px verdana; float:left; background: #FF0000;
-webkit-transform: translateZ(0); transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.label-size:before {
pointer-events: none; position: absolute;
content: ''; height: 0; width: 0; bottom: 0; left: 0;
background: linear-gradient(45deg, white 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.4);
-webkit-transition-duration: 0.3s; transition-duration: 0.3s;
-webkit-transition-property: width, height; transition-property: width, height;
}
.label-size:hover:before, .label-size:focus:before, .label-size:active:before {
width: 16px; height: 16px;
}
.label-size a {color: #fff; text-decoration:none;}

Hasilnya :

Sekian cara membuat label keren di blog dengan 4 style yang berbeda, supaya bermanfaat untuk sobat pengunjung.

For more articles about how to be best Blogger Please KLIK HERE

Terima kasih atas kunjungannya. Jika ingin menambahkan atau koreksi serta motivasi untuk saya, silahkan sobat tulis dalam kolom komentar.

Bagikan Artikel ini