NimRung

Browse Manual » Wiring » icon » label » menampilkan » posting » tertentu » Menampilkan Icon Label Posting Tertentu

---

Menampilkan Icon Label Posting Tertentu

Menampilkan Icon Label Posting Tertentu? Apa maksudnya dan seperti apa hasilnya apabila diterapkan kelihatannya cukup menarik untuk dibahas.Ya sebuah tips sederhana untuk blog tetapi cukup menarik untuk diterapkan, Icon label ini akan muncul pada postingan tertentu berdasarkan Label yang di kehendaki - Lihat Demo Disini juga ada Lihat!

Contoh sederhana saja posting saya ini memiliki kategori "Blog Tutorial" dan saya ingin menampilkan sebuah Icon label akan tetapi Icon label tersebut hanya akan muncul pada semua posting dengan kategori "Blog Tutorial" dan tidak akan muncul dilain kategori, akan tetapi diluar kategori "Blog Tutorial" Saya memiliki Kategori "Software" dan juga "Komputer" dll.

Q : Apakah bisa juga diberi ikon lebel?

A : Ya kita bisa menambahkan lebih dari 1 atau 2 atau bahkan semua label/kategori bisa kita beri ikon sendiri-sendiri!



Berikut untuk menampilkan Icon Pada postingan tertentu! Tapi sebaiknya siapkan dulu gambar atau ikon yang akan digunakan sesuai kategori yang dimaksud.

1. Masuk ke Dasboard klik tanda anak panah lalu klik "Template"

2. Klik "Edit HTML"  >> Klik  "Proceed"

3. Klik "Expand Widget Template"

4. Cari kode <div class=post-header> (semua template blogger memiliki kode ini) kemudian letakkan kode berikut tepat dibawahnya.

<div style=position:absolute;top:0px;right:0px;z-index;200;>

<!-- BATAS AWAL -->

<b:loop values=data:post.labels var=label>

<b:if cond=data:label.name == &quot;Blog Tutorial&quot;>

<img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzCdEbroM-bayu-gKEtosDLip7pEL172dvvpGsaIP986KAfeZ-BCc71smMq3m9rAKJHdc5k1IR34nFcCjlIVpVHZo3QX7pZu4kneAIMtqLLeb9K5nyXZnE1oaAE2My_z5zz4mMm7qnUZnE/s1600/tr.png/>

</b:if>

 </b:loop>

<!-- BATAS AKHIR -->

</div>

5. Simpan Template.



Keterangan :

• Teks Biru :  Sesuaikan angka top:0px dan right:0px menjadi angka yang diinginkan apabila posisi tidak sesuai


• Teks Hijau : Rubahlah dengan label/kategori yang akan menampilkan Ikon, Teks harus sesuai dengan label apabila label diawali huruf besar maka harus ditulis juga diawali dengan huruf besar apabila tidak, ikon tidak akan muncul. contoh label : Blog Tutorial jika ditulis blog tutorial maka ikon tidak akan muncul


• Teks kuning : Ganti dengan URL Gambar / Icon yang diupload ke. cara upload gambar bisa baca disini


•  Jika ingin menambahkan Label lagi Salin kode mulai dari <!-- BATAS AWAL --> sampai <!-- BATAS AKHIR--> kemudian letakkan dibawahnya atau diatas </div> 


• Begitu seterusnya dan jangan lupa untuk merubah nama label dan juga URL Gambarnya