Membuat Icon Otomatis Berdasarkan Label

wahab

Tutorial Blogger

2015/04/23

3 Komentar

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/AVvXsEgnXk-QsaobU-7nC6kZLx68SxaRVBcOfPW5J4ieHbcKhAID1M-klcTtIYgo3rjwSUW2yUIf3xkFdr7HQf-2Gwixxis9fq1VgMfSsXX_Na-GZn6nytKQXellS3jON9PymeKZsXfgvZLbBLg/s84/image.png' title='Image'/>&quot;
imagenes[2] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinyM9UPAoc-dZLDY1_KdKMucHf3oS_lY43R9PQmqNjVDf_POEUS8lxc685Qye9g51SThoHLNSQtk8bqW2-0adAeTIYP5_EJxWD5_A_EuLkUM4Cjxhc0MYMOn72HTaKmErwOVT-wDXDlWk/s84/video.png' title='Video'/>&quot;
imagenes[3] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_wgVGXsPrwE6lgMtBqgPL5g_BvXNoTOyY0EunSM8j10s7rszd2iu7gdStL71cPpQN5ID83nO6_OijYXY10tQLMBX9ko_TTdm5Cu42MTWVBJfQygVgGtc2udaS8sxtMpo3CUgVMyOtx88/s84/audio.png' title='Music'/>&quot;
imagenes[4] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7oe9c0ZdK1rKbRBpPz3TUekS-A6Q8FC0YjB9TatnMioJ47985xyBh8KNtlKkJ3vaRHoQrchvMtvmB_ngAM-EdY3NJ2fYzzCpgzgBh2o4H184JzLXY3ECQ9u8CM4vqU6sMP5y4UCmv-Pg/s84/quote.png' title='Quote'/>&quot;
imagenes[5] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUl9yD4ODouq5Vu9oTTKw13-QPv4MKpZUpxb5Ip80dPOojnYyvIaF-OB58tQiU1oq5gt6OAKrKSKx1y9nSS3Q0fdEzMxr5MsGDnPTpQ7Up61sc8CuWRP_Ui-Ki24k6t0f_OUOtihER1iU/s84/note.png' title='Note'/>&quot;
imagenes[6] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgB90rh7xd6_65Qk6DLLrl4eQrq-PJoF3w8RwyxxjY5mYuErIBOaq27VUbCCKTK1O8ZrA-851o4IvLLH19dW-ekE-DPm-a-TwynbPfjoVQyub5MEosG_q-iC1jqMbEDlfCmvvbCru9-D0w/s84/Blogger.png' title='Blogger'/>&quot;
imagenes[7] = &quot;<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO5ANqtM2UEdyzxq0G1Yqqf0muzvBNQm4WxCDca6NY2PURCY0bMY7CNAjpVyrPke63N0kOnXJpJnJNNzpKS0fU_kw84wZkJHi5spgsMP_HM4smyMv2cmQ-awMPLO9iFyed_HriMvebFNE/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 :)

Pengelola Blog : ABDUL WAHAB

Judul : Membuat Icon Otomatis Berdasarkan Label
Ditulis oleh :Blog Shiro pada hari 2015/04/23
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Membuat Icon Otomatis Berdasarkan Label
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
https://fajriandaviar.blogspot.com/2013/11/membuat-icon-otomatis-berdasarkan-label.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.