Membuat Icon Otomatis Berdasarkan Label

Membuat Icon Otomatis Berdasarkan Label - Halo sobat, kali ini saya akan membagikan suatu artikel yang semoga bermanfaat bagi sobat 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 contoh silahkan lihat Demo :

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

Icon Berdasarkan Label

Tambahkan kode dibawah ini diatas kode </head>

<script type='text/javascript'> 
function lebel_logo(etiqueta) {
imagenes = new Array();
imagenes[1] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYNTHxmgAvsAjY9s4ma9Y13b0-fduop8CnW12Zc1r5X1sFfqNrsjqNmC7k1wiu47tQ9UsMilr80ed8MV-Md5DYc4_Bghf_OGN8CHx5WWxrkRS6bYzn_dSbptkjWJVxvCIF4QfuyP7F2p4/s84/image.png' title='Image'/>&quot;
imagenes[2] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0yRAVynH19Ktnz6wHfXhUbALSKmyltPgN3XcwuNk3KOi82POUp0nEAdsBP2VSApLb4u-ZNu6AIx_4jPMmRxXkZ1nGlUKhyphenhyphen1Bb8BKwwr6KN5xhK_8_XG_aNNMaoDKQOs4vzLJzNwta6A/s84/video.png' title='Video'/>&quot;
imagenes[3] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRpGqMVt5iyQWBiA3J4JRycN7Ylk28DA-KMqNJNs2Y3NA06W8Wu_TD_NMtyIMh0Nf4GDEB_OCpDMV3mnKeoNsqAiHrT0GBiY7SyyixMxBnknAqVgv5s_IfuHzp8gtGm69gr9nFa3MWCkU/s84/audio.png' title='Music'/>&quot;
imagenes[4] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIMOJt6sUNU8y6RCMd7SSnFABKL10ujmFqXa__e2YihmEvcqqbmARvHRNNwEnuu6nf0V1i_OPpk4x_DuSAZMx6q7xD5y55bvoItHW5qkEdU16ipt_9RIFMPP6mxGykuW1dt0F_a0v6_HE/s84/quote.png' title='Quote'/>&quot;
imagenes[5] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQHp-0ZDJNvDU1GCJzws9T1QAQgZp3ojHOqXXDZyRbVrcLhdTHNLBIkQK8xZXTKQvMX0Ns_FdX7rzv9pqQ8oo38Y939Nq-8zvTSjSZWokYMw_qcYEDlE1AMUy1WpbQX1PWm1yJamTPlw/s84/note.png' title='Note'/>&quot;
imagenes[6] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4RGq7mrXRRHnxuj1JR54BbtEZhP6K7xy5xRS-cC1H_Hiko5F6Qf9nzbYCXLAuTy3RV6gQeA-mDawzT0LVvT5KWdjpaLKtHpALkgRQw1TWuR5dr2gpdRsygbmE2W594yYnWFUcgj1azfg/s84/Blogger.png' title='Blogger'/>&quot;
imagenes[7] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFrAhpEG5BZlofvNLzfwlAft7-vnrsFpK7sWbbuZY6JKNZ9FD7Cq3dL4rEAV69TgaQOY4dQkBQaI1-G06xDKgYlbl-1XWsc8jXllbKSVuiQjgsZo7aEDNe8fWPdc4WD4annf1LqubjsZw/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 kode CSS dibawah ini diatas kode ]]></b:skin>

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

Sekarang cari kode <div class='post-header'> kemudian tambahkan kode dibawah ini tepat 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 menggunakan salah satu dari kata "Image, Music, Quote, Note, Blogger, atau Wordpress", jika sobat ingin mengganti label tadi, bisa sobat ganti Image, Music, Quote DLL, sesuai keinginan atau Label pada blog sobat.

Itu saja yang bisa saya berikan, semoga bermanfaat untuk sobat semua :)