Tutorial - Cara Membuat Post Label menjadi Warna Warni

Untuk kesempatan kali ini saya akan coba bagikan cara Membuat Post Label Warna Warni.

Post label biasanya di tampilkan dibawah postingan atau akhir isi postingan, tergantung kesukaan masing-masing. Ngomongin label post atau post label, kita bisa memodifikasi label post tersebut agar kelihatan lebih cantik dan menarik untuk blog kesayangan Anda, salah satunya adalah memodifikasi post label tersebut menjadi warna warni.

Post label berbeda dengan label count atau widget label yang biasanya dipasang pada sidebar jika Anda memasangnya. Label count dan post label mempunyai fungsi yang sama, yaitu untuk menampilkan nama nama label yang ada pada bog Anda atau label yang pernah Anda tulis untuk masing-masing artikel. Hanya saja post label akan di tampilkan pada bagian bawah artikel. Untuk lebih jelasnya seperti yang tampak pada gambar di bawah ini.

Baca Juga :

• 5 TIPS BERMAIN DI MAP SANHOK PUBG MOBILE - DIJAMIN LANGSUNG CHIKEN DINNER!!
• MAU CEPAT SAMPAI CONQUEROR? IKUTI TIPS INI!! - CARA PUSH RANK TERBAIK DI PUBG MOBILE

Setelah melihat gambar di atas mungkin Anda tertarik untuk memasangnya diblog Anda juga, jika Anda tertarik, mari ikuti caranya dibawah ini. Untuk modifikasi tampilan post label agar warna warni kita hanya menggunakan CSS.

Cara Membuat Post Label menjadi Warna Warni

1. Pertama Anda masuk pada akun blog Anda.

2. Masuk pada Template ==> Edit HTML

3. Simpan CSS dibawah ini tepat di atas kode </style>

   .post-labels{padding: 2px 5px 2px 0;}
   .post-labels,.post-labels a{display:block;} 
   .post-labels a{margin-left:20px;margin-top:5px;}
   .post-labels i+a{display:inline-block;margin-left:4px;margin-top:0}

   .post-labels a{color:#fff}

 .post-labels a:nth-child(1){background:#ca85ca}.post-labels a:nth-child(1):before{border-color:transparent #ca85ca transparent transparent} 

 .post-labels a:nth-child(2){background:#e54e7e}.post-labels a:nth-child(2):before{border-color:transparent #e54e7e transparent transparent} 

 .post-labels a:nth-child(3){background:#61c436}.post-labels a:nth-child(3):before{border-color:transparent #61c436 transparent transparent} 

 .post-labels a:nth-child(4){background:#f4b23f}.post-labels a:nth-child(4):before{border-color:transparent #f4b23f transparent transparent} 

 .post-labels a:nth-child(5){background:#46c49c}.post-labels a:nth-child(5):before{border-color:transparent #46c49c transparent transparent} 

 .post-labels a:nth-child(6){background:#607ec7}.post-labels a:nth-child(6):before{border-color:transparent #607ec7 transparent transparent} 

 .post-labels a:nth-child(7){background:#ca85ca}.post-labels a:nth-child(7):before{border-color:transparent #ca85ca transparent transparent} 

 .post-labels a:nth-child(8){background:#e54e7e}.post-labels a:nth-child(8):before{border-color:transparent #e54e7e transparent transparent} 

 .post-labels a:nth-child(9){background:#61c436}.post-labels a:nth-child(9):before{border-color:transparent #61c436 transparent transparent} 

 .post-labels a:nth-child(10){background:#f4b23f}.post-labels a:nth-child(10):before{border-color:transparent #f4b23f transparent transparent}

4. Jika sudah, klik simpan. selesai...

Coba lihat hasilnya, apabila ada yang kurang pas, silahkan Anda sesuaikan sendiri. Anda juda bisa mengganti warna backgroundnya dengan menganti kode warna yang Saya tandai diatas.

Jika post label di blog Anda masih menggunakan kode seperti dibawah ini

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

Biasanya akan ada tanda koma selain label terakhir, agar lebih enak di pandang mending hapus saja tanda koma tersebut, untuk menghapus tanda koma caranya seperti ini.

1. Masuk pada akun blogger.

2. Pilih Template ==> Edit HTML

3. Stelah kode template sudah terbuka semua, tekan Ctrl + F dan cari kode ini. data:label.isLast !

kode selengkapnya biasanya seperti ini.

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=15&quot;' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span>

Jika sudah ketemu silahkan Anda hapus kode tersebut yang Saya marking warna kuning. Setelah sudah dihapus penampakannya akan seperti ini.

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=15&quot;' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a>
          </b:loop>
        </b:if>
      </span>

Jika sudah, klik simpan template.

Nah, hanya itu saja yang bisa Saya bagikan tentang Modifikasi Post Label Menjadi Warna Warni.

Semoga bermanfaat.

tags: label blog warna warni, label kategori berwarna

Share this post