Panduan Cara Membuat Kotak Script Ke Dalam Postingan Blog

Terkadang bagi seorang Bloger alasannya ialah terlalu sering melihat tampilan blognya ibarat itu-itu saja akan merasa adanya rasa bosan. Untuk memperindah tampilan dan postingan terlihat lebih rapih ada tips panduan untuk membuat kotak script yang di sematkan dalam postingan blog. Kotak box sendiri mampu disebut kutipan atau semacam blockquote, namun mampu digunakan untuk menempatkan arahan Script sejenis arahan HTML, CSS atau bahasa pemograman lainnya.

Biasanya saat menempatkan arahan script ke dalam postingan blog secara pribadi diantara isi artikel akan membuat error atau tidak tampil sama sekali. Hal tersebut diakibatkan anda menempatkan arahan script tanpa melalui metode HTML. Agar tidak menjadi error maka dibuatlah kotak script yang menjadi pemisah antara isi artikel dan arahan script.

Panduan Cara Membuat Kotak Script Dalam Postingan

Banyak sekali jenis tampilan kotak script yang mampu anda gunakan untuk merubah tampilan artikel anda menjadi lebih rapi dan terlihat keren. Jika anda akan merubah tampilan kotak script sedikit berbeda atau membuat warna yang lain sesuai kesukaan anda maka anda harus mempelajari terlebih dahulu bagaimana cara mengganti warna tampilan kotak script dan mengganti border kotak script tersebut :

• Border ialah untuk suatu garis yang membentuk kotak, ketebalan border mampu anda diganti dengan memperbesar px nya.
• Kode Double (bentuk kotak script) mampu anda ganti dengan menggunakan arahan dotted, solid, groove, inset, ridge maupun dashed. 
• Padding ialah suatu arahan html yang berfungsi untuk menentukan ukuran lebar maupun panjang kotak script dengan cara mengganti ukuran px nya.
• Background Color ialah suatu arahan html yang bekerjasama dengan warna kotak script itu sendiri (contoh arahan warna 6 digit "#7d3c98" dan arahan warna 3 digit "#fff")  

Kode Warna HTML 6 Digit

• Text Align ialah untuk merubah posisi text apakah akan rata kiri kanan atau ditengah dengan mengganti left atau right.

Kode HTML untuk membuat Kotak Script  

Ada beberapa pola buat anda, silahkan ganti tampilan sesuai selera anda baik border atau pun mengganti warna ibarat yang sudah admin jelaskan diatas sebelumnya.

Kotak Script Style Minimalis

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

Kotak Script Style Left Border

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

Kotak Script Style Dotted

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

Kotak Script Style Double

<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>

Kotak Script Style Dashed 

<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>

Kotak Script Style Scroll

<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">
Kode Script Anda Disini…… </div>

Kotak Script Style Highlight

<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"> <br /> <textarea cols="20" name="txt" rows="4" style="height: 50px; width: 200px;" wrap="VIRTUAL">masukkan script anda disini

Membuat kotak arahan metode html kemudian compose

Cara membuat kotak script semoga menjadi suatu goresan pena terpisah diantara artikel maka metode yang digunakan jangan menggunakan metode compose namun melalui HTML, jikalau anda membuat suatu halaman statis ibarat sitemap atau about biasanya menggunakan metode HTML pada postingan. Setelah anda menaruh arahan kotak script tersebut maka kembali pada menu compose dan masukkan arahan html/css/jquery pada kotak script yang tadi anda buat. Mudah Bukan panduannya ! Jika ada arahan error silahkan melalui kolom komentar.

Terima kasih telah membaca artikel ini & dipublikasikan oleh Segaris Informasi