Membuat Icon Otomatis Berdasarkan 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 instruksi dibawah ini diatas instruksi </head>

<script type='text/javascript'>  function lebel_logo(etiqueta) { imagenes = new Array(); imagenes[1] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXF2yT7jWRQzW6CiqK7-vZKfMwL-jv9taZihnNuP5SNQvXDDVTrcQ6og92Njrtu61I5s5CSZqZsCEH320sHnf1bZBzDmTKxsJfIjVrlzHrinOyLwT4bPYjqRTg7P-Rd30_rh_LhshuoLQ/s84/image.png' title='Image'/>&quot; imagenes[2] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCQwJwBOyO37y1SUjcPTbsrvYSxBSRRh-QsSYKpRszGHn8Fh8Xz0cEG0o9rfK8TWoIq9iJLzRlrtiF1Q1M6DbbIBSo_05z9zG2Gq7cxoEPaR5rShlrra-aXZjz_LC01vCmlXcbZ_J_vhI/s84/video.png' title='Video'/>&quot; imagenes[3] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikHVsKe6N7_3S5DDz_j8tZiyjq6ozqNilOQhTnl12Nh9kpUD_tUkIL8AHl34J4PbGZyj1dD0ZiQpXSHbBYAw4rQcwRDqKZjg2-XQ7WfOZ9u84P_mIdpu72-Qvfh_U39wzeUfzxxayRAno/s84/audio.png' title='Music'/>&quot; imagenes[4] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg22rZs8aBtHrit-tbtVAq5r7uZcyT6hpqaTVz1VgNPylr1DlISnXa_rIM1nsb0Sx7M3LWUsGX02FgHC6NtKfR1gTQNqaQt8T3f5NHJEumCsOTKGGXhqon4Hcg033fAti4RiA2lX_u-3Uk/s84/quote.png' title='Quote'/>&quot; imagenes[5] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-n4p8AIwpZJHg5sxmkNUTlphZGJ6YvIR3I-dr6gZTqvoS4I-yQ32SVyO2Wq0naSi_yNsAP_-fgjtEKHJkifk8rjAIFzHuhdjAvSxuqVHuBUxtjUT7ClHPcFSxnAYi0TiehjdbpHoRST8/s84/note.png' title='Note'/>&quot; imagenes[6] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN3axTylxLBl0ZrKoV4HmjsD0Xnpk17qXCl4KBEBr8E4wuqdsu2U1MvjOysr27jkapWbWnV0ZvR-RiCmofRl9saPIX5Txbkxi5-zhleabAAsPDZQESIOcoeJgZNwacgAsFHsPNT5BkDiQ/s84/Blogger.png' title='Blogger'/>&quot; imagenes[7] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYw198_NJmKrPTgAUH8i5CRJe4UAHbdj7egYeoLSZWqUydJu-qAZtw6I9u4_XciVPiANwJdv2aqUD-7XfECxrM9FHD-Sb_6_-r3Cvrd7kqNTTyrIDHLR8Wkqg9AbX-CklOYfPY8-idGv4/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 instruksi CSS dibawah ini diatas instruksi ]]></b:skin>

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

Sekarang cari instruksi <div class='post-header'> lalu tambahkan instruksi 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 harapan atau Label pada blog sobat.

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

Tweet

Subscribe to receive free email updates: