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] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZJcHBXaJZ8gq6_RRMtAFrdjh5f13nnqH7ZqsVpDShwBpzv7eu9_Q4fi0YRvxL1mdY1QllxdptWNMNsxUVFeD4__cyYKLoF_13q853X6v2sjDSWq5H_sHMGblHicV11JUzYXSQojk2Eng/s84/image.png' title='Image'/>"
imagenes[2] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjSlIiqtNmRO2FH2lwHKO3gXMTwzj-Zpp8tIwqTGkO0VIpjSYtqzChjTl686S9PMlVjoBJVa_TGwJcKaZGa3WsMUni7A1KH9KAaKjKPZe78W1E5Pk9dH67YE783M32H3aM3iyvL2MntUs/s84/video.png' title='Video'/>"
imagenes[3] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn8iY91d2ldSTOfP0vqV4tDxSn0rFmONmWCdgfA5ybdWkCpOWFRDSQHqp7zk8cEYs-cXFHgdpQcnSzKwlGjTCJR4M-KQanBytU8dvyZIARNNL1Xc9H_QX7bE5iL9KJTel_ULII9BJtyS8/s84/audio.png' title='Music'/>"
imagenes[4] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbhfE0faw01fdXkBdEoqbvuPx6fBpWjpK2cjYSmqDA2QUWcKPS8mRv0XqMcaA5soxJLctxJLisDTVgjRcKkRLBKCvYDd7X0wevrmfz7mJd4fJMuQrThcqCkeElxIhzSnfBQXugpgMvy3M/s84/quote.png' title='Quote'/>"
imagenes[5] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO-9vMbI1mvyIJS7lcOceaSQFfi82JumGuFEWVL9Gf_xMpJ8nP6fb_dGlLs_0obpIkU6EJaIQln4Q_xPiUPFd8jT7Ifw5oAs33krieHqkqIpiW_cwpbcrxstatzOlO8wobFCHuGM9vQ6s/s84/note.png' title='Note'/>"
imagenes[6] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTaMBBgFhkr2_l2ePqlo8IzmOScEzUFGn8QnFQ7flO2wk9TngiKO0Q_A8mHx-I2P3TswRA60dPTSRGx1_yD3qTZiZYrZgYJ_IQt6d-jdEVzzs1GXqERvx6slR9F1KlyGNwBADU5odZKGw/s84/Blogger.png' title='Blogger'/>"
imagenes[7] = "<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZJMbpHpVijUg7tZQIbaEhutNY95SHbO4RXngWW5m704CtUXC9sK4TIPJHjFvtGeG3Hc4DZbn7zsakBi3KUctKjY9vpIw-r9K8yQcTqAsqJ8ZyxcK7Ru9ZMMCycILi1e1uMCQRxpTRRXA/s84/wp.png' title='Wordpress'/>"
if (etiqueta == "Image")
{document.write(imagenes[1]);}
if (etiqueta == "Video")
{document.write(imagenes[2]);}
if (etiqueta == "Music")
{document.write(imagenes[3]);}
if (etiqueta == "Quote")
{document.write(imagenes[4]);}
if (etiqueta == "Blog")
{document.write(imagenes[5]);}
if (etiqueta == "Blogspot")
{document.write(imagenes[6]);}
if (etiqueta == "Wordpress")
{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("<data:label.name/>");</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
