Membuat Post Label Warna Warni

Membuat Post Label Warna Warni - Post label biasanya di tampilkan di bawah 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 anda, salah satunya adalah memodifikasi post label menjadi warna warni. post label berbeda dengan label count atau widget label yang biasanya ada 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. hanya saja post label akan di tampilkan pada bagian halaman posting. untuk lebih jelasnya seperti yang tampak pada gambar di bawah ini.


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

1. Pertama anda masuk pada akun blog anda.
2. Masuk pada Template ==> Edit HTML
3. Simpan kode CSS di bawah 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 hasil nya , kalo kurang pas, silahkan sesuaikan sendiri. anda juda bisa mengganti warna backgroundnya dengan menganti kode warna yang saya tandai di atas.
jika post label di blog anda masih menggunakan
<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 cara nya 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 merah. setelah sudah di hpus penampakan nya 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, mungkin itu saja yang bisa saya bagikan tentang Membuat Post Label Warna Warni
Semoga bermanfaat.


Reaksi:
Share this with short URL:

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser