Macam-Macam Kotak Script/Box Script dan Cara Membuatnya

Setelah kemarin saya share tutorial Cara Membuat Pesan Blog Maintenance , kini saya juga akan berbagi tutorial blogging. Tutorial blog kali ini membahas bagaimana Cara Membuat Kotak Script / Box Script di Blog . Apa sih tujuan kita membuat kotak script? Nah ini yang mesti sobat blogger harus ketahui. Kotak script sangat dibutuhkan untuk tempat script yang panjang. Jika tidak dimasukan dalam kotak, maka pengunjung blog sobat akan kesulitan ketika mengcopy script tersebut. Ingat, jangan sampai gara-gara script yang terlalu panjang membuat pengunjung blog anda tidak nyaman. Ada berbagai macam kotak script yang ada, berikut saya bagikan yang berwarna tanpa scrool dan juga tidak berwarna yang ada scroolnya. Mungkin sobat juga bisa bereksperimen sendiri dengannya.

Ini script box yang ada warnanya ;

<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;">Masukan scriptnya disini</div>

<div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;">Masukan scriptnya disini</div> 

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;">Masukan scriptnya disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;">Masukan scriptnya disini </div> 

Kalau ini yang biasa gan ;

<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;">Masukan scriptnya disini</ div>

Script box ini dapat memblok semua scriptnya pengunjung tinggal tekan CTRL+C saja

<div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div> <div align="center"> <textarea cols="20" name="txt" rows="4" style="height: 30px; width: 650px;" wrap="VIRTUAL">masukkan script anda disini

Nah kalau yang ini lebih mudah lagi, pengunjung tinggal clik Copy All selesai deh

<input div="" onclick="javascript:this.form.txt.focus (); this.form.txt.select ();" type="button" value="Copy All" /><br /> <div align="center"> </div> <div align="center"> <textarea cols="25" name="txt" rows="35" style="height: 50px; widht: 150px;" wrap="virtual">Scholovers Blogger "You Choose Right Blog!

Terakhir inilah script  yang bisa dibuka dan ditutup, ini scriptnya 

<div> <div style="margin-bottom: 2px;"> <div style="margin-top: 5px; text-align: center;"> <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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 100px;" type="button" value="Buka" /> </div> <div style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> Masukan Script disini

dan ini contohnya

Masukan Script disini

Cara membuatnya sangat mudah, sobat tinggal copy script box yang kamu suka. Setelah dicopy dan kode sudah dimasukan kini tinggal menempatkannya pada blog. Login ke Blogger > Entri Baru > Ketika mau memasukan script pilih HTML. 

Setelah di paste pada bagian HTML kembali lagi ke Compose dan kotak scriptpun sudah siap

<blackquote>KLIK DISINI<blackqoute> 

Selesaai, gampang kan ? :-)