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!
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.
DEBBY
<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 == "Blog Tutorial"'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3IX-iBzrk43l_ff6tKuL-0paEAaGd-6plHyJew9eGmKs54isw1sLO71Z2jpkudXEUZZFQCqWTf8wXQBVy9tDPHyfxvUGPb6M2bRLQGr3Han2wHxBdSEz64pTYIPITvpef3RC1mIGeTghA/s1600/tr.png'/>
</b:if>
</b:loop>
<!-- BATAS AKHIR -->
</div>
<!-- BATAS AWAL -->
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == "Blog Tutorial"'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3IX-iBzrk43l_ff6tKuL-0paEAaGd-6plHyJew9eGmKs54isw1sLO71Z2jpkudXEUZZFQCqWTf8wXQBVy9tDPHyfxvUGPb6M2bRLQGr3Han2wHxBdSEz64pTYIPITvpef3RC1mIGeTghA/s1600/tr.png'/>
</b:if>
</b:loop>
<!-- BATAS AKHIR -->
</div>
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
0 komentar:
Posting Komentar