11/29/10

Cara Membuat Spoiler (Tombol Buka/Tutup)


Inilah Cara Membuat Spoiler atau Tombol Buka/Tutup pada blog yang disimpan di sidebar atau dalam postingan , selan itu sekalian juga Cara Membuat Spoiler Show/Hidden Widget .

Cara Membuat Spoiler Pada Sidebar atau Postingan

Sebenarnya Spoiler bisa ditempatkan dimana saja di Sidebar, Komentar atau di postingan , Dengan Spoiler kita bisa menghemat tempat dll. Cara membuatnya  sama saja tinggal menggunakan kode HTML  seperti di bawah ini :

<div style="margin-bottom: 2px;">Judul Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Buka" style="margin-top: 5px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;"> Silahkan masukan Isi Spoiler disini,  Bisa teks atau gambar / foto  </div></div></div>

Perhatikan tulisan berwarna merah, itu bisa diganti sesuai keinginan. dan isi pokok dari spoiler bisa berupa teks atau gambar. Contoh Spoiler bisa dilihat pada blog ini sementara spoiler dalam postingan bisa dilihat di sini.

Cara Membuat Spoiler Show / Hidden Widget

Untuk Membuat Spoiler Show/Hidden Widget  kita harus merubah kode HTML langsung pada template blog., widgetnya bisa yang mana saja.. misalnya pada Daftar Isi, Label , Komentar atau Link Sahabat dll.

Langkah membuatnya :

  1. Masuk ke Blogger , pilih Design atau Layout , lalu Edit HTML
  2. Sebaiknya backup dulu dengan Download full template
  3. Centang Expand Widget Templates
  4. Cari kode widget yang akan di rubah .. nah berdasarkan pengalaman sebaiknya tiap widget itu diberi nama, jadi mudah untuk mencarinya.. tinggal Ctl+F lalu ketik nama widgetnya langsung ketemu deh.
  5. Contoh yang akan saya buat Spoilernya adalah Link Sahabat.,

    Widget Link Sahabat kodenya seperti ini :

    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
    <b:widget id='HTML8' locked='false' title='Link  Sahabat' type='HTML'>
    <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>
       
    <h2 class='title'><data:title/></h2>
      </b:if>
      <div class='widget-content'>
        <data:content/>
      </div>

      <b:include name='quickedit'/>
    </b:includable>
    </b:widget>

  6. Ganti kode yang berwarna pink dengan script berikut

    <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>

  7. Copy kode dibawah ini & simpan diatas kode </b:includable>

    <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>

  8. Bila kodenya digabungkan maka  akan seperti ini :

    Klik Kotak Spoilernya untuk melihat :
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'>
    <b:widget id='HTML8' locked='false' title='Link  Sahabat' type='HTML'>
    <b:includable id='main'>
      <!-- only display title if it's non-empty -->
      <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
    </b:if>
    <div class='widget-content'>
    <data:content/>
    </div>

    <b:include name='quickedit'/>
    <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
    </b:includable>
    </b:widget>

  9. Sampai disini urusan Spoiler selesai, tinggal Save Templates
Selamat mencoba, Cara Membuat Spoiler ( Buka/Tutup)  dan Cara Membuat Spoiler Show /  Hidden Widget . Semoga bermanfaat....


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Cara Membuat Spoiler (Tombol Buka/Tutup), bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

103 comments:

  1. Ini namanya postingan kejar tayang.. mau akhir bulan ,, semua yg dah di konsep musti tuntas.. tas..tas.. hehe

    ReplyDelete
  2. menarik, saya penah jga membuatnya

    ReplyDelete
  3. Ini ide yang menarik untuk penampilan blog kita.
    Saya akan cek dulu.

    ReplyDelete
  4. mantab mas tutornya.. Tapi belum kepikiran tuk pake spoiler.. Hhee

    ReplyDelete
  5. kalau spoiler biasa sob?
    Yang di Java Script bikinnya gimana?

    ReplyDelete
  6. postingan kejar tayang..ya penting lah DARI PADA GAK...kkwkwkwkwkwkwkwkwkwkw

    ReplyDelete
  7. nice artikel sobat......
    di save dulu...
    jgn lupa mampir balik ya....

    ReplyDelete
  8. @Belantara Indonesia:
    Bener sob. daripada gakk mumpung PLN gak gangguan.. hahaa

    ReplyDelete
  9. salam sobat
    saya mau coba tutorial ini.
    buka tutup tombol widget di sidebar.
    trims sudah diberikan caranya.

    ReplyDelete
  10. selama ini saya cuman sering lihat aja tombol spoiler buka tutup belum tahu codenya..thanks sob infonyaa

    ReplyDelete
  11. Makasih tutorialnya...
    Bisa hemat tempat...

    ReplyDelete
  12. @NURA: Silahkan dicoba Mba Nur.. Gimana Sandalnya gak hilang lagi sewaktu di Mesjid Nabawi..??

    ReplyDelete
  13. @marsudiyanto: Yups.. salah satunya ya begitulah sob..

    ReplyDelete
  14. Selain menghemat tempat mungkin juga bisa mempercepat load ya..

    ReplyDelete
  15. @Saung Web: Woalah, ada juga ya kejar tayang, yang penting gak dikejar setoran kan sob?? hehehe

    ReplyDelete
  16. ahaa akan segera dipraktekkan kawan

    ReplyDelete
  17. ikutan baca2 di pagi ini.
    spoiller close open makin menghemat ruang

    ReplyDelete
  18. salam sobat
    thanks sharenya
    aku masih belum mengerti hal ini

    ReplyDelete
  19. wah, aku udh tau sob...
    ga pa2 deh...
    :)
    iya nih, aku blm punya ide utk posting yg baru...

    ReplyDelete
  20. ya sobat, menghemat tempat. tapi saya belum berani otak-atik kode HTML, takut terjadi kekacauan. sedikit-sedikit kali ya?

    ReplyDelete
  21. @penghuni60:Bahan post kan banyak.. tentang udang Cirebon misalnya.. haha

    ReplyDelete
  22. mantafb tuto nya sob.. :) ini yg sy cari..

    ReplyDelete
  23. makasih ya mas atas tipsnya.sangat bermanfaat

    ReplyDelete
  24. Thanks gan bwt Show-hide spoiler na...

    mampir ke blog ane jg yaw..

    Photoshop TutorialTips Blog

    ReplyDelete
  25. Wah, saya juga pasang di kotak komentar saya. Sorry melenceng dari topik. Sobat pakai "replay" komentar, kayaknya bikin kebanyakn link keluar sob. Coba di cek aja. Karena saya dulu pakai, tapi saya rasa kebanyakan outbound link, "kata" pakar SEO kurang bagus di SEO. Katanya sob, semua terserah anda. *kayak iklan ya hehehe *

    ReplyDelete
  26. weh..pa kabar mas saung! postingan kejar tayang tu apaan Gan!

    ReplyDelete
  27. kunjungan perdana Gan! kunjung balik gan! ke blog yg baru punya saya!

    ReplyDelete
  28. waahhh,,makasi gan tutorialnya.. banyak guna nya .. hahaha

    ReplyDelete
  29. hy. slam kenal mas..
    backling mas.. udah sya link blognya mas tuh..:)
    thanks

    ReplyDelete
  30. makasih spoilernya kang saung, jadi tau n tambah ilmu lagi :)

    ReplyDelete
  31. Wah! bermanfaat banget nih sharingnya...
    ijin coba yo kang...

    ReplyDelete
  32. keren euy tipsnya,
    itulah manfaatnya banyak jala2, banyak ilmu didapat,
    sukses selalu ...

    salam.

    ReplyDelete
  33. Thanks InfoNya..

    Kalo ngatasi text bawaan kaya gini gimana "You can replace this text by going to "Layout" and then "Page Elements" section. Edit " About "?
    nempel di sidebar-ku.

    mohon penjelesannya ya..
    terima kasih.

    ReplyDelete
  34. permisi kepada juragan yang punya ni blog, gw mampir di mari ni gan, dari tadi muter-muter dari mbah google, mbah google kasih wangsit buat mampir di blog agan, di postingan agan ini. nais postingan gan, minta ijin dulu nech buat bacanya..

    komen :
    beda banged ya deg script spoiler di forum.. lebih rumit euy.. ijin save as yach..

    Signature
    Hymen and Tutorial Modding Sony ericsson|Free Download Female Wallpeper Artist|Some Trips and Trick about Blog

    ReplyDelete
  35. permisi boss numpang liat foto foto mano yang bagus bagus, seksi2 abis..

    ReplyDelete
  36. he lumayan dapet contekkan...makasih ye..
    ----------------------------------------------
    Cooking Recipes

    ReplyDelete
  37. makasih atas infonya mas
    membantu bwanget

    ReplyDelete
  38. trimss info nya sangat bermanfaat bagi saya..

    ReplyDelete
  39. bagus banget tipsnya. menarik dan mnfaaat sekali. Thanks ya. Langsung sata praktekkan

    ReplyDelete
  40. keren juga nih infonya, aku langsung coba dulu ya mas

    ReplyDelete
  41. mantap bener nih tutorialnya, sangat bermanfaat sekali gan, ane mau langsung coba ya mas

    ReplyDelete
  42. tutorialnya, mantap sekali nih gan, ane mau coba pasang dulu yah,,,

    ReplyDelete
  43. mksih ya bwt tips'y sangat bermnfaat sekali, skrg q jdi tahu deh cra'y...

    ReplyDelete
  44. koq ngak dijelasin nih tentang spoiler.. masih belom ngerti nih alias awam tpi skrng lagi belajar dunia perblogingan

    ReplyDelete
  45. mantab tenan lah iki..
    salam sukses mas bos..

    ReplyDelete
  46. AYU....IKLAN BLACKLINK DI SINI CEPAT.

    ReplyDelete
  47. Salam kenal...
    dan terimakasih ya atas informasi nya saya jadi tau semuanya?

    ReplyDelete
  48. bagu sekali nih gan, aku ijin scrifnya nih heheh

    ReplyDelete
  49. ga terasa udah mo lebaran lagi , prasaan baru kmaren kita merayakan Nikmat'a Hari Kemenangan sambil KiranChandra Ch

    ReplyDelete
  50. makasih infonya,suatu saat akan saya coba.

    ReplyDelete
  51. koq ngak dijelasin nih tentang spoiler.. masih belom ngerti nih alias awam tpi skrng lagi belajar dunia perblogingan

    ReplyDelete
  52. cocok nih,,biar mengurangi space dari hal hal yang g terlalu perlu di tampilin di sidebar

    ReplyDelete
  53. Terimakasih buta infonya,,, ane oon,,, bikin ke ghitu aja kagak bisa...

    ReplyDelete
  54. oh gini caranya buat spoiler
    terimakasih udah share

    ReplyDelete
  55. boleh dicoba juga itu gan,,kayaknya menarik

    ReplyDelete
  56. iji coba gan, sambilan cari backlink di blog link tea ini :D

    ReplyDelete
  57. makasih gan tips nya..., ane mo coba sekalian share yaa....

    ReplyDelete
  58. gan saya mau tanya nih ...
    klo blog udah dipasang Anti Copy paste dengan javascript apa klo di spoilernya masih bisa di copy paste ?

    ReplyDelete
  59. sangat bermanfaat gan...
    salam kenal

    ReplyDelete
  60. keren banget gan...tp klo untuk wordpress bisa gx nih...

    ReplyDelete
  61. tipsnya bagus mas broo,semoga bermanfaat untuk semua masyarakat..

    ReplyDelete
  62. salam kenal gan, thanks trik membuat spoilernya

    ReplyDelete
  63. Terimakasih atas informasinya..
    .kalau agan berkenan follow blog saya yah? http://blogku-sederhana.blogspot.com/

    ReplyDelete
  64. salam kenal gan, artikelnya menarik dan menambah wawasan saya. Jangan lupa kunjungan baliknya, blog saya menyediakan berbagai macam artikel seperti :
    Kata Kata Cinta
    Foto Artis Korea
    Kata Kata Galau
    wallpaper keren
    salam sukses ya gan

    ReplyDelete
  65. spoiler ini apa bagus untuk SEO atau tidak ya ? soalnya newbie baru belajar seo

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger