-->

Cara Membuat Icon Otomatis Menggunakan Label Blogger

Cara terbaru Membuat Icon Otomatis berdasarkan 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.

Anda mungkin menyukai postingan ini

8 komentar

  1. Shiro
    Pertamaxxx :D

    Postingan yang sangat bermanfaat gan izin Share :D
    kunjungi balik yah :) www.fajriandaviar.blogspot.com
    • Perkap
      z
  2. Anonim
    wah menarik nih... thans gan..
  3. peinzilla
    gan label ini bisa dimasukin di widget ga ?
    • Manuk Merak
      Kelihatanya ga bisa ....
  4. Musik MPTiga
    kalau templatenya gak sesuai seperti itu gmn mas, ,
  5. Jun
    kalau labelnya dngan icon icon tersendiri gimana yahh ..?

    visit 6juni2000.blogspot.com
  6. Membuat Blog
    Mantap, Sob! Saya berhasil membuatnya.

    Bintan News
  1. Untuk menyisipkan sebuah kode gunakan <i rel="pre">code_here</i>
  2. Untuk menyisipkan sebuah quote gunakan <b rel="quote">your_qoute</b>
  3. Untuk menyisipkan gambar gunakan <i rel="image">url_image_here</i>