Membuat Spoiler Di Sidebar

Diposkan oleh Hery Prasetyo Wednesday, March 24, 2010
بسم الله الرحمن الرحيم

Membuat Spoiler di sidebar. mungkin nama spoiler sangat kental dan identik dengan situs forum terbesar di Indonesia, dan sudah lama bisa dipasang pada blog. mungkin tutorial ini hanya sekedar repost untuk menjawab pertanyaan dari sahabat HAPIA Mesir.

Sebelumnya HAPIA Mesir telah menerima Tag Blog Dan Award dari sahabat-sahabat HAPIA Mesir.

Tutorial membuat spoiler di sidebar ini sepenuhnya untuk menjawab pertanyaan dari Mbak Reni tadi malam (waktu Mesir). dari sekian banyak script spoiler, script inilah yang paling cocok untuk dipasang di sidebar. berikut caranya :

- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak".
- Silahkan klik "Tambah Gadget" dan pilih "HTML/JavaScript".
- Copy paste code berikut ini kedalamnya :


<center><div><input style="margin: 0px; padding: 0px; width: 100px;" value="Lihat Isi" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Link!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Hide'; }" type="button">
<div id="show" style="border: 0px; margin: 0px; padding: 4px; display: none; width: 350px;">

CODE GADGET ANDA YANG DISEMBUNYIKAN

</div></div></center>


Dan hasilnya seperti ini (klik tombolnya):



* Untuk code spoiler yang bisa "BUKA/TUTUP" silahkan memakai code berikut :

Code Spoiler BUKA/TUTUP Disini

# Ganti "Lihat Isi" dengan kata yang anda inginkan.
# width: 100px; adalah lebar tombol spoiler.
# width: 350px; adalah lebar area isi spoiler.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

35 Responses to Membuat Spoiler Di Sidebar

  1. Rock Says:
  2. Makasih untuk tutorialnya kawand...

     
  3. Thanks banget...., aku coba dulu ya... Ntar kalau udah berhasil aku balik lagi, utk laporan. ^_^

     
  4. HAPIA Mesir Says:
  5. Rock@ sama2 kawan...
    Mbak Reni@ sama2 mbak..semoga membantu...

     
  6. hebaaattt

     
  7. reni Says:
  8. Alhamdulillah berhasil.., tapi yg bisa aku buat cuma popular post. Soalnya yg lain pake gadget dari Blogger.. yg tak pake HTML/Java Script

     
  9. makasih kawan ...nie yang tak cari cari .....shheeeppp dah

     
  10. HAPIA Mesir Says:
  11. Mbak Reni@ iya mbak..terbatas untuk yg punya code saja..tapi utk gadget dari google yg bisa make code bisa dimasukkan juga mbak...

     
  12. alfi Says:
  13. maksih mas hapia...
    ana copas y ntuk ana koleksi..

     
  14. NURA Says:
  15. salam sobat
    wah spoilernya lucu-lucu dan keren nich,,
    saya juga pingin buat spoiler di didebar.
    trims sharingnya.

     
  16. Jaka Utama Says:
  17. :) ea keren neh sob
    ym ol dong sob T.T

     
  18. aryadevi Says:
  19. siiplah sebagai penambah koleksi tips trik dari blogger, ok izin copy...

     
  20. HAPIA Mesir Says:
  21. ALL@ semoga bermanfaat...

     
  22. iswady Says:
  23. mantap sobat, kalau untuk foto gimana caranya?

     
  24. HAPIA Mesir Says:
  25. iswady@ kalo utk foto tinggal tarus code fotonya di bagian tulisan CODE GADGET ANDA YANG DISEMBUNYIKAN.

     
  26. Rizky2009 Says:
  27. keren nih tp alangkah lebih bagus kalau spoiler di pasang di sidebar, bordernya dihilangkan saja

    kode seperti ini border-style: solid; dirubah jadi seperti ini border-style:;
    terus kode yang ini border-width: 1px; dirubah jadi seperti ini border-width:; pasti lebih keren kalau g pakai border "sekedar tambahan aja"

     
  28. gendu Says:
  29. wah makasih infonya.....
    akhirnya ketemu juga.....

     
  30. phonank Says:
  31. Okeh.. kita coba praktek sekarang,, thanks

     
  32. HAPIA Mesir Says:
  33. Rizky2009@ makasih sobat... iya lebih baik bordernya dihapus untuk dipasang disidebar..

     
  34. Tips yang sangat menarik dan bermanfaat, ijin copy sahabat. Salam

     
  35. Bunglon Blog Says:
  36. asalamualaikum...
    ahah spoilernya mantep sob..
    oh iy thanks buat tag blog nya saya jadikan PR dl sob
    nanti insyaalah saya kerjakan..
    sukses slalu sobat!

     
  37. assalamu'alaikum
    ijin copas sob
    buat percobaan di blog
    sukses selalu dah pokoknya

     
  38. reni Says:
  39. Alhamdulillah..., sekarang tampilan blogku tak terlalu panjang lagi.
    Hanya tinggal recent comment yg tak bisa aku 'pendekkan'
    Bagaimana..., apakah sudah jauh lebih baik ?
    Terima kasih banyak atas bantuannya.

     
  40. HAPIA Mesir Says:
  41. Bunglon Blog & Zamzami Saleh@ waalaikum salam sobat...silahkan..semoga bermanfaat...

    mbak reni@ iya mbak...sama-sama...senang bisa membantu..sudah saya lihat..jadi g terlalu panjang lagi..

     
  42. thx 4 share ^^

    bs utak atik nie

    have a nice day ^^

     
  43. akhatam Says:
  44. Wah keren mas HAPIAH untuk info spoilernya..

     
  45. harto Says:
  46. trims nih atas ilmunya sangat membantu.
    sukses selalu n tetap semangat

     
  47. Bananawebs Says:
  48. Terima kasih ilmunya bro :)

     
  49. ihsan mufthi Says:
  50. tak praktekin sob,, artikel bermanfaat nich

     
  51. Fais cWaKep Says:
  52. iya ternyata tutor kita sma..
    BUAT SPOILER

     
  53. keren sob... nice info

     
  54. terimakasih informasi nya sob :)

     
  55. udung Says:
  56. menurut saya spoiler pada sidebar tidak ada fungsi khusus selain mencoba memasukan item/bagian pada tempat tertentu dengan unsur pemaksaan, hihihihi.... maksudnya begini ; spoiler digunakan biasanya untuk tidak langsung menampilkan gambar/item yg ingin dipublikasikan dengan beberapa alasan tertentu misalnya : menghemat bandwith, memperkecil jangkauan pemandangan pada monitor/webite untuk tetap fokus pada apa yg ingin disampaikan/dituliskan pada website, sedikit trick yg bermaksud utk aksesoris...

    selain alasan tadi diatas, penggunaan spoiler hanya untuk have fun saja. padahal jika kita mengunjungi website dengan tujuan "web/blog apa sih?" boro-boro untuk liat spoiler, untuk mengisi komentar yang sesuai dengan isi postingan aja kadang sudah jarang ditemukan....

    btw, nice infonya.... maap panjang bgt hihihihi

     
  57. HAPIA Mesir Says:
  58. udung@ terima kasih atas opininya. panjang juga gpp..
    memang bergitu beberapa tujuan penggunaan spoiler pada sidebar..

    mungkin jika kita menilai dari pengunjung sesama blogger memang fenomenanya seperti itu..akan tetapi terkadang juga kita mempertimbangkan pengunjung selain blogger..yang mana memang mereka sampai ke blog kita karena mencari informasi...jadi akan berguna..dan diperhatikan oleh mereka jika mereka merasa membutuhnya mencari..

    selain juga menghemat tempat..juga berguna memperpendek blog/site yang kelihatan terlalu panjang...demi kenyamanan pengunjung juga...bukan hanya sesama blogger...

     
  59. Syam Oby Says:
  60. waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaahhhhhhhhhhhhhhhhhhh,,,,,,,,,,,,,,,,,,,,,,,

    terbantu sekali aku...
    makasih yah kak >=)

     
  61. Januardi Says:
  62. .info dan tutorial yang simpel dan mudan untuk di terapkan...kalau boleh tukeran link...s3neng banget rasanya ya...,bisa tukeran tink kn mas?? link blog ini sudah saya pasang diblog saya (a-mobile-blogger.blogspot.com) and tentunya thanks atas share info y..

     

Post a Comment