Membuat Kotak Script Dengan/Tanpa Scroll di Posting Blog

 

Ketika anda membuat tulisan, mungkin itu di Pos atau Entrian baru, atau di Laman, Biasanya anda akan membuat Tulisan Secara HTML, bukan Compose. Untuk memisahkan tulisan Secara HTML tersebut biasanya kita menggunakan kotak untuk penulisan Script.



Kotak Script ini digunakan untuk menuliskan scrip HTML yang panjang. Dimana kotak ini  berfungsi untuk memisahkan dan memperindah Tulisan script yang kita maksud dengan tulisan artikel yang lain.

Ada dua Jenis kotak yang Biasanya digunakan untu menempatkan tulisan script ini, yaitu kotak Biasa kotak atau kotak Script Tanpa  Scroll  dan dengan kotak Script Dengan  Scroll.

Cara Membuat Kotak Tanpa Scroll :

• Login Ke Blogger
• Pilih Post >> Entri Baru kemudian ketikkan postingan anda pada bagian Compose.
• Untuk memasukkan Script yg ingin di buatkan Kotak Scriptnya, maka Pilihlah opsi HTML yang berada Di pojok kiri atas (ada 2 opsi, yaitu Compose dan HTML)
• Copy paste script berikut ini pada bagian yg ingin di buatkan kotak script
  dan setelah itu jangan lupa kembali ke opsi compose lagi.
• Sebelum kembali ke opsi compose,  setelah mempaste script ini, anda harus mengklik Enter dan mengetikkan sesuatu atau huruf apa saja yang berfungsi agar anda dapat meneruskan dan mengetik posting berikutnya
• Kembali lagi aktifkan 'Compose' dan lihat hasilnya. 
• Simpan

<div style="border: 3px #1780dd Double; padding: 10px;background-color: #FFFF00;
text-align: left;">. masukkan script anda disini .</div>

atau

<div style="border: 1px solid #000000; auto; height: 90px; overflow: auto; padding: 5px; background-color: #FF0000; width: 520px;">masukkan script anda disini</ div>

atau

<div style="border: 1px #FF0000 solid; color: #000000; padding: 10px;background-color: #00CED1;
overflow: auto; height: 90px; width: 90%;
text-align: left;"><code>
.kode script disini.</code></div>

 

Keterangan (Cara Membuat Kotak Tanpa Scroll):

lebar Kotak Pembatas (border: 1px) dan Kode Warna (#000000), Tinggi (height: 200px), Lebar (width: 520px), Warna latar belakang (background-color: #ffffff) dapat dirubah sesuai dengan keinginan.

Cara Membuat Kotak dengan Scroll :

• Login Ke Blogger
• Pilih Post >> Entri Baru kemudian ketikkan postingan anda pada bagian Compose.
• Untuk memasukkan Script yg ingin di buatkan Kotak Scriptnya, maka Pilihlah opsi HTML yang berada Di pojok kiri atas (ada 2 opsi, yaitu Compose dan HTML)
• Copy paste script berikut ini pada bagian yg ingin di buatkan kotak script
  dan setelah itu jangan lupa kembali ke opsi compose lagi.
• Sebelum kembali ke opsi compose,  setelah mempaste script ini, anda harus mengklik Enter dan mengetikkan sesuatu atau huruf apa saja yang berfungsi agar anda dapat meneruskan dan mengetik posting berikutnya
• Kembali lagi aktifkan 'Compose' dan lihat hasilnya. 
• Simpan

  
<div style="background-color: #FFFF00;
 border: 3px #000000 solid; height: 80px; overflow: auto;
 padding: 10px; text-align: left; width: 90%;">
.masukkan script anda disini.</div>

Atau

<div> <form name="copy"> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value=" Copi Paste Script Ini " /> </div> <div align="center"> <textarea cols="20" name="txt" rows="9" style= " border: 2px solid #000000; background-color: #FFFF00; height: 145px; overflow: auto; padding: 10px; text-align: left; width: 90%;" wrap="VIRTUAL">masukkan script anda disini

       setelah tulisan "masukkan script anda disini" ditambahkan "</textarea></div>" menjadi
       masukkan script anda disini</textarea></div>

Atau

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value=" Copi Paste Script Ini " /> </div>
<div align="center">
<div style="border: 2px #000000 solid; color: #FF0000; padding: 10px;background-color: #FFFF00;
overflow: auto; height: 90px; width: 90%;
text-align: left;"><code>
.kode script disini.</code></div>

Keterangan (Cara Membuat Kotak dengan Scroll) :

No.1.   1.  border: 3px = ketebalan kotak script. dan #1780dd = warna kotak script. 
2.  Double; = Bentuk kotak, bisa diganti dengan : Dashe : Dotted : Double : Groove : padding

3.  Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
4.  background-color: #FFFF00; = warna dalam kotak.
5.  Dan text-align:left; = posisi tulisan didalam kotak di kiri.

No.2.  Tulisan (Copi Paste Script Ini), Banyaknya baris (rows="10), lebar Kotak Pembatas (border: 1px) dan Kode Warna (solid  #000000), Warna latar belakang (background-color: #ffffff), Tinggi (height: 160px), Lebar (width: 100%), dapat dirubah sesuai dengan keinginan.

Semoga Bermanfaat.

sumber :

situs9.blogspot.com    www.pelajarterbaik.com    esaprasetio.blogspot.com