Cara Membuat Kotak Script dalam Postingan

Penulis Ariez Diterbitkan 05:25:00

Membuat Kotak Script dalam Posting Artikel - Seringkali banyak sobat blogger yang bingung atau bertanya, bagaimana caranya agar script di dalam postingan bisa rapi dan tidak memakan banyak tempat. Sebenarnya caranya cukup mudah kalau sobat sudah tau scriptnya, kita tinggal copy paste saja dalam postingan HTML. Memang fungsi dari kotak script ini adalah membuat rapi postingan yang berisi script-script yang biasa kita copas di dalam widget, CSS atau HTML. Kotak tersebut ada yang sederhana dan ada pula yang bisa di scrool yang fungsinya untuk menghemat tempat.

Sobat bisa mengatur sendiri dan disesuaikan dengan lebar tempalte post sobat, tinggal diubah saja lebat dan panjang kotak, warna border kotak dan sebagainya. Pada kesempatan kali ini saya akan membagikan sedikit cara agar sobat bisa membuat kotak di dalam postingan yang biasanya diisi dengan kode-kode script. Berikut cara membuat kotak di dalam postingan artikel.

Cara Membuat Kotak Script di Dalam Postingan:

1. Login ke Blogger kemudian bikin entry baru.
2. Tulislah kata sesuai keinginan sobat, contoh: Cara Bikin Kotak Script di postingan
   
 

3. Kemudian klik HTML dan pastekan code dibawah ini tepat di bawah tulisan "Cara Bikin Kotak Script di Postingan" tadi.
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.hapus ini.</div>
4. Lebih jelasnya lihat gambar di bawah ini.
   
5. Kemudian klik "compose" dan hasilnya akan seperti ini.
   
6. Kemudian klik dalam kotak tersebut dan hapus kata "hapus ini".
7. Langkah Terakhir, sobat masukkan script yang ingi sobat tulis di dalam kotak tersebut. Selesai sudah dan sobat sudah berhasil membuat kotak script di dalam postingan.

• Keterangan kode: 
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.hapus ini.</div>
1. Border ukuran 3px = ketebalan border kotak script
2. Double = bentuk kotak. Pilihan lainya bisa diganti dengan: dashed, doted, Groove, inset, outset, ridge.
3. Padding 10px = panjang kotak ke bawah, untuk lebar kotak sesuai panjang posting
4. background-color:ffffff; = warna dalam kotak
5. text-align:left; = posisi tulisan dalam kotak ada di kiri
   

Itulah cara membuat kotak script sederhana di dalam postinga, sekarang bagaimana cara membuat kotak scroll di dalam postingan, langsung saja kita simak caranya.

Cara Membuat Kotak Scroll untuk Script di dalam Postingan:

1. Caranya sama seperti diatas. masukkan kode dibawah ini ke HTML.
<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 300px;
text-align: center;">
.isi kode.</div>
2. Keterangan: overflow:auto; = fungsi scrollnya. height(tinggi kotak) dan width(lebar kotak).
3. Posisi kotak sript sroll juga bisa dipindahkan ke kiri atau ke kanan, tinggal ganti left menjadi right atau center kalau ingin posisinya tulisannya dikanan atau ditengah. lihat gambar.
<div style="border: 3px #1780dd solid; float: right; dan lain-lain.
posisi tulisan tengah

Demikianlah cara membuat kotak script sederhana dan kotak script scroll. Semoga berguna bagi sobat dalam membuat postingan yang lebih rapi dan menghemat tempat tanpa harus mengurangi isi script dari postingan. Sekian dan terimakasih.