Siapa yang tidak tau Fletro Pro dan kembaranya Median UI, template terbaik karya Muhammad Maki ini banyak digunakan oleh blogger baik pemula maupun yang sudah profesional. Selain karena banyak fitur yang datawrkan juga harganya yang sangat terjangkau jika dibandingkan template sejenis dipasaran.
Juga karena hal itu banyak yang melakukan kustomisasi ringan bahkan me-Redesign template secara keseluruhan. Bukan karena tampilanya yang kurang menarik, tapi lebih karena kebutuhan masing-masing Blog pasti berbeda selain itu tujuan kustomisai juga sebagai ciri khas sebuah blog.
Custom Tampilan Label Fletro Pro
Hal ini juga yang saya lakukan pada template Fletro pro yang saya gunakan. Beberapa kustomisasi yang saya terapkan adalah sebagai ciri khas Blog ini sebagai pembeda dari yang lain.
Berikut ini akan saya bagikan cara kustom tampilan label pada halaman Snipet Homepage pada template buatan Jagodesain (Fletro Pro, Median UI dan Imagz terbaru). Untuk tampilanya adalah seperti ini.
Baiklah untuk caranya silahkan ikuti saja langkah berikut ini
PENTING!
Biasakan melakukan backup Tema kalian sebelum melakukan peng-editan HTML.
Pada dashboard Blogger pilih Theme (Tema) kemudian Backup. Jika sudah mari kita lanjutkan.
Cara Kustom tampilan label blogger
Step 1 : Silakan masuk ke Dashboard Blogger Kalian, klik Theme (Tema) kemudian Edit HTML
Step 2 : Silahkan cari kode css .pLbls seperti ini :
.pLbls::before, .pLbls >*::before{content:attr(data-text)} .pLbls::before{opacity:.7} .pLbls a:hover{text-decoration:underline} .pLbls >*{color:inherit;display:inline} .pLbls >*:not(:last-child)::after{content:'/'}
Kemudian hapus seluruh kode css diatas, atau cukup komentari saja supaya tidak hilang, seperti ini :
/*.pLbls::before, .pLbls >*::before{content:attr(data-text)} .pLbls::before{opacity:.7} .pLbls a:hover{text-decoration:underline} .pLbls >*{color:inherit;display:inline} .pLbls >*:not(:last-child)::after{content:'/'}*/
Step 3 : Paste kode css berikut untuk menggantikan css diatas.
/* Label Custom */
.pLbls::before, .pLbls >*::before{content:attr(data-text)}
.pLbls::before{opacity:.8;margin-right: 5px}
.pLbls a:hover{text-decoration:underline;font-weight:bold}
.pLbls >*{color:inherit;display:inline}
.pLbls >*:not(:last-child)::after{content:'/'}
Step 4 : Tambahkan kode CSS berikut setelah kode yang sebelumnya.
/*Label Custom Homepage KuyMase*/
.pHdr .pLbls >*{color:#fefefe;display:inline;margin-right:5px;border-radius: 6px;background:#06D7A0;height:24px;padding:0 10px;border:1px solid transparent}
.pHdr .pLbls >*:hover{text-decoration:none;color:#0b57cf;border:1px solid #0b57cf;background:rgba(0,0,0,.05);font-weight:normal}
.pHdr .pLbls >*:not(:last-child)::after{content:''}
.pHdr .pLbls {display:flex;align-items:center}
.pHdr .pLbls ::before,.pHdr .pLbls a:before{content:''attr(data-text)}
.pHdr .pLbls a:nth-child(n){padding:2px 10px; border-radius:6px;margin-right:10px;border:1px solid transparent}
.pHdr .pLbls a:hover:nth-child(n){text-decoration:none;color:#0b57cf;border:1px solid #0b57cf;background:transparent;font-weight:normal}
.pHdr .pLbls a:nth-child(1){background:#00a5af}
.pHdr .pLbls a:nth-child(1):before{border-color:transparent #00a5af transparent transparent}
.pHdr .pLbls a:nth-child(2){background:#f89000}
.pHdr .pLbls a:nth-child(2):before{border-color:transparent #f89000 transparent transparent}
.pHdr .pLbls a:nth-child(3){background:#FFD167}
.pHdr .pLbls a:nth-child(3):before{border-color:transparent #FFD167 transparent transparent}
Bagian yang saya tandai adalah warna label, silahkan diganti sesuai selera
Step 5 : Tambahan untuk CSS dark mode, silahkan sesuaikan dengan class Kalian
/*Dark Mode*/
.drK .pHdr .pLbls >*:hover{text-decoration:none;color:#fff;border:1px solid #fff;background:rgba(0,0,0,.05);font-weight:normal}
.drK .pHdr .pLbls a:hover:nth-child(n){text-decoration:none;color:#fff;border:1px solid #fff;background:transparent;font-weight:normal}
Step 6 : Silahkan Save (Simpan) atau Preview untuk melihat hasilnya.
Sekian cara kustomisasi label pada template Blogger khususnya Median Ui, Fletro Pro dan Imagz. Selamat mencoba dan jangan ragu tuliskan komentar jika ada pertanyaan.
Silahkan sampaikan di kolom komentar atau melalui kontak form jika ingin dibuatkan tutorial lainya.