Scroll dan Spoiler pada blog berfungsi untuk membuat tulisan yang panjang menjadi lebih singkat dan akan terlihat keseluruhan bila tulisannya diklik atau scrollnya di geser. Banyak blogger yang memanfaatkan kode ini ketika mereka menuliskan kode html yang panjang. Karena bila tidak menggunakan kode ini tulisan akan menjadi sangat panjang dan juga tampilannya akan terlihat menjadi jelek. Lho, tapi kenapa admin gak pernah kode ini?
Ya, karena admin lebih suka menggunakan "Qoute". Tapi sebenernya si keren pakai scroll atau spoiler.

macam macam kode scroll:

kode 1:

<div align="center"><table width="250" border="1"><tr> <th colspan="100%" scope="col">ARTIKEL LAINNYA</th> </tr><tr><td><div style="font-family: arial; font-size: 12px; overflow: scroll; width: 350px; height: 150px;"><div style="text-align: center; width: 100%; padding: 0 px; overflow: hidden;">taruhlah tulisa anda disini</div></div></td></tr></table></div>

kode 2:

<div style="overflow:auto;width:400px;height:200px;padding:10px;border:1px solid #333">ISI SCROLL BAR DI SINI</div>

kode 3

<span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 150px; width: 400px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">Masukan Tulisan atau gambar di sini</div>
kode 4

<span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 100px; width: 400px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">Masukan Tulisan atau gambar di sini</div>

macam macam kode spoiler

spoiler 1:
spoiler tampilkan/sembunyikan

<div><input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;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;Sembunyikan&#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;Tampilkan&#39;; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.</div></div></div>

spoiler 2
Spoiler SHOW/HIDE

<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>

spoiler 3
Spoiler OPEN / CLOSE

<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Judul Spoiler</span><input value="Open!!!" style=" margin:5px;padding: 0px; width: 80px; 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; Close..&#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; Clik Here&#39;; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div></div></div>

Demikian tulisan tentang Macam-macam kode scroll dan spoiler blog, semoga bermanfaat dan bisa membantu menyelesaikan masalah kamu.
Kalau kamu menyukai tulisan ini, mohon keikhlasannya untuk follow blog ini atau sekedar berkomentar.
Salam,

Artikel Terkait: