Spoiler Show hide untuk Gadget

Bismillah, Salam blogger! Gimana kabarnya nih gan? mudah-mudahan sobat selalu sehat selalu dimanapun sobat berada. Di kalangan para blogger, siapa sih yang tak kenal dengan spoiler show hide, yang sebagian besar artikel yang diposting oleh mereka semua membahas tentangnya. Mungkin saya tidak perlu jabarkan lagi mengenai spoiler show hide karena pada artikel sebelumnya saya telah bahas.
spoiler show hide untuk widget
Pada artikel itu semuanya ternyata saya belum membahas jika spoiler show hide bisa sobat gunakan untuk widget atau gadget di blog sobat,misalnya saja widget jam, kalender, atapun widget lainnya sehingga dapat meringkas tampilan blog sobat tidak terlihat penuh atau berantakan.
Jadi bagi sobat yang ingin agar widget yang banyak di blog sobat bisa di show hide-kan maka akan jelaskan caranya di bawah ini.
1. Login ke blogger atau klik disini»
2. Pilih Tata letak » Tambah gadget » Html/JavaScript.
3. Copy paste script di bawah ini.
<div id="spoiler">
<div><input style="padding-bottom: 0px; margin: 5px; padding-left: 0px; width: 189px; padding-right: 0px; height: 21px; font-size: 11px; font-weight: bold; padding-top: 0px" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show'; }" name="button" value="Ranking Alexa" size="1" type="button"></div>
<div style="border-bottom: white 1px solid; border-left: white 1px solid; padding-bottom: 2px; margin: 5px; padding-left: 2px; width: 98%; padding-right: 2px; display: none; border-top: white 1px solid; border-right: white 1px solid; padding-top: 2px" id="show">
<div style="border-bottom: #aaccee 1px solid; border-left: #aaccee 1px solid; padding-bottom: 7px; margin: 0px; padding-left: 7px; padding-right: 7px; background: #ebf3fb; color: #000000; border-top: #aaccee 1px solid; border-right: #aaccee 1px solid; padding-top: 7px">
<p style="text-align: justify">Letakkan script widget anda disini<br></p></div>
<div id="hide"></div></div></div>
Catatan:
  • Tulisan yang berwarna merah silahkan sobat ganti dengan code scirpt widget yang ingin sobat show hide kan.
4. Kemudian simpan dan lihat hasilnya.
Kurang lebih hasilnya akan nampak seperti di bawah ini.
Semoga artikel di atas dapat membantu sobat yang sedang ingin mereparasi blognya agar tampilannya menarik tentunya dapat membuat pengunjung blog betah berlama-lama di blog sobat.

1 komentar:

  1. Terima kasih gan, atas artikelnya. Spoiler yang SHOW/HIDE ke samping ada ga gan? buat optimalisasi page yg kosong. terima kasih

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top