OK deh, langsung aja,
What is Hover anyway?
Hover adalah Efek/perubahan yang terjadi apabila kursor kita mengarah pada suatu Object (Text/link/Gambar....). Untuk menjalankan fungsi hover adalah dengan code CSS (Cascading Style Sheets) yang saling memanggil...
Maksudnya apaan sih? Bingung yah..ya jelas aja karena itu definisi dari saya aja yang kebetulan hanya kata-kata itu yang nyangkut di otak saya....So, Untuk lebih jelasnya, disini saya tunjukkan dua contoh, Silahkan arahkan cursor teman-teman pada contoh-contoh di bawah ini :
CONTOH-1
Cinta bagi Ruh adalah sama dengan Makanan bagi Badan..
Apabila kau memakannya terlalu banyak maka akan membahayakanmu....
Dan apabila kau meninggalkannya, makan akan membinasakanmu...
Apabila kau memakannya terlalu banyak maka akan membahayakanmu....
Dan apabila kau meninggalkannya, makan akan membinasakanmu...
CONTOH-2
Untuk membuat efek seperti diatas, caranya mudah aja, yaitu :
--> pada CONTOH-1, adalah sebagai berikut :
1. Log in ke Blogspot
2. Centang bagian Expand Widget Templates
3. Cari kode ]]></b:skin>
4. Letakkan kode di bawah ini PERSIS diatas kode ]]></b:skin>
.codejovie {
padding: 10px;
margin top:5px;
margin-bottom:5px;
margin-left:40px;
margin-right:50px;
color: #ffffff;
background: #336699;
border-top: 2px solid #ffcccc;
border-right: 2px solid #99cccc;
border-bottom: 2px solid #99cccc;
border-left: 2px solid #ffcccc;
}
.codejovie:hover {
color:#336699;
background: #eeeeee;
border-top: 4px solid #99cccc;
border-right: 4px solid #ffcccc;
border-bottom: 4px solid #ffcccc;
border-left: 4px solid #99cccc;
}
padding: 10px;
margin top:5px;
margin-bottom:5px;
margin-left:40px;
margin-right:50px;
color: #ffffff;
background: #336699;
border-top: 2px solid #ffcccc;
border-right: 2px solid #99cccc;
border-bottom: 2px solid #99cccc;
border-left: 2px solid #ffcccc;
}
.codejovie:hover {
color:#336699;
background: #eeeeee;
border-top: 4px solid #99cccc;
border-right: 4px solid #ffcccc;
border-bottom: 4px solid #ffcccc;
border-left: 4px solid #99cccc;
}
5. Setiap kita posting, tuliskan kode <div class="codejovie"> sebelum text, dan </div> setelah text....
-->> Pada CONTOH-2, langkah 1-3 sama aja.., Letakkan kode di bawah ini PERSIS diatas kode ]]></b:skin>
.jovie{
background:#ffffff url('')no-repeat center;
}
.jovie:hover{
background:#ffffff url('')no-repeat center;
}
background:#ffffff url('')no-repeat center;
}
.jovie:hover{
background:#ffffff url('')no-repeat center;
}
Setiap kita posting, tuliskan kode <div class="jovie"> sebelum text, dan </div> setelah text....
--> Kesimpulannya, Hover pada CSS adalah saling memanggil, yaitu
.codejovie {
}
}
dipanggil dengan menggunakan hover :
.codejovie:hover{
}
}
Kemudian keduanya dipanggil lagi dengan menaruh kode <div class="codejovie"> sebelum text, dan </div> setelah text....Apabila tidak ada sistem panggil memanggil, maka hover tidak akan berfungsi
PS* : Seluruh kode-kode CSS yang ada diantara "{" dan "} silahkan atur sendiri sesuai dengan selera teman-temen..
Selamat Mencoba, Semoga bermanfaat ;)
sumber : jari-jari lentik Jovie :D
This
54 comments:
hihihi..pertamax dulu boleh kan ya???
hahaha..ini dia caranya rupanya ya...hehe thx for sharing mbak...
eh eh,,tapi kalo buat wordpress apa bisa pake yang ginian ya???
hemm..ahh kalo gak bisa..ntar saiah kasik tahu temen saiah yang pake blogspot ajah..hehe
Banyak amat yak kekasihnya? jade bingung mo tak nikahin ama siapanya....
kreatif yah....sukses deh....oya...pagi juga jovie
kapan2 aku coba dehh...sekarang blm sempat...!! photonya serem bgt sihh jop??
OOh gitu, manggut2x sambil ga ngerti:D
wait.. makin Ocreh aja nih jovie. apalagi lihat contoh-2, pas di arahin ke gambarnya, lho ko photo jovie di pampang juga ternyata.
kaburrrrrrrrrrrrrrrrrrrrrrrrrrrrr.........
mripate kok dadi bulak tho non, kamu apain?hi..hi..
dari dulu gue udah nyangka tuh, wajah aslinya jovie.hehehehe
Mantabsssssssssssssssss
baru tadi pagi ane datang main ke istananya dinda jovie ini dan mendapatkan artikel terbaru tentang skin YM.. eh sekarang udah ada yang baru lagi,,
dinda jovie emang gak ada matinya dalam memanjakan para tamu..
oya ngomong2 tentang Mister Linky's, dinda bisa daftar dulu di http://www.blenza.com/linkies/
dan untuk tutornya dinda bisa baca disini http://www.misterlinky.net/blog/
Sep!
kode ini juga bisa jovie
.codejaloee {
font-family: 1.2em 'Courier New', Courier, Monospace;
display:block;
overflow: auto;
text-align: left;
... }
terserah sih..wekekkekekek
"Sumber: jari-jari lentik Jovie"
Wuakakakakak....
Hmmm... tapi, bagus banget mbak... disini diterangin kalo gitu itu, ternyata fungsinya buat manggil.... aku masih belum ngeh ama yg begituan....
Jadi dikasih kesimpulan seperti itu, sungguh membuatku belajar.... Makasih banyak.....
jiahhh aku kira kekasihnya mbak jovie beneran.. ehh malahan tutorial CSS... mbak btw artikel ini kayaknya udah pernah aku lihat di erova dehhh...
mmmmm....., ternyata......
tapi bole juga dink tutorialnya.....
hover? pokokna yg bikin keren mantep dah....
BETEWE
TAQABBALALLAHU MINNA WA MINKUM TAQABBAL YA KARIM. MINAL AIDIN WAL FAIZIN. MOHON MAAF LAHIR DAN BATIN YAAAA.... MULAI DARI NOL YA... HE..HE...
Wah ini baru mantaf..dapet ilmu baru lagi nih...thanks nih atas postingannya salut dech...hoby ama Coding juga
wewwww..syeremmm banget..wekekekek..kaget aku jov..??
walah ada-ada aja yg diutak atik nie..heuheuheu..
bakalan senasib ama mochal, kang jaloe, dll dah..hehehe..
sukses deh :)
hmmmmm..... kaya kenal tuh kodenya :p
hihiihi...mbak jovie demen amat ama tuh potonya.wkwkkw
wadu,,,gak salah tuh mbak
Pake code ini, dijamin pasti inget jovie terus. Hehehe
@ Kita : Kalo pake wordpress dengan nyewa hosting sendiri, katanya sih bisa Kit.....
@ Gus : Iya nih Beh..cariin yang baru aja deh Beh......
@ Bang Ir : Makasih Bang Ir...
@ Anita : iya nih, males ganti fotonya....biarin aja foto itu biar pada kaget..:p
@ Abi Bakar : Mas ABi ada2 aja....:D
@ Rohman : jadi malu nih, fotoku ketahuan ama Kang Rohman deh....:">
@ Kristina Dian Safitry : Iya nih Mbak...lupa kemaren diapain yah..:D *Ngomong2 bulak terjemahannya apa yah??*
@ Mr. KoeCheL : Duh, ketahuan deh sama Om Koechel....jadi malu.:">
@ Kaka : Thx..
@ Rida : Pas Mas Rida kesini, baru aja publish, cuma gak refresh aja tuh....padahal kalo Jovie kasih tahu, bakal jadi pertamaxxx lhoo...:D, Thx infonya..nanti Jovie coba...
@ Googleholic : Yo'iii..!!
@ Jaloe : Iya juga yah...emang kayaknya .codejaloee mantap deh...tapi .codejovie tentu lebih mantap!!..:p
@ Syamsul ALam : Thx yah Lam....Yuuk kita sama-sama belajar..:D
@ Anasku : Iya, di erova gak aku jelasin tuh cara-caranya, aku cuma pasang fotonya aja.:D
@ Alief : Thx yah..Lief...
@ Masenchipz : Yo'aaaa.....Thx Mas, sama2 Minal Aidin Wal Faidzin...kosong-kosong yah Mas..
@ JonBetta : Iseng2 Mas..Makasih nih Mas...
@ Blogger Addicter : Wek.....bukan senasib...emang gak tahu yah kalo Mochal dan Kang Jaloee adalah murid2ku....hihiks....Thx yah Om..
@ Subagya : Iya....:">
@ Herro : Iya, itu kan fotoku...:)
@ RezKy : Gak kok...:p
@ Anthony Harman : Iya biar inget terus...Hehe...Thx Mas Anthony...
wuaaaah jovie mantap banget de... ga salah dia pacaran sama hover sekarang huehehehe... eh jov km kok makin pinter aja nih. bagi2 dong otak nya... huehhehee sukses ya buat kekasih gelap km itu... semoga si hover nggak kayak si.... heheheheh
Jov nih ada berita sadis dari rumahku tentang kekejaman seorang ibu... huehehehe
berhubung sekarang udah pindah hosting, jadi kagak bisa lagi utak-atik css ama Js. hikz,, kasian sekali saya dengan tampilan kuno blog sayah... :p
hahaha, ini udah diganti, yang dulu kalo gambar cewenya dikenain kursor, diganti ama gambar serem, buat kaget... hihihihi
mbake ituh kalo di postingan yak...? kalok misal gambar di sidebar bisa gag yak?
yoi dah sheila gank juga ya..(*kapan ya kita ngumpul lagee)...
lg bingung juga nich buanyak amir codenya..keburu ditelen si chaki ane..
wualah. tapi lg di tekape sich
Yup !
wah...mba tambah cuanggih nih...ilmunya...akh mau belajar dicini .......makasih yah ilmunya....aku mau nyoba....
wek ada yang selingkuh nih yie
wahh makin keren aja niyh Jovie...
duhh jadi makin cinta deyh ma Jovie :D
Woowww, kreatif banget mbak kita yang satu ini...
Semangat mbak! gak salah dech kalo Kang Gus ngasi julukan mbak "SI PEMBELAJAR CEPAT"..
abis mudik lebaran..jovie bagi2 ilmu, cihuuy makacih Jov!
hebatt...
masih belom nyampe nih...
jadi mesti banyak2 belajar sama yovie biar tambah pinter...
tapi penjelasannya ud oke, jadi yang newbie pun bisa ngerti...
thanks for sharing ya, jov...
Wah, thankx bgt... Akhirnya aku jadi tw cara membuat rollover image yang dari dulu pengen aku buat..
Tapi, mbak kikan.. (duh salah mlulu deh).. Mbak jovie, rollover ini hanya bisa dipakai sekali dan linknya itu dari luar (bukan dari blogger). Jadi, tidak independent. Jika, kita ingin membuat 100 rollover image saja berarti harus membuat code CSS sebanyak 100 dengan nama yang berbeda2.. Bukankah begitu.?
Dan, katanya mbak jovie begini:
[div class="jovie"] sebelum text, dan [/div] setelah text....
Tapi, sewaktu aku melihat codenya dengan view source.. Di situ tidak ada text sama sekali.. Apa yang terjadi kalau ditambah text? Hehe.
Ma'ap nanya yang aneh2... Ak penacarannn, kk..
@ Revarius : Thx Mas Reva, iya moga aja Hover baik ama aku...:D, nanti saya cek kesadisan2 Mas Reva...:)
@ Arvernester : bikin blogspot lagi aja kalo mau utak atik Mas...:D
@ Bayu Aditya : kaget yah Mas...syukur deh, berarti masih normall...hehe
@ Cebong : Bisa kok Mbak, tapi harus diatur jaraknya...
@ Awan : oo..gitu yah, ikutan dunks...:D
@ harry : silahkan Mas Harry, makasih yah Mas..
@ Pencuri kode : duh, ketahuan deh :">
@ uNieQ : iya, biar cc makin sayang, yah kudu makin canggih...hehe
@ Wendra : makasih Wen, wah jadi malu nih....
@ Papapam : Yoo' iiii....cama cama Papa..
@ Caroline : Makasih Mbak Carol, duh jadi GR nih...
@ Hendry :
- Untuk image >100 bisa juga sih tapi dengan kode lain bukan cara seperti itu,
- maksud dari <div class="jovie"> sebelum text, dan </div> setelah text...., text disini adalah ketika kita posting Mas...
Kode ini udah saya pake mbak di blog saya, posisinya ada di pemilihan halaman.
hi.hi. bikin jantung bunda kambuh liat gambar yang kedua..ha.ha
kasihan tuh foto...
Dipermak permak kayak gitu,,,,
gambar kedua keren...
wah rame bgt komentarnya...
komentar di nomer 41 bakal dibaca ga ya????
wah jovie, kayanya ku perlu berguru nih,
kalo di kampus ku males banget ketemu syntax2 web...
makin pinter...
gambar kedua keren bgt
lalalala
xixixixi
tak selamanya cinta ..
harus saling ...
memiliki ...
-halah apaan sih g nyambung-
kamsudnya, tipsnya bagus banget hehehe
samapi jatuh cinta :))
-pipi memerah-
tukeran link yuuk :) --gubraks wal jedueer..
ohhhh itu tho yg namanya hover.. weleh2... baru ngerti nih... hahaha... makasih ilmunya ya
saluuut deh Jov...
selalu kasih info2 penting...
jadi sedikit nggak gaptek kalo pas utak atik html..
tengkyuu...
akhirnya muncul disini juga postingan ini, salut untuk mbak jovie
Mbak jovie emang top bgt. berhubung saya menderita penyakit gaptek stadium 3, jadi musti pendalaman tulisan mbak jovie nih
@ Mas Ridho : Oh iya, Makasih Mas Ridho..
@ Bunda Rierie : haduh Bunda, maafin Jovie yah Bun udah bikin kaget..tapi suka kan Bund..? hehe
@ Muhammad Qori : Iya Rie, kudu dipermak2 biar unik and gak ada yang nyamain.....:D
@ Prazze : wadduh, Pak Professor mau berguru sama aku? (lagi nge test aku nih, Pak....duh...jadi malu :">
@ Apipuzi : Makasih Mas, iya keren kan? itu kan foto ku sebelum ngeBlog..kwkwkkw
@ Thom : Duh, asyik nih dicintai...*pipinya memerah juga*
@ Milla : Sama-sama Mbak..
@ Tyas : Kita belajar bareng-bareng yah Mbak...
@ Oeoes : thx Mas Oeoes, cuma posting sederhana..
@ Eeda : oh berarti ada stadiumnya yah Mbak? Mbak Eeda aja yang tulisannya keren banget stadium 3, trus Jovie stadium berapa yah?? :((
ahhhh serem bangett..
Eh, kalo kita mo ngecek kita gaptek stadium berapa tuh mesti dokter mana yakk.?? @_@
@ Debrian : Masa sih serem? itu kan fotoku hihix..
@ Hendry : ke dokter cinta kali yah..wkakakka
aaaaaarggggghhhhhhhh ga bisa... ga jalan... grrrrr.... masa malah nongol teksnya...
Mksh bnyk Mbak Jovie.cuma satu yg mmbwt daku terkesan.''Sumber:jari-jari lentik jovie''.we.ke.ke.