Memasang Hashtag Label Blog Berwarna Di Bawah Postingan 2019

Pada tahun 2019 saat ini perlu untuk kita ketahui pentingnya memasang hashtag label blog di bawah postingan kita. Hashtag pada label blog sangatlah banyak kegunaannya, siapa yang tahu bahwasaanya salah satu cara agar postingan blog kita peringkat satu haruslah memakai hashtag pada postingan blog kita. Tidak hanya itu saja manfaat memberi hashtag label blog pada postingan blog kita, akan tetapi banyak manfaat lainnya, seperti blog kita menjadi lebih rapi dan terlihat menarik sehingga pembaca lebih nyaman untuk membaca psotingan pada blog kita.

Pada tag atau hashtag label blog ini juga memberikan warna pada blog kita sob. Karena pada tutorial kali ini saya akan memberikan tutorial hashtag label blog yang versi berwarna. Nah  sebelum sobat semua membaca tutorialnya saya akan memberikan penjelasan sedikit tentang hastag label blog dibawah postingan.

Hashtag Label Blog Berwana Di Bawah Postingan 2019

Hashtag yang biasa kita lihat di bawah postingan biasanya bisa disebut dengan Tag sob. Pasti pernah dari kita melihat tag/hashtag ini di berbagai social media seperti di instagram maupun facebook. Suatu ketika saya pernah berfikir, kok banyak sekali sih postingan di instagram maupun facebook menggunakan hashtag/tag ini, apa ada manfaatnya jika kita menggunakan hashtag di postingan kita? 

Ternyata ada manfaatnya, selain memudah kan para pembaca, hashtag juga memudahkan postingan kita di temukan oleh pembaca kita.

Oke langsung saja bagi kalian yang ingin memasang label blog berwana, hashtag label blog pada postingan bisa langsung simak tutorial di bawah ini.

Memasang Hashtag Label Blog Berwarna Di Bawah Postingan

• Masuk dahulu ke Blogger  
• Setelah masuk kedalam blogger. Cari Tata letak Atau Template , Edit Template , Terus cari kode /head  
• Masukkan CSS dibawah ini dengan manaruhnya diatas kode </head>
Kode Pembungkus CSS

<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, langkah berikutnya kalian cari kode /article  
• Jika sudah ketemu, masukkan script HTML dibawah ini tepat diatasnya </article>
Kode Pembungkus HTML

<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>

• Jika sudah sesuai tag label pada tempatnya, tinggal save template dan lihat hasilnya di blog sobat semua hehe.

Catatan Yang Perlu Di Perhatikan Untuk Memasang Hashtag Label Blog Berwana

• Jika setelah menempatkan kode yang HTML di atas </article> dan masih tidak sesuai dibawah post, sobat semua jangan kuatir tinggal sobat cari aja tempatnya. Coba satu persatu, jika sudah pas dengan tempatnya jangan lupa untuk save templatenya. Dan lihat hasilnya di blog sobat semua.

Sekian dulu ya untuk tutorial Memasang Hashtag Label Blog Berwarna Di Bawah Postingan 2019 . Jika ada pertanyaan atau tidak paham dengan tutorialnya bisa tulis komen dibawah ya sob, Insyaallah kalau saya ada waktu saya bantu sebisa saya. Terimakasih sudah di blog pecintateknologi ya sob. Tunggu tutorial berikutnya dari saya.

Terimakasih banyak kepada mas Teja yang sudah memberi inspirasi tutorialnya.