Cara Membuat Kotak tempat Script di Postingan Blog

Rachmatalamsyah.com - Pada sesi kali ini kita akan membahas tentang Cara Membuat Kotak Tempat Script tampil di Postingan Blog, sebagaimana kita ketahui bahwa ketika meletakkan Srcript / kode Html lainnya kedalam postingan secara langsung maka hasilnya kurang indah dipandang mata,nah fungsi dari kotak script ini adalah sebagai tempat meletakkan Kode Sript yang ada dalam postingan dan juga membuat tampilan kode terlihat rapi juga enak dipandang.

Peraturan Pemasangan Kode Srcipt pada postingan adalah:

1. Anda harus mem-Parse terlebih dalu kode Script tersebut sebelum diletakkan dalam postingan, 

2. Anda bisa melakukan Parse di blog ini pada menu Tools dan pilih HTML PARSER, atau klik disini

3. Copy hasil parse kemudian letakkan pada Postingan anda,maka Script tersebut akan bisa tampil  dengan sempurna.

Kita kembali ke topik kita yaitu cara membuat Kotak Script di postingan Blog,cara ini terbilang cukup mudah dilakukan karena kita hanya menambahkan kode kotak Script kedalam postingan setelah itu kita tambahkan Kode Script yang ingin kita beri kotak tempat Script,bentuk,warna dan ukuran kotaknya juga bisa kita atur sesuai dengan keingininan.

Contoh Kotak tempat meletakkan Script :

1. Script- nya ada dalam kotak dibawah in :
 

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;"> Letakkan Script disini </div>

2. Hasilnya dibawah ini :

Letakkan Script disini

Nah untuk cara pemasangannya cukup copy kode Script yang ada pada kotak nomor 1 diatas kemudian pastekan kedalam postingan lalu Ubah mode Compose ke Html lalu kembalikan lagi ke mode Compose dan hasilnya seperti kotak nomor 2 diatas. Selanjutnya silahkan letakkan Script yang sebelumnya telah di Parse dalam kotak hapus saja tulisan Letakkan Script disini terlebih dahulu, terakhir silahkan publish postingan dan lihat hasilnya.

Berikut Beberapa Model Kotak tempat meletakkan Script (Silahkan dicomot gan) : 

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;"> Kode Script Anda Di Sini </div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disin </div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini </div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;">Kode Script Anda Disini </div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

Peraturan Pemasangan kode :

1. Copy script box code dari beberapa jenis tampilan di atas
2. Paste pada Menu Tab HTML Artikel Entri
3. Ganti kode yang berwarna (Merah) yang bertulisan (Kode Script Anda Disini) dengan script yang anda inginkan
4. Kreasi dengan beberapah bagian di bawah ini seperti :
   • Ganti ukuran sudut lengkungan : border-radius: 10px ada 3 ganti semua
   • Ganti warna background : background-color: #codewarna
   • Ubah ketebalan border / garis tepi kolom : border: 4px

Demikianlah pembahasan mengenai Cara Membuat Kotak tempat Script di Postingan Blog,Semoga artikel ini dapat bermanfaat dan bisa diterapkan di blog anda.Selamat Mencoba

Rachmat Alamsyah

Saya hanyalah satu dari sekian banyak Blogger yang terus menulis untuk memberikan Informasi kepada Pembaca.

Share this post