cara membuat button navigasi berpijar

Setelah saya menemukan tutorial cara memasang button navigasi dari blog blogger yang sudah senior, ternyata Alhamdulillah saya berhasil, namun yang saya dapatkan hanya cara pemasangannya saja, nah disini saya sudah edit  sendiri button2 dengan software  ULEAD PHOTOIMPACT sehingga ada perbedaan yang lebih beragam salah satunya adalah button yang berpijar kayak lampu disco gitu deh.. nah buat sobat yang ahli otak atik photoimpact tentu nantinya akan bisa edit sendiri dengan selera masing2, dan buat sobat yang tidak mau ribet2 saya sudah siapkan beberapa button berpijar yang mungkin bisa buat bahan praktek di blog sobat, lihat contoh dibawah ini:


button7
http://i821.photobucket.com/albums/zz135/vankim2/button%20vankim/button7.png

button6
http://i821.photobucket.com/albums/zz135/vankim2/button%20vankim/button6.gif

button1
http://i821.photobucket.com/albums/zz135/vankim2/button%20vankim/button2.png

button2
http://i821.photobucket.com/albums/zz135/vankim2/button%20vankim/button1.gif

button5
http://i821.photobucket.com/albums/zz135/vankim2/button%20vankim/button5.png

button4
http://i821.photobucket.com/albums/zz135/vankim2/button%20vankim/button4.gif

saya yakin tidak setiap blogger tertarik dengan ini tapi khususnya buat pemula seperti saya yah paling tidak bisa untuk menambah pengetahuan tentang blog... iya gak..?? nah buat sobat yang mau praktek memasang untuk blog sendiri silahkan konsentrasikan pikiran untuk mengikuti langkah2 berikut ini:

1.silahkan sobat copy satu pasang kode  berwarna hijau muda yang terletak dibawah gambar2 diatas (catatan sobat cukup copy satu pasang saja url gambar yang kecil dan yang besar) lalu sobat simpan pada noteped atau dimana saja, hal ini untuk mempermudah pemasangannya nanti.
2. silahkan sobat login ke blog sobat sendiri
3. klick rancangan
4. klick edit HTML
5. centang Expand Template Widget
6. cari kode ini ]]></b:skin> pada kolom kode2 html sobat
7.setelah ketemu silahkan sobat copy kode dibawah ini dan letakkan tepet diatas kode ]]></b:skin> tadi.

/*
==================================================

Tutorial oleh vankim
URL :  http://gelorakim.blogspot.com
kunjungi blog saya untuk tutorial lainnya

==================================================
*/

#tabs6 {
float:left;width:100%;
background:transparent;
font-size:13px;
line-height:normal;
border-bottom:1px solid transparent;
}

#tabs6 ul {
margin:0;padding:10px 10px 0 5px;
list-style:none;
}

#tabs6 li {
display:inline;
margin:0;
padding:0;
}

#tabs6 a {
float:left;
background:url("http://i821.photobucket.com/albums/zz135/vankim2/button%20vankim/button2.png") no-repeat left top;
margin:0;padding:0 0 0 4px;text-decoration:none;
}

#tabs6 a span {
float:left;display:block;background:url("http://i821.photobucket.com/albums/zz135/vankim2/button%20vankim/button1.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#ffff00;
font-weight:bold;
}

/* Commented backslah Hack hides rule from IE5-Mac */

#tabs6 a span {
float:none;
}
/* End IE5-Mac hack */

#tabs6 a:hover span {
color:#C2FB77;
}

#tabs6 a:hover {
background-position:0% -42px;
}

#tabs6 a:hover span {
background-position:100% -42px;
}

#tabs6 #current a {
background-position:0% -42px;
}

#tabs6 #current a span {
background-position:100% -42px;
}


7. perhatikan URL  berwarna hijau yang pertama, silahkan sobat ganti dengan URL button yang sobat copy tadi untuk ukuran button yang kecil,
8. perhatikan lagi URL berwrna hijau kedua silahkan sobat ganti dengan URL button yang sobat copy untuk button berukuran besar,
9.setelah sobat letakkan kode2 tadi sekarang waktunya sobat untuk mencari kode seperti dibawah ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'

perhatikan kode diatas yang saya kasih warna merah, silahkan sobat ganti kode kode tersebut menjadi (angka 1 ganti dengan angka 2)  ( no ganti yes )  (true ganti false)


sudah ketemu belum..?? sudah diganti belum..?? kalau sudah semuanya silahkan simpan template sobat...

setelah template sobat disimpan sekarang saatnya ganti acara... hehe maksudnya begini... sekarang sobat pindah klick rancangan, klick tambah gadget yang letaknya diatas atau dibawah header, pilih HTML/java script, lalu letakkan kode dibawah ini pada kolom gadget tersebut,

ini kodenya:

<div id='tabs6'>
       <ul>

<!-- Silahkan ganti URL dengan link milik anda -->

<li id='current'><a href='http://urlblogkanda.blogspot.com/' title='beranda'>
<span>beranda</span></a></li>

<li><a href='http://urlblogkanda.blogspot.com/' title='tukar link'>
<span>tukar link</span></a></li>

<li><a href='http://urlblogkanda.blogspot.com/' title='alamat'>
<span>alamat</span></a></li>

<li><a href='http://urlblogkanda.blogspot.com/' title='video'>
<span>video</span></a></li>

<li><a href='http://urlblogkanda.blogspot.com/' title='teman saya'>
<span>teman saya</span></a></li>


</ul>
      </div><!-- #tabs6 end -->

sebelum disimpan silahkan ganti dulu URLnya dengan URL milik sobat, dan ganti judul2nya sesuai keinginana sobat,

simpan dan lihat hasilnya, jika ada yang kurang mengerti silahkan bertanya Insya Allah saya jawab.
SELESAI... heeeem.... merokok dulu ah...

23 komentar:

  1. salam sahabat
    wah bagus mas namun panjangnya yang harus copas kode HTML kira kira mempengaruhi loading gak mas?good luck

    BalasHapus
  2. Dhana@ yang saya tau kalau soal panjangnya html tidak begitu mempengaruhi lambatnya loading, semua tergantung apa isinya.. tapi untuk lebih jelasnya silahkan dicoba ya... salam sukses...

    BalasHapus
  3. sepertinya memberatkan temmplate gan..
    tapi oeverall oke banget tuh
    hehe

    BalasHapus
  4. Artikel yg bagus mas.

    Salam kenal ya mas,
    Thx dah follow...;D

    BalasHapus
  5. mantap boss, tutorialnya oke banget

    BalasHapus
  6. yudi04@ mungkin karena berbebtuk animasi jd agak berat, tp buat nambah pengetahuan saya yah.. saya praktekin, makasih dah komen ya..

    Artta@ hemm... ya itung2 belajarlah bro.. :D

    Lisna lina@ makasih kembali dah mau berkunjung..

    Story@ beginilah kalo masih tahap2 belajar... itung2 buat pengingat.. makasih bro..

    BalasHapus
  7. wah, boleh juga tuh
    bisa diaplikasikan ke semua jenis template kan mas?

    BalasHapus
  8. BLOG SANTAI@ saya rasa bisa biar gak penasaran coba aja..

    BalasHapus
  9. keren sob kapan-kapan bisa di coba
    makasih ya

    BalasHapus
  10. salam sahabat
    och maaf sobat mengenai gambar membesar script di blog dah tak hapus... jadi nggak bisa membesar
    terima kasih sebelumnya.
    sekalian izin tuker link
    linknya dah tak pasang bisa di cek di TJP

    BalasHapus
  11. salam sahabat...
    mau meniru gaya blog saya? silahkan sob
    terima kasih


    Kunjungi juga Blog miror
    yang di anak tirikan → www.imtikhan.co.cc

    BalasHapus
  12. salam sahabat
    kunjungan siang
    met beristirahat

    BalasHapus
  13. trik blogger salam damai... makasih atas kunjungannya..

    BalasHapus
  14. salam sahabat...
    kunjungan pagi
    ditunggu artikel terbarunya
    terima kasih

    BalasHapus
  15. trik blogger@ wah iya nih masih dirancang,, makasih dah berkunjung, mudah2an rtikel baru segera meluncur..

    BalasHapus
  16. Huuuuuuuuuuuuuuuaaaaaaaaaaaa
    Mainan HTML malah kacau ki om blogku...
    wkwkwkwkwkw tambah minus neh liat huruf2 halus...

    BalasHapus
  17. @laras sutedja wekekek sabar ya.. lama2 pasti bisa.. pelajari aja terus..

    BalasHapus
  18. salam kenal ya sob .
    sangat berguna banget neh buat ane

    ane mau nanya neh sob
    cara masang buton yang kaya beranda tu gmne y .
    supaya di bawah judul tapi di atas postingan !
    ane baru neh di dunia blogger

    BalasHapus
  19. mas bro,,, kami ujah cobak,

    tapi ada masahnya ni mas broo..

    kira2 warnanya bs dirubah gak ya dan kok ada bayanganya photobucket.
    itu bs dihilangin gak.

    BalasHapus
  20. jalan terbaik untuk andaKamis, 01 Agustus 2013 18.59.00 WIB

    cara mendapatkan uang cepat untuk kebutuhan anda tampa bekrja,, klik http://angka4d.blogspot.com/

    BalasHapus

Masukkan email anda

Gelora Flamboyan | Tutorial Blog