17 Cara Membuat Spoiler Pada Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Postingan kali ini tutorial cara membuat spoiler pada blog. Apa spoiler itu? Lihat contoh berikut! Klik tab berikut!

Sudah mengerti maksudnya? Postingan ini untuk menjawab pertanyaan seorang teman, (de' suciyellow), syukur kalau bisa bermanfaat bagi yang lain...

Berikut caranya:

  • Pada dasbor klik tata letak=> klik elemen halaman=> tambah gadget=> HTML/JavaScript
  • Copy dan paste kode berikut kedalam kolom kontent:

 

<div><div style="margin: 20px; margin-top:5px"><div style="margin-bottom: 2px;" class="smallfont"><input style="margin: 0px; padding: 5px; width: auto; " value="Show" 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 = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
DISINI LETAK KONTENT ANDA
</div></div></div></div></div><blink><a href=http://amatullah83.blogspot.com/2009/12/cara-membuat-spoiler-pada-blog.html>Klik cara membuat widget ini</a></blink>

Teks yang berwarna biru bisa anda ganti katanya sesuai selera misalnya seperti contoh diatas, begitu pula dengan kontentnya bisa diisi dengan banner, buku tamu, link teman dan lain lain! Untuk background warnanya bisa lihat kodenya disini
  • Jangan lupa simpan dan simpan lagi!
  • Lihat hasilnya!

Semoga bermanfaat!


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

17 komentar :

  1. makasih ya kak,,aQuw dah cobaa,,
    aquw nanya lg duunk
    hehe,,sbnerna dh prnah q tanyain,,tp mgkn blm smpet kk jwb,,gmn kak cra buat link yg klo disorot jdi membesar gt?? (aq gk tw istilahnya apa) n gmn cara isi postingan pd tab navigasi? misal tab "ttg saya",,mw sya isi postingan ditempat itu..thx yaa

    BalasHapus
  2. Pertama: Makasih kembali de!

    Kedua: Anaa g' ingat klu ade pernah nanya itu? Iya ntr anaa buat postinganx lagi, mudah bgt kok!

    Ketiga: Khan udh anaa jawab de, dgn menjawab komentar ade di postingan cara membuat menu tab navigator horizontal, cek lg ya!

    BalasHapus
  3. bagus banget nih, bisa rapi halamannya...
    lama tidak kesini banyak ketinggalam nih...
    makasih sudah berbagi ilmunya.

    BalasHapus
  4. 'afwan ukh! syukron jazaakillahu khrn!

    BalasHapus
  5. oh iya kak udah,,maksih ya,,ditunggu ya postingan berikutnya,,kk pinter bgt c!! hihi :D

    BalasHapus
  6. @ suci: apanya yg udah de?

    BalasHapus
  7. he2 yang benar de? lg disini g' ya?

    BalasHapus
  8. info yg bermanfaat sama kayk postingan gw sob " http://kianhome.blogspot.com/2009/12/cara-buat-tombol-buka-tutup.html "...

    keep blogging always

    BalasHapus
  9. @ kian: terimakasih apresiasinya

    BalasHapus
  10. wah banyak tipsnyanih..sob.. mestisering2 mampir ke sini deh hehe..makasih ya

    BalasHapus
  11. nah ini dia ketemu, mba' kok menu search-nya di hilangkan

    BalasHapus
  12. mba' setelah di coba kayak kurang gimana gitu..., hehehe, mba' bisa gak button spoilernya di ganti dengn teks jadi bisa saya pasang di header

    terima kasih

    BalasHapus
  13. @ Suraduja: g' dihilangin hanya rencana mau ganti google custom search tp blm sempat.

    Iya bisa. Klu link bgn akhir jg menggangu bisa dihilangin. Silahkan saja hapus.

    Mohon maaf ats ketidaknyamanan ini, blm smpat update lagi. InsyaAllah bbrpa waktu kdpn.

    BalasHapus
  14. wow keren kren tutorialnya...
    saya orang awan bgt mohon pencerahannya dong bikin tutorial bagi orang awam bgt kaya saya.
    1.Saya masih bingung untuk menempatkan kode2 CSS itu dimana apa harus selalu di atas skin?
    2. Kemudian jquery umumnya ditempatkan dimana ?
    3. Apa semua file jquery yg didownload di masukan ?
    4. Kadang untun membuat menu itu ada yang pakai ADD WIdget kadang ga gimana itu?
    terimakasih saya tunggu infonya

    BalasHapus
  15. @ Anonim: Mngapa tdk memberikan identitas yg jelas? Mengapa meninggalkan 3 komentar yg sama didua postingan? Komentar copas nie? Sy sdh jawab pertanyaanx pada postingan cara membuat effec hover image. Krn sy pertama kali mmbc pertanyaan sama diatas pd postingan trsbt

    BalasHapus
  16. Mantab gan, senang bs berkunjung kesini, salam kenal. kunjungan balik


    www.produsensusukambingbubuk.com
    www.produsensusukambing.com
    www.globalmandirisejahtera.web.id
    www.sarimaduutama.web.id

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!