Bongkar !
Saatnya membongkar kode html dari postingan berjudul Bersembunyi. Trik yang dipakai tak lain adalah teknik background, tetapi dikombinasi dengan efek mouse.
Langkah pertama adalah menyiapkan image yang nantinya berfungsi sebagai background. Sebaiknya dominan gelap, sehingga fungsinya sebagai background benar2 maksimal. Untuk warna teks disamakan dengan warna dasar template atau area postingan.
Kodenya:
<div style="float:center; padding-top:8px;padding-bottom:6px;padding-left:10px;padding-right:10px;" onmouseover="this.style.backgroundImage='url(alamat url image)'" onmouseout="this.style.backgroundImage='none'">
<span style="color: #ffffff; font-family: georgia;">
<p style="text-align: justify;">
tuliskan paragraf pertama di sini</p>
<p style="text-align: justify;">
tuliskan paragraf kedua di sini</p>
<p style="text-align: justify;">
tuliskan paragraf ketiga di sini</p></span>
</div>
Gantilah kode berwarna merah dengan ukuran dan isian yang sesuai. Alamat url image adalah alamat tempat penyimpanan gambar. Penulisannya harus lengkap, misalnya
http://marsudiyanto.info/wp-content/uploads/kupu.gif
Jika image yang kita pakai bermotif, usahakan ukurannya proporsional dengan area posting. Tetapi jika warna backgroundnya sewarna, maka ukuran bisa kita abaikan karena secara otomatis akan berulang.
Untuk sampel dan kode html lengkap bisa dilihat di www.marsudiyanto.com
Selamat berkreasi, selamat bersenang2 dengan html… 
hhmmm…
[Reply]
kuncinya backgroundImage, onmouseover, dan onmouseout ya, Pak?
[Reply]
oalah… jadi bejitu to cara buatnya…. suwun pak…
[Reply]
akhirnya, terkuak juga rahasianya
[Reply]
nah itu..
kalo touchscreen kan ga ada mouse pak,
jadi kodenya onfingerover..
wakakaka…
[Reply]
Mars Reply:
February 21st, 2010 at 11:02 am
Uji coba reply 1
[Reply]
Mars Reply:
February 21st, 2010 at 11:02 am
reply 2
[Reply]
Mars Reply:
February 21st, 2010 at 11:02 am
dan ini reply 3
[Reply]
ketahuan dah
[Reply]
asik boleh nih digunakan kapan2..thanks pak
[Reply]
coba dipraktekin ah
[Reply]
Sharing yang membelajarkan. Saya suka itu.
[Reply]
nah gitu atuuhhh
[Reply]
abseenn…absen..
[Reply]
inilah akhir dari rahasia tersebut
[Reply]
alhamdulillah mendapatkan ilmunya Pak. Terima kasih sekali.
Salam hangat selalu
[Reply]
akhirnya dapet ilmu lagi dari pak mars…
[Reply]
nganti lali rep absen sama Pak Mars ki
tak tunggu resep2 lainnya Pak. Ben Flashdisk saya ini kebak sama resep HTML
[Reply]
cihuy………..Pak Guru Mars akhirnya gak tahan lama2 sembunyi di petak umpet.
buka rahasia deh
Terima kasih banyak ya Pak Guru yang selalu senang berbagi ilmu
salam.
[Reply]
@Hari Mulya Numpang (maaf) izin mengamankan PERTAMA dulu. Boleh kan?!.
Makin banyak aja tips html-nya. Makin pusing aku, Pak.
[Reply]
lama² saya bisa ketularan pak mars juga ini
yg kalau posting suka pakai macam²
[Reply]
wah udah jadi pakar html dan css programming….. siip
[Reply]
kemaren kodenya udah tak colong dengan klik kanan dan view page source pak
[Reply]
Ketika saya butuh ini pasti blog Pak Mars yang pertama kali saya ubek2…
Terima kasih infonya Pak….
[Reply]
ikutan menyimak mas…
[Reply]
Oyen masih belon mudeng…hu..hu…sek pak, tak mikir sek
[Reply]
Mars Reply:
February 21st, 2010 at 1:09 pm
Mari Mbak…
[Reply]
siipp infonya
kereeenn
[Reply]
Bongkar? iwan fals pak?
xixixixi…
[Reply]
keren pak ilmunya
[Reply]
Mantap nih Pak bongkar muatnya…
Benar2 mantap…
[Reply]
par mar satu ini memang top markotop
[Reply]
ternyata codingnya g panjang y…
[Reply]
Bikin ngeblog semakin semangat… (ning rung praktek2)
[Reply]
info bagus nih. kujung balik di blog saya masadzim
[Reply]
waduh pak, biarpun dibongkar sampek pondasinya saya tetap mumet…
[Reply]
haaa..ilmu baru lagi, tak pelajari ach, entar dipraktekkan pelan.
Terima kasih mas
Salam hangat dari Surabaya
[Reply]
Ide kreatifnya betul-betul tidak tertandingi PAK..SALUT deh…
[Reply]
lawong aku commente mundur, dadine jik rung pati paham sing dimaksud…
[Reply]
ohh gtu toh..mantab
Postingan bimo : Global Management Conference, Bali, 2010
[Reply]