Musik Jalelae
Artikel informasi hiburan
Cara Membuat Spoiler (Tombol Buka/Tutup)
Posted by jalelae at 22 September 2018 13:07
Category: Artikel pos info, Semua catagory

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 :
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 :
  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 :
  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.... 
Sumber : Saung Web

2 komentar:

  1. makasih banyak buat tutornya,,, ijin praktek yaaa...

    http://goo.gl/PthtFc

    BalasHapus
  2. share yang mamfaat sob.. n tetap semangat ya.. update artikel yg mamfaat lainnya.., www.metropulsareload.cf

    BalasHapus

Related Posts

Comments

Comments (0), Result comments to "Cara Membuat Spoiler (Tombol Buka/Tutup)"
No comments yet. Why not make the first one

New comment

Sign in with My account

Name *


URL *


Content *
(Some BBcode tags allowed)





  • Category

  • 20-widget-animasi-lucu-dan-keren. (1)
  • AL Qur"an ayat (16)
  • Artikel pos info (73)
  • css menggunakan div (21)
  • Kode kode HTML (1)
  • Kode Warna HTML (2)
  • musik hiburan (4)
  • Permainan Game (0)
  • Semua catagory (2)
  • Seputar css (5)
  • Tex berjalan (1)