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' title='Image'/>&quot;
    imagenes[2] = &quot;<img src='https://lh3.googleusercontent.com/-spKt-dCuWDw/T9RZq64fDoI/AAAAAAAAAGA/h25ovtaAfsY/s84/video.png' title='Video'/>&quot;
    imagenes[3] = &quot;<img src='https://lh6.googleusercontent.com/-JqMoz73EsdI/T9RZpQdYL7I/AAAAAAAAAGE/Xh3kRqQkQZ8/s84/audio.png' title='Music'/>&quot;
    imagenes[4] = &quot;<img src='https://lh5.googleusercontent.com/-qvAfIbwadro/T9RZqVD3stI/AAAAAAAAAF4/U2A6BssgJQU/s84/quote.png' title='Quote'/>&quot;
    imagenes[5] = &quot;<img src='https://lh5.googleusercontent.com/-ZGIdlq5LlUM/T9RZpvwahHI/AAAAAAAAAFw/B94_LHUkup8/s84/note.png' title='Note'/>&quot;
    imagenes[6] = &quot;<img src='https://lh6.googleusercontent.com/-ZgQr4FMDm_I/T9ca1xRfDSI/AAAAAAAAADM/4GZTJjeHlwo/s84/Blogger.png' title='Blogger'/>&quot;
    imagenes[7] = &quot;<img src='https://lh5.googleusercontent.com/-JPLBQx4F72Y/T9ca51o-Y0I/AAAAAAAAADU/aaUDQVk_EmM/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 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 <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>
    
  4. Simpan Template.
  5. Cara penggunaannya cukup tembahkan nama label dengan menggunakan salah satu dari kata "Image, Music, Quote, Note, Blogger, atau Wordpress.

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

Silahkan tulis komentar.

to Top