IDLEWALKER BLOGGING TIPS: Image Based Navigation Links with HOVER EFFECTS!

EDIT: FOR BLOGGER ONLY! (best used with minima template)

Well, sebelum memulai, gw buat pembukaan dulu ok? biar lw ngerti konsep jalanny sistem ini

1. jika di HOVER, bukan gambarnya yang berganti, tapi background gambarnya (1 layer dibawah gambar awal ada gambar yg muncul kalo di hover)
so kalo mau buat yg gambarnya ganti, ada cara lain (tapi ribet n sering hang, males gw sama CSS Blogger)

2. script ada di 2 tempat:

a) edit html
b) page elements (berupa gadget HTML/Javascript PERSIS dibawah header (bukan diatas blog post lo, hehehe)

3. ikutin petunjuk gw baik2. jangan dimodif dulu ya, yang penting bisa dulu dasarnya (alias copas dari punya gw aja untuk dasarnya, sisanya tinggal modif sendiri)

4. jangan lupa kasih follow blog gw + kasih link ke blog gw di blog lw (di banners, comot aj gambar foto blog profile gw)

BEGIN!!

1. copas kode ini ke notepad. (kita akan sbut kode ini 'BLOGLINK WIDGET CODE' >> letaknya di bawah header, taronya di page elements berupa widget) >>

Code:

<div id='newnavbar'>
<ul>
<li><a href="LINK YANG DITUJU"><img src="GAMBAR SEBELUM DI HOVER – ITEM 1" /></a></li>
<li><a href=" LINK YANG DITUJU "><img src=" GAMBAR SEBELUM DI HOVER – ITEM 2" /></a></li>
<li><a href=" LINK YANG DITUJU "><img src="=" GAMBAR SEBELUM DI HOVER – ITEM 3" /></a></li>
<li><a href=" LINK YANG DITUJU "><img src="=" GAMBAR SEBELUM DI HOVER – ITEM 4" /></a></li>
</ul></div>

2. copas kode ini ke notepad. (kode ini akan diletakkan di edit html)

KITA SEBUT KODE INI KODE NEWNAVBAR. (INGAT BAIK-BAIK )

Code:

#newnavbar ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

#newnavbar li a:hover img{
background: url(ALAMAT GAMBAR UNTUK EFEK HOVER NYA);
}

#newnavbar li a:click img{
background: url(ALAMAT GAMBAR UNTUK EFEK KLIK NYA);
}

[KETERANGAN: click optional, apus aja kalo ga mau ada efek kliknya. soalnya, ngeberatin bandwith dikit ]

3. sekarang, buka Dashboard - Layout - Edit HTML.

cari kode seperti ini:

Code:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='idlewalker (Header)' type='Header'/>
</b:section>
    </div>

REPLACE kode tersebut dengan kode seperti berikut (copas aj punya gw):

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='idlewalker (Header)' type='Header'/>
</b:section>
</div>

4. Udah? Sekarang, cari kode seperti berikut (masih di edit html)

/* Header
-----------------------------------------------
*/

DIBAWAH nya persis, copas KODE NEWNAVBAR yang tadi udah di simpan di notepad.

5. OK, sekarang buka page elements. Coba liat, apakah di bawah header [persis dibawahnya header (nempel) lo, bukan nempel diatas BLOG POST] sudah ada kotak baru
untuk menambah widget.

Jika ada, lanjut ke step 6. Jika tidak, coba cek lagi tahap sebelumnya, apakah ada kesalahan (terutama step 3 !!!)

6. Klik kotak baru buat nambah widget itu. Pilih HTML/Javascript. Copas kode BLOGLINK WIDGET CODE yang tadi ud disimpen di notepad kesitu.

7. Rubah LINK YANG DITUJU dan GAMBAR SEBELUM HOVER dengan link dan url gambar yang diinginkan. Klik save kalo udah.

8. Oke. sekarang, balik ke edit html. Cari kode NEWNAVBAR yang tadi udh di copas. Ganti tulisan 'ALAMAT GAMBAR UNTUK EFEK HOVER NYA'dengan url gambar yg sesuai.

9. Klik save template.

Jika benar 100%, hasilnya bisa dilihat di blog gw ;D

HOPE IT HELPS


(sori blom gw edit sama sekali, aslinya buat yerry, haha)

DON'T FORGET TO FOLLOW MY BLOG AND POST YOUR SHOUTS AT MY CHATBOX!

Hmmm... sip, bisa dicoba nih kk drone,
nice share...

btw, mau nanya nih,
ini hanya bisa di header apa bisa dicobakan di bagian yang lain kk?

Thanks...

bisa di yang lain juga ko,
coba aja...