Cara Membuat Icon Otomatis Menggunakan Label Blogger

Icon label yang dimaksud disini sebagaimana yang sering dipakai pada template Wordpress, dimana ketika kita memposting dengan mode Tulisan, Music, atau Video maka icon berubah,kali ini kita menggunakannya pada Template Blogger dengan memanfaatkan "Label" sehingga Icon (Image, Video, Blogger, Wordpress) akan berubah pada sisi kiri judul artikel (sesuai penempatan), cara penerapannya hanya cukup merubah nama-nama "Label" pada Posting Blogger.

Icon Blogger

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

1. Tambahkan kode dibawah ini diatas kode </head>

   <script type='text/javascript'> 
   function lebel_logo(etiqueta) {
   imagenes = new Array();
   imagenes[1] = &quot;<img src='https://lh3.googleusercontent.com/-cfmqvl_aeUU/T9RWXMUKLwI/AAAAAAAAAFk/KOMuyeM2gVs/s84/image.png' alt='image' title='Image'/>&quot;
   imagenes[2] = &quot;<img src='https://lh3.googleusercontent.com/-spKt-dCuWDw/T9RZq64fDoI/AAAAAAAAAGA/h25ovtaAfsY/s84/video.png' alt='image' title='Video'/>&quot;
   imagenes[3] = &quot;<img src='https://lh6.googleusercontent.com/-JqMoz73EsdI/T9RZpQdYL7I/AAAAAAAAAGE/Xh3kRqQkQZ8/s84/audio.png' alt='image' title='Music'/>&quot;
   imagenes[4] = &quot;<img src='https://lh5.googleusercontent.com/-qvAfIbwadro/T9RZqVD3stI/AAAAAAAAAF4/U2A6BssgJQU/s84/quote.png' alt='image' title='Quote'/>&quot;
   imagenes[5] = &quot;<img src='https://lh5.googleusercontent.com/-ZGIdlq5LlUM/T9RZpvwahHI/AAAAAAAAAFw/B94_LHUkup8/s84/note.png' alt='image' title='Note'/>&quot;
   imagenes[6] = &quot;<img src='https://lh6.googleusercontent.com/-ZgQr4FMDm_I/T9ca1xRfDSI/AAAAAAAAADM/4GZTJjeHlwo/s84/Blogger.png' alt='image' title='Blogger'/>&quot;
   imagenes[7] = &quot;<img src='https://lh5.googleusercontent.com/-JPLBQx4F72Y/T9ca51o-Y0I/AAAAAAAAADU/aaUDQVk_EmM/s84/wp.png' alt='image' 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 dikelompokan dalam bentuk Label → "Image, Music, Quote, Note, Blogger, dan Wordpress"
2. Masukkan kode CSS dibawah ini diatas kode ]]></b:skin>

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

3. Sekarang cari kode <b:includable id='post' var='post'> kemudian tambahkan kode dibawah ini tepat dibawahnya :

   <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>
   

4. Simpan Template, selesai.

Cara penggunaannya cukup tembahkan nama label dengan menggunakan salah satu dari kata "Image, Music, Quote, Note, Blogger, atau Wordpress".
Live Demo

Catatan :

1. <img src='https://lh5.googleusercontent.com/.../.png' alt='image' title='Image'/> merupakan url image / gambar juga dapat kamu ganti dengan tulisan dan jika ingin lebih menarik dapat menggunakan font Awesome.
2. Untuk penyesuaian tatak letak, rubah pada bagian CSS.