Membuat spoiler untuk postingan blog

Membuat spoiler untuk postingan blog

Salam sukses dan sejahtera buat sobat semua semoga anda semua baik-baik saja yah sob
Pada artikel ini saya akan sedikit berbagi tentang cara membuat spoiler pada postingan blog
Dimana spoiler ini akan menghemat ruangan posting dan biasanya spoiler ini di gunakan buat
Sobat yang suka berbagi tutorial atau juga bisa di gunakan untuk artikel lainya, sebelumnya
Kemarin sudah saya publikasikan tentang Pentinganya arti sebuah nama untuk sobat yang
Berminat memasang spoiler ini pada halaman postingan blog anda silahkan simak berikut ini

Baca juga artikel : Antara Pengunjung Dan Followers Blog

Spoiler adalah sekumpulan script  yang membungkus sebuah  artikel di dalamnya  guna spoiler
Ini untuk menghemat halaman posting agar tidak terlalu menghabiskan tab halaman posts pada
Blog bagi anda yang  belum tau keberadaanya  spoiler gambar diatas itu contoh  screnshoot nya
Tetapi jika anda ingin melihat demo terpasanya spoiler itu bisa anda buka linknya  DISINI

Apabila anda berminat silahkan simak pemasangan cara membuat spoiler agar terpasang pada
Blog anda  dan bisa di gunakan  pada area postingan  dan pastinya sudah  valid Html 5 - Css 3

Cara memasangnya :

Pastikan anda masuk blog anda buka dasboard pilih template kemudian pilih edite template
Cari kode : ]]></b:skin> atau </style> gunakan Ctrl + F untuk memudahkan pencarian, Kemudian copy kode dibawah ini, dan pastekan tepat diatas kode :
 ]]></b:skin>  atau di atas kode :  </style>

.BD_spoler{background:#BBFEB6;border: 2px solid rgb(9, 149, 223);border-radius: 3px 3px 3px 3px;box-shadow: 2px 4px 4px rgb(113, 112, 112);color:#FFFF00;cursor:pointer;font-family: verdana;font-weight:700;padding:20px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%;background-color: #0099FF;border-color: #EAF314;}.BD_spoler:hover,.BD_spoler:focus{background-color: #0066CC;color: #FFFFFF;border-color: #F0D603;}
#oneupperheader{margin:10px 0;padding:1%;width:100%;}

Cara menggunakan Spoiler :

Buatlah artikel baru bisa juga pada artikel lama di blog anda, pada halaman posting anda
Masukan kode di bawah ini pada area Html jangan di area Compose berikut  ini kodenya

<div>
<div style="margin: 2px; text-align: center;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;"> </span></i><input class="BD_spoler" 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 = 'TUTUP KODE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA KODE'; }" style="font-size: large; margin: 0px; padding: 0px; text-align: center; width: 320px;" type="button" value="BUKA KODE" /></div>
<div class="alt2" style="background-color: #ebebeb; border: 1px inset; font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px; padding: 4px;">
<div style="display: none;">

DI SINI TEKS ATAU KODE SCRIPT ANDA 

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

Keterangan kode diatas :

Kode diatas adalah kode pembungkus artikel anda yang hendak pakai spoiler dan pada
Tulisan yang berwarna Merah itu isi postingan yang akan menggunakan spoiler jangan lupa
Masukan kode tersebut pada kolom Html postingan baru atau postingan lama di blog anda

Kesimpulan :

Spoiler ini bisa di gunakan untuk berbagai jenis konten postingan contohnya kode Java script
Html, Css, teks, link gambar atau yang lainya gunakanlah apabila menurut anda yang terbaik 

Ucapan :

Terima kasih sudah berkunjung semoga Trik Blogger yang saya sugguhkan ini ada gunanya
Mohon maaf jika ada kesalahan dan kekurangan semoga ini bisa melengkapi isi dari blog
Anda, tidak ada kata yang paling indah selain, ucapan semoga artikel  ini bisa bermanfaat
Spoiler ini saya terinsfirasi pada : Sobat @Rivai silaban - http://rivai-silaban.blogspot.com