Per 2016, RMID pindah ke RMID Discord (Invite link dihapus untuk mencegah spambot -Theo @ 2019). Posting sudah tidak bisa dilakukan lagi.
Mohon maaf atas ketidaknyamanannya dan mohon kerjasamanya.

Share | 
 

 Blogging Tips: Img based header navbar + H

Topik sebelumnya Topik selanjutnya Go down 
Blogging Tips: Img based header navbar + H Empty2010-05-17, 17:13
PostBlogging Tips: Img based header navbar + H
#1
idlewalker 
Advance
Advance
idlewalker

Level 5
Posts : 326
Thanked : 0
Engine : RMVX
Skill : Intermediate
Type : Writer

Blogging Tips: Img based header navbar + H Vide
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 XD

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 :D )

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 :D]

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!
Blogging Tips: Img based header navbar + H Empty2010-05-17, 20:54
PostRe: Blogging Tips: Img based header navbar + H
#2
jasprelao 
Si Om
Si Om
jasprelao

Level 5
Posts : 1009
Thanked : 23
Engine : RMVX
Skill : Intermediate
Type : Developer
Awards:

Blogging Tips: Img based header navbar + H Vide
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...
Blogging Tips: Img based header navbar + H Empty2010-05-18, 16:56
PostRe: Blogging Tips: Img based header navbar + H
#3
idlewalker 
Advance
Advance
idlewalker

Level 5
Posts : 326
Thanked : 0
Engine : RMVX
Skill : Intermediate
Type : Writer

Blogging Tips: Img based header navbar + H Vide
bisa di yang lain juga ko,
coba aja...
Blogging Tips: Img based header navbar + H Empty
PostRe: Blogging Tips: Img based header navbar + H
#4
Sponsored content 




Blogging Tips: Img based header navbar + H Vide
 

Blogging Tips: Img based header navbar + H

Topik sebelumnya Topik selanjutnya Kembali Ke Atas 

Similar topics

+
Halaman 1 dari 1

Permissions in this forum:Anda tidak dapat menjawab topik
RPGMakerID :: Non-RM :: Computer and Software-