Membuat Link Tutup Buka/Dropdown/Spoiler

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

Membuat link dropdown atau link tutup buka atau spoiler kadang jadi kebutuhan mendesak untuk menyederhanakan tampilan blog dan merapikanya,namun tetap masih dapat menampilkan link-link yang penting untuk dipasang,dan yang pasti bisa menghemat halaman blog.

Klik Demo

DISINI Teks/link/url gambar
DISINI Teks/link/url gambar
DISINI Teks/link/url gambar
DISINI Teks/link/url gambar

Cara Pertama:

Untuk masalah memasang link dropdown ini bisa saja di pasang di mana anda suka,bisa dalam posting/artikel,sidebar blog atau footer,tergantung mana yang paling disukai dan dapat mendukung. Jadi tak ada ikatan pada satu tempat tertentu. Caranya anda kopi paste saja kode di bawah ini:

<div><div style="margin-bottom: 3px;"><i><b><small>Klik Demo</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Hide&#39;; } else { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Show&#39;; }" type="button" /></div>

<div style="border: 0px ; margin: 0px; padding: 0px;"><div style="display: none;">

DISINI Teks/link/url gambar

DISINI Teks/link/url gambar

DISINI Teks/link/url gambar

DISINI Teks/link/url gambar

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

Ket;

Anda dapat atau boleh merubah sesuai dengan yang anda mau asal anda tahu tentang kode,jika belum bagusnya pasang sesuai yang ada,silahkan rubah tulisan yang berwarna saja. 

Cara ke 2 :

Cara 2 ini hanya untuk di dalam posting dengan cara menambah kode css di dalam edit html blog dan kode khusus di dalam artikel. Caranya adalah:

A. Masuk ke Edit Html blog anda, pada menu Layout,kemudian cari tag </head>. (ini untuk blogspot).

B. Untuk jaga-jaga silahkan backup dulu template anda,atau kalau bisa mengingatnya di mana pasang dan kodenya tak apa tak simpan template,maksudnya bila nanti ada kesalahan agar anda dapat mengembalikan template seperti semula. Letaka. kode script di bawah ini di atas kode </head>.

<style type='text/css'>
.spoilerhide {display:none}
.spoilershow {display:inline}
</style>
<script type='text/Javascript'>
function spoiler (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=='spoilershow') { whichpost.className='spoilerhide'; } else { whichpost.className='spoilershow'; }
} </script>

C. Lihat preview dulu,bila sudah jadi silahkan klik Simpan template.

D. Lalu lanjutkan masuk pada postingan/artikel yang akan anda pasang spoiler ini (ingat gunakan kolom HTML jangan yang compose),Kemudian letakkan kode di bawah pada bagian artikel yang akan di show-hidden kan,atau tampil-sembunyikan.

<a href="javascript:spoiler('Spoiler')" title="click to expand">Klik di sini untuk lengkapnya</a>
<div class="spoilerhide" id="Spoiler">
Di sini Bagian yang akan disembunyikan
</div>

Demikian cara membuat link tutup buka atau spoiler . Selamat mencoba dan Semoga berhasil....!

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