Cara Membuat Icon Otomatis Menggunakan Label Blogger

Icon Label Blogger
Icon label yang saya maksud merupakan Icon (Image, Video, Blogger, Wordpress) yang muncul pada sisi kiri judul posting, cara penerapannya hanya cukup menambahkan Label pada Posting Blogger. Sebagai contoh silahkan lihat :
. 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. Selesai dan simpan template.
Cara penggunaannya cukup tembahkan label dengan menggunakan salah satu dari kata "Image, Music, Quote, Note, Blogger, atau Wordpress"

Terdapat 6 komentar pada " Cara Membuat Icon Otomatis Menggunakan Label Blogger ".

  1. Pertamaxxx :D

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

    BalasHapus
  2. wah menarik nih... thans gan..

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

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

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

    visit 6juni2000.blogspot.com

    BalasHapus

Silahkan tulis komentar.

Sahabat Blogger

Google Plus

Copyright © 2010 Style Blogger Template. All Rights Reserved.
Download Remove