Membuat Icon Otomatis Menurut Label

Membuat Icon Otomatis Berdasarkan Label - Halo sobat, kali ini aku akan membagikan suatu artikel yang biar bermanfaat bagi teman semua, Icon label yang kita ingin buat merupakan Icon (Image, Video, Blogger, Wordpress) yang muncul pada sisi kiri judul posting, untuk menerapannya hanya cukup menambahkan Label pada Posting Blogger. Sebagai pola silahkan lihat Demo :

Untuk cara pembuatannya sangat sederhana, silahkan ikuti cara Membuat Icon Otomatis Berdasarkan Label dibawah ini :

Icon Berdasarkan Label

Tambahkan isyarat dibawah ini diatas isyarat </head>

<script type='text/javascript'>  function lebel_logo(etiqueta) { imagenes = new Array(); imagenes[1] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-fbs6PWL4Hhefz21LJkNhnssgXThi_K8l4hcsOlIZku8OgbVm6jY1HrKYZc8-V5lZJtjztgHzsWk9zz_uc7GbFZ9bTLZ_4ZEuTN-webOGsqjDsfHg5gyC5hY5dVL2HgGBGqkXf2HGB8M/s84/image.png' title='Image'/>&quot; imagenes[2] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkImNqisPZxzgRFFh3HNG7uZNbyCWAuDmluejZf7XadZ_LdwVGbT4gFA1lmPRb6IoUVEcA83q014X5fj-qyaIua1NySvKUhQNwchLWKuYwbBZuUBrIT-rUMatbsnqrYawI8VNUC4wfvtM/s84/video.png' title='Video'/>&quot; imagenes[3] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnnBReFkg2mNJFUX41BPw4IHbfWSSv9r_6xgXypSnDVl9IKzAJiOuDryOIdu-KsiAQGFC23uBLnWbHISfzj2P4NOBEVa3hjbB_EeA75FfzctXNe4ckTsAVW63lXGJoqUOEMYmn7cq6xpE/s84/audio.png' title='Music'/>&quot; imagenes[4] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQq_GPyDt57MQO9yVdFMJjIZuliGc8jmXMTqtGtlozGiNVgbz-MKkwTIgfFFIg0OuvElJ3PSGHunlV5qdBE-W77795I10ZMxl0ECQkpfNsOJLnBZTIMms1qkLnisTawX8_yHAx9O4oLJc/s84/quote.png' title='Quote'/>&quot; imagenes[5] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYHwP_WSsnNtm4SyLa36CIxQTiqFPXy6ruSGFDpK60ItbYreIzrdFmh97tbjYsaExLVUNx7TpquLKrt2TATDuKeEtOLvV22eVyc4uDYinhFkuITKACLXL5cMezlQjeqCqTcwWyouUk6tQ/s84/note.png' title='Note'/>&quot; imagenes[6] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFkjubZRIj9trUsqZUg2Zx8XjN6E0ifNP0orTF6jPP0CYVuLvbSew18AS8m2jAFFh7t4-1XlzF-nouWevJb7NpPjuojiRAnrr2RN4DClqLbtuH-ScZD2WYhwOx0HOUDmaxkwx6nCNuDlw/s84/Blogger.png' title='Blogger'/>&quot; imagenes[7] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2u_QnNt4gDfWaajiESSIk_cJxU2XE9oZ-pRr0PIK5q0LWNxThR3T_xMOhraa2REujSbYaSILDa3JRub6uoZcvRlV9oCwdT5fyPiyzby60l2srGdvobomAMZPVDg94xhKj4jaREzJYr_I/s84/wp.png' title='Wordpress'/>&quot; if (etiqueta == &quot;Image&quot;) {document.write(imagenes[1]);} if (etiqueta == &quot;Video&quot;) {document.write(imagenes[2]);}  if (etiqueta == &quot;Music&quot;) {document.write(imagenes[3]);}  if (etiqueta == &quot;Quote&quot;) {document.write(imagenes[4]);}  if (etiqueta == &quot;Blog&quot;) {document.write(imagenes[5]);}  if (etiqueta == &quot;Blogspot&quot;) {document.write(imagenes[6]);}  if (etiqueta == &quot;Wordpress&quot;) {document.write(imagenes[7]);}  } </script>

Kode diatas terdapat Label » "Image, Music, Quote, Note, Blogger, dan Wordpress"

Masukkan isyarat CSS dibawah ini diatas isyarat ]]></b:skin>

.format-icon{ position: absolute; display:block; margin:0px 0px 0px -62px; padding:0px; border:0px; }

Sekarang cari isyarat <div class='post-header'> lalu tambahkan isyarat dibawah ini sempurna diatasnya :

<b:loop values='data:post.labels' var='label'> <a class='format-icon' expr:href='data:label.url' rel='tag'> <script type='text/javascript'>lebel_logo(&quot;<data:label.name/>&quot;);</script> </a> </b:loop>

Selesai dan simpan template.

Cara penggunaannya cukup tembahkan label dengan memakai salah satu dari kata "Image, Music, Quote, Note, Blogger, atau Wordpress", kalau teman ingin mengganti label tadi, sanggup teman ganti Image, Music, Quote DLL, sesuai impian atau Label pada blog sobat.

Itu saja yang sanggup aku berikan, biar bermanfaat untuk teman semua :)