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.net/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… πŸ˜‰

43 thoughts on “Bongkar !

  1. nah itu..
    kalo touchscreen kan ga ada mouse pak,
    jadi kodenya onfingerover..
    wakakaka…

    [Reply]

    Mars Reply:

    Uji coba reply 1

    [Reply]

    Mars Reply:

    reply 2

    [Reply]

    Mars Reply:

    dan ini reply 3

  2. Pingback: Seni Menaikkan Pengunjung Blog | cas on the blog
  3. alhamdulillah mendapatkan ilmunya Pak. Terima kasih sekali.
    Salam hangat selalu πŸ™‚

    [Reply]

  4. nganti lali rep absen sama Pak Mars ki πŸ˜€
    tak tunggu resep2 lainnya Pak. Ben Flashdisk saya ini kebak sama resep HTML πŸ˜†

    Oke… πŸ˜€

    [Reply]

  5. 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.

    Makasih Bun, kalau apa yg saya tulis bisa berkenan dihati sahabat yg lain… πŸ˜€

    [Reply]

  6. lamaΒ² saya bisa ketularan pak mars juga ini
    yg kalau posting suka pakai macamΒ² πŸ™‚

    Makin ramai makin semangat Mas… πŸ˜€

    [Reply]

  7. wah udah jadi pakar html dan css programming….. siip

    Belum Mas…
    Saya juga masih belajar… πŸ˜€

    [Reply]

  8. kemaren kodenya udah tak colong dengan klik kanan dan view page source pak πŸ˜€

    Bebas kok Mas…
    Saya sendiri dalam belajar juga kadang klick kanan juga… πŸ˜€

    [Reply]

  9. Ketika saya butuh ini pasti blog Pak Mars yang pertama kali saya ubek2… πŸ™‚
    Terima kasih infonya Pak….

    Makasih juga Mas… πŸ˜€

    [Reply]

  10. Oyen masih belon mudeng…hu..hu…sek pak, tak mikir sek

    [Reply]

    Mars Reply:

    Mari Mbak… πŸ˜€

    [Reply]

  11. Pingback: metaMARSphose » Meta Messenger!! (M2)
  12. haaa..ilmu baru lagi, tak pelajari ach, entar dipraktekkan pelan.
    Terima kasih mas
    Salam hangat dari Surabaya

    [Reply]

Leave a Reply

Your email address will not be published. Required fields are marked *