Bagaimana Menciptakan Label Keren Di Blog?

Hampir semua blogger niscaya ingin mempunyai tampilan berbeda dari blog yang mereka kelolah. Mungkin teman salah satunya kan? Pada postingan saya kali ini, ingin memperlihatkan tanggapan 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 hingga ke dilema template bahkan widget yang keren juga. Nah, saya akan memperlihatkan tutorial memperindah blog teman dengan label yang keren.

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

Membuat Label Keren di Blog

1. Pertama teman masuk ke akun ➜ blogger.com

2. Kemudian pilih ➔ Template/Tema

3. Klik ➜ Edit HTML
4. Sobat cari aba-aba ➜ ]]></b:skin> Untuk mempermudah silahkan teman tekan Control F
5. Setelah itu tambahkan aba-aba di bawah ini sempurna 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 teman kembali ke dasboard blogger.com
8. Pilih ➜ Tata Letak

9. Klik ➜ Add Gadget/Tambahkan gadget

10. Pilih ➜ Label

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

12. Setelah di ganti, silahkan teman save dan lihat kesannya menyerupai gambar di bawah ini

Sobat dapat 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 menciptakan label keren di blog dengan 4 style yang berbeda, biar bermanfaat untuk teman pengunjung.

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


Sumber https://milano-ruus.blogspot.com/

Berbagi :