Ikuti kami di Blogger atau di Google News
...
Cara Custom Label Template Blogger (Fletro Pro, Median UI, IMagz)

Cara Custom Label Template Blogger (Fletro Pro, Median UI, IMagz)

Tutorial cara melakukan kustomisasi tampilan label pada template Fletro Pro, Median UI, dan Imagz.

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.

Baca juga

Advertisement

Dare to be Different!

10 komentar

  1. cara untuk transpprant saat kursor mengarah di bagian label gimana kak?
    1. Sudah saya update mas. Ternyata ada yang kurang css nya
  2. Terus Berkarya :). -Anjime
    1. Siap! Makasih mas
  3. mas. Di template median ui jadi berantakan
  4. Ada yang kurang untuk yang ini )
    1. oh iya. betul mas, makasih koreksinya mas. Sudah saya update mas 👍👍
  5. Di sini nih : background:rgba(0,0,0,.05
    Kurang tambah )
    Mohon diupdate
  6. ko saya cara gak ada ya cssnya ?
    1. CSS mana yang gak ada mas? mgkin beda template?
Tuliskan pertanyaan seputar topik artikel diatas! Atau pertanyaan out of topic di .
Use this tools to convert basic comment to html characters, then copy it to comment form


image quote pre code