Skip to main content
JEJAK UNIK

follow us

Memasang Hastag Label Berwarna di Bawah Postingan Blog

Memasang Hastag Label Berwarna di Bawah Postingan Blog

Memasang Hastag Label Berwarna di Bawah Postingan Blog - Sebenarnya blog kita sudah mempunyai tag label jika kalian sudah memasang breadcrumbs pada blog. Tapi sayangnya untuk breadcrumbs sendiri tampilannya masih sangat biasa dan kurang menarik untuk dilihat.

Bisa saja kita memodifikasinya agar tampilan breadcrumbs bisa lebih bagus namun dari pada memodifikasi ulang lebih baik kita membuat baru tag label berwarna di bawah postingan blog agar tampilan blog kita lebih menarik.

Untuk sobat yang tertarik Memasang Hastag Label Berwarna di Bawah Postingan Blog bisa simak tutorialnya di bawah ini:

Pertama tentunya sobat harus LOGIN masuk ke dalam editor template HTML dan mencari kode
</head> atau &lt;/head&gt;&lt;!--<head/>--&gt; Jika sudah ketemu letakan kode CSS di bawah ini tepat di atasnya.

<style type='text/css'>
/*Post Label*/
.post-labels{float:left;display:block;width:100%;color:#999}
.post-labels a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-left:12px;padding:0 10px;background:rgba(0,0,0,0.25);color:#fff;text-decoration:none;border-bottom-right-radius:3px;border-top-right-radius:3px}
.post-labels a:before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent rgba(0,0,0,0.25) transparent transparent;border-style:solid;border-width:12px 12px 12px 0}
.post-labels a:after{content:"";position:absolute;top:10px;left:-1px;float:left;width:4px;height:4px;border-radius:2px;background:#fff;transition:all .3s}
.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}
</style>

Jika sudah sekarang cari kode </article> dan letakan kode ini tepat di atasnya lalu save template.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <span class='post-labels'>
      <div id='maia-signature'/>
        <b:if cond='data:post.labels'>
          <span style='float: left;'>Tags: </span><b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url + &quot;?max-results=6&quot;' expr:title='data:label.name' rel='tag nofollow'><data:label.name/></a>
          </b:loop>
        </b:if>
      </span>
</b:if><

Bagaimana mudah bukan? jika sobat tidak menemukan kode maka coba cari kode <data:post.body/> dan letakan kode ke dua di atasnya.

Selamat mencoba!

You Might Also Like:

Jika tertarik dengan artikel yang anda baca saat ini, berikan tanggapan melalui kolom komentar di bawah ini. Berkomentarlah yang cerdas, karena pintar saja tidak cukup.
Buka Komentar