Senin, 31 Desember 2012

Membuat Spolier di Posting Blog


Spoiler ini berguna untuk menyembunyikan text,  kode, kalimat ataupun gambar maupun video dalam postingan blog. spolier ini berguna untuk menghemat ruang dalam sebuah postingan blog serta untuk membuatnya kelihatan lebih rapi. namun spoiler bukan hanya berguna dalam postingan blog, namun juga berguna untuk widget side bar atau lainnya dalam blog

Berikut contoh spoiler

Klik Show Untuk Membuka Spoiler

Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks


untuk contoh diatas berikut ini adalah kodenya :

<div style="margin-bottom: 2px;">Klik Show Untuk Membuka Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Show" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks </div></div></div>



keterangan : yang berwarna biru ubahlah dengan text yang kamu suka
                   yang berwarna merah bisa kamu ganti dengan judul yang ingin berikan



2. memasang spoiler untuk gambar atau hal lain

contohnya :

Spoiler :
Post spoiler

Berikut untuk kode contoh tersebut :

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> : <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">

<img src="http://i1311.photobucket.com/albums/s675/one7die/cth_zpsdd760d2b.jpg" border="0" alt="Post spoiler"></div>
</div>
</div>

keterangan : yang berwarna Merah merupakan kode URL gambar atau image yang Kamu punya..
Sekian.. dan selamat mencoba.


Artikel Terkait:

 
Copyright © 2015 | Simple Dimensions Design by Wandi Naozumi All Rights Reserved