Home > Panduan > Bongkar !

Bongkar !

February 10th, 2010 Leave a comment Go to comments

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

~ Grazie ~
Categories: Panduan
  1. February 10th, 2010 at 11:39 | #1

    hhmmm…

    Hmmm Juga… πŸ˜€

    [Reply]

  2. February 10th, 2010 at 11:42 | #2

    kuncinya backgroundImage, onmouseover, dan onmouseout ya, Pak?

    Iya Mas… πŸ˜€

    [Reply]

  3. arsumba
    February 10th, 2010 at 12:22 | #3

    oalah… jadi bejitu to cara buatnya…. suwun pak…

    [Reply]

  4. riFFrizz
    February 10th, 2010 at 12:48 | #4

    akhirnya, terkuak juga rahasianya

    [Reply]

  5. Jalan Terus
    February 10th, 2010 at 12:56 | #5

    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

  6. septirani
    February 10th, 2010 at 14:07 | #6

    πŸ˜€ salam kenal keren euy..

    [Reply]

  7. aminhers
    February 10th, 2010 at 14:37 | #7

    ketahuan dah πŸ˜€

    [Reply]

  8. boyin
    February 10th, 2010 at 14:46 | #8

    asik boleh nih digunakan kapan2..thanks pak

    [Reply]

  9. phery
    February 10th, 2010 at 15:30 | #9

    coba dipraktekin ah

    [Reply]

  10. Muji
    February 10th, 2010 at 16:21 | #10

    Sharing yang membelajarkan. Saya suka itu.

    [Reply]

  11. February 10th, 2010 at 16:28 | #11

    nah gitu atuuhhh

    Iya Mas… πŸ˜€

    [Reply]

  12. February 10th, 2010 at 18:00 | #12

    abseenn…absen..

    [Reply]

  13. February 10th, 2010 at 18:45 | #13

    inilah akhir dari rahasia tersebut πŸ˜‰

    [Reply]

  14. arkasala
    February 10th, 2010 at 20:51 | #14

    alhamdulillah mendapatkan ilmunya Pak. Terima kasih sekali.
    Salam hangat selalu πŸ™‚

    [Reply]

  15. saka
    February 10th, 2010 at 20:59 | #15

    akhirnya dapet ilmu lagi dari pak mars…

    [Reply]

  16. cah ndeso
    February 10th, 2010 at 21:14 | #16

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

    Oke… πŸ˜€

    [Reply]

  17. February 10th, 2010 at 21:37 | #17

    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]

  18. alamendah biru
    February 11th, 2010 at 00:54 | #18

    @Hari Mulya Numpang (maaf) izin mengamankan PERTAMA dulu. Boleh kan?!.
    Makin banyak aja tips html-nya. Makin pusing aku, Pak.

    [Reply]

  19. pakacil
    February 11th, 2010 at 02:24 | #19

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

    Makin ramai makin semangat Mas… πŸ˜€

    [Reply]

  20. arisnb
    February 11th, 2010 at 08:26 | #20

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

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

    [Reply]

  21. February 11th, 2010 at 08:27 | #21

    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]

  22. casrudi
    February 11th, 2010 at 08:52 | #22

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

    Makasih juga Mas… πŸ˜€

    [Reply]

  23. February 11th, 2010 at 09:23 | #23

    ikutan menyimak mas…

    [Reply]

  24. oyen
    February 11th, 2010 at 10:18 | #24

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

    [Reply]

    Mars Reply:

    Mari Mbak… πŸ˜€

    [Reply]

  25. February 11th, 2010 at 10:27 | #25

    siipp infonya
    kereeenn

    [Reply]

  26. February 11th, 2010 at 10:32 | #26

    Bongkar? iwan fals pak?
    xixixixi…

    [Reply]

  27. meylya
    February 11th, 2010 at 10:39 | #27

    keren pak ilmunya

    [Reply]

  28. Badruz
    February 11th, 2010 at 11:01 | #28

    Mantap nih Pak bongkar muatnya…
    Benar2 mantap…

    [Reply]

  29. Rozy
    February 11th, 2010 at 11:40 | #29

    par mar satu ini memang top markotop πŸ™‚

    [Reply]

  30. adin
    February 11th, 2010 at 15:06 | #30

    ternyata codingnya g panjang y…

    [Reply]

  31. February 12th, 2010 at 00:00 | #31

    Bikin ngeblog semakin semangat… (ning rung praktek2)

    [Reply]

  32. adzim
    February 12th, 2010 at 14:48 | #32

    info bagus nih. kujung balik di blog saya masadzim

    [Reply]

  33. zenteguh
    February 13th, 2010 at 01:04 | #33

    waduh pak, biarpun dibongkar sampek pondasinya saya tetap mumet…

    [Reply]

  34. BlogCamp
    February 13th, 2010 at 09:08 | #34

    haaa..ilmu baru lagi, tak pelajari ach, entar dipraktekkan pelan.
    Terima kasih mas
    Salam hangat dari Surabaya

    [Reply]

  35. TuSuda
    February 13th, 2010 at 09:58 | #35

    Ide kreatifnya betul-betul tidak tertandingi PAK..SALUT deh…

    [Reply]

  36. ndop
    February 16th, 2010 at 21:56 | #36

    lawong aku commente mundur, dadine jik rung pati paham sing dimaksud…

    [Reply]

  37. bimo
    June 22nd, 2010 at 11:43 | #37

    ohh gtu toh..mantab

    [Reply]

  1. February 10th, 2010 at 17:17 | #1
  2. February 11th, 2010 at 18:24 | #2

silakan buka katalog untuk melihat postingan lainnya
~ terima kasih ~