×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat dan Memasang Label Tag di Bawah Postingan Blog


Pada kesempatan tutorial blogger kali ini, saya akan membagikan sebuah tutorial bagamana cara membuat dan memasang label tag dibawah postingan blog.

Jika kamu seorang penulis di platform blogger ataupun di platform wordpress tentunya kamu pasti tau apa itu label. Label merupakan kategori artikel yang telah kamu tulis dan publikasikan, dengan memasang label para pengunjung dapat dengan mudah menemukan kategori artikel yang serupa.

Memasang label tag dibawah postingan itu cukup mudah gak terlalu ribet, nah bagi kamu yang penasaran dan ingin mencoba menggunakannya kamu bisa ikuti tutorial yang ada diartikel ini, Yuk ikuti artikel ini hingga selesai.

Cara Membuat dan Memasang Label Tag diBawah Postingan Blog

1. Pertama login dulu ke Blogger,
2. Kemudian, pada dashboard Blogger, pilih TemaEdit HTML,
3. Lalu, copy kode CSS dibawah ini dan letakkan tepat diatas kode </head>,
/* Label Tag By Anirocksite */
<style type="text/css">
.post-labels{margin-top:15px;float:left;display:block;width:100%;color:#fff}
  .post-labels span{margin:0 5px 5px 0;float: left;height: 24px; font-weight: 400; line-height: 25px; font-size: 12px;background: #ff69b4; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); border-radius: 100px; padding: 0 10px; color: #fff; text-decoration: none;}
.post-labels          a{font-family:&#39;Poppins&#39;,sans-serif;float: left;height: 24px; font-weight: 400; line-height: 25px; font-size: 12px; margin:0 5px 5px 0; background: #dadce0; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24); border-radius: 100px; padding: 0 10px; color: #1b1c27; text-decoration: none;}
  .post-labels a:hover{background:#ffcce6}
</style>
4. Setelah meletakkan kode CSS, copy kan kode HTML dibawah ini dan letakkan tepat diatas kode </article>, itu agar label tagnya tepat diakhir postingan,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <span class='post-labels'>
        <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> 
5. Terakhir simpan/save template.

Nah itulah bagaimana cara membuat label tag diakhir postingan, caranya mudah bukan ? nah untuk Demonya kamu dapat melihat seperti yang ada di akhir artikel ini, sekian tutorial membuat label tag diakhir postingan yang dapat saya bagikan, dan tunggu aja lagi tutorial selanjutnya :D. Agar lebih cepat update kamu dapat melakukan request melalui contact form yang tersedia di Blog ini.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

6 Responses to "Cara Membuat dan Memasang Label Tag di Bawah Postingan Blog"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

  1. Gmna caranya min biar tampilan label di bagian atas postigan (bagian breadcrumb) hanya tampil satu label saja, sedangkan label di bagian bawah ada beberapa.. seperti di blog iniπŸ™

    ReplyDelete
    Replies
    1. Gunakan data:first.label.name

      Untuk membuat label dibawah postingan udah saya post, silahkan cari di menu blogger πŸ™

      Delete
  2. Bisa lebih spesifik lagi min yg mana yg perlu di ganti, msih belum paham�� / apakah cuma disembunyikan menggunakan css.

    Agar tampilan breadcrum label yang di atas postingan hanya tampil 1 label saja. Contohnya seperti blog mimin ini. Thx...

    ReplyDelete
    Replies
    1. Kalau yang dilabel Tag akhir postingan bisa dengan CSS, tapi kalau breadcrumbs cari kode ini <data:label.name/> ganti ke <data:post.first.label.name/>

      Delete
  3. Ini dia tutorial tags label yang saya cari sederhana tapi tetep elegan dan dinamis, thanks buat adminnya. kalo boleh buat tutorial donk min, gimana sih cara buat avatar penulis + info komentar dibawah judul postingan seperti blog ini, btw saya pengguna template viomag. thanks

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

© Copyright 2020 Anirock Site - All Rights Reserved Created With