Cara Membuat Kotak Script Di Postingan Blog

"Cara Membuat Kotak Script Di Postingan Blog"

   Cara membuat kotak script di posting blog. Kotak script, biasanya digunakan untuk memasukan kode2 script ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya.
   Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya... Langsung saja...

Cara membuatnya, Ikuti langkah-langkah dibawah ini.

1.   Login ke blogger. atau ke www.blogger.com
2.   Pilih entri baru.
3.   Selanjutnya buatlah tulisan seperti dibawah ini.


4.   Selanjutnya Klik HTML dan masukan kode berikut, dibawah tulisan cara membuat kotak script.

 <div style="border: 3px #774040 Double; padding: 10px;background-color:#551E1E;
text-align: left;">
.Tulis Disini.</div>

Atau Copas Disini :

Kode Script.txt

5.   Untuk lebih jelasnya, lihat gambar dibawah ini.


6.   Sekarang Klik Compose, maka akan ada kotak script. Contoh gambar:


Keterangan :

  • border: 3px = ketebalan kotak script. dan #774040 = warna kotak script.
  • Double; = Bentuk kotak, bisa diganti dengan,

dashed
dotted
Double
Groove
inset
outset
ridge

  • Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
  • background-color:#774040; = warna dalam kotak.
  • Dan text-align:left; = posisi tulisan didalam kotak di kiri.
 Jika ingin menggunakan script scroll caranya sebagai berikut :

 Sebenarnya sama dengan yang diatas tapi ada penambahan code seperti dibawah ini:

<div style="border: 3px #774040 solid; padding: 10px;background-color:#774040;
overflow: auto; height: 50px; width: 300px;
text-align: left;">
.kode script disini.</div>

Atau copas disini : 

Kode Script Scroll.txt

  1.   Masukan kode script ke HTML.
  2.   Overflow:auto; = fungsi scrollnya. height(tinggi kotak) dan width(lebar kotak)
  3.   Kotak script bisa juga dipindahkan ke kanan, dengan menambahkan kode float: right; ditengah kode diatas.

kode script disini
tampilan
scroll
ada
disebelah
kanan

contohnya seperti kode dibawah ini :

<div style="border: 3px #1780dd solid; float: right; dan lain-lain.

    Posisi Kotak ada disebelah Kanan
  
  4.   Untuk yang posisi tengah, saya belum menemukannya, nanti jika sudah ketemu, akan saya tambahkan kembali diposting ini.

   Dengan menambahkan kotak script di posting blog, maka halaman blog akan terlihat lebih rapi. Dan tidak memakan banyak tempat. Tanpa harus mengurangi isi dari posting sebelumnya...

Sekian dulu artikel dari saya semoga ini bisa membantu dan bisa Bermanfaat....

"Terima Kasih"