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

Baca juga :

7 comments:

  1. Pertamaxxx :D

    Postingan yang sangat bermanfaat gan izin Share :D
    kunjungi balik yah :) www.fajriandaviar.blogspot.com

    ReplyDelete
  2. wah menarik nih... thans gan..

    ReplyDelete
  3. gan label ini bisa dimasukin di widget ga ?

    ReplyDelete
  4. kalau templatenya gak sesuai seperti itu gmn mas, ,

    ReplyDelete
  5. kalau labelnya dngan icon icon tersendiri gimana yahh ..?

    visit 6juni2000.blogspot.com

    ReplyDelete

to Top