Web Download Gratis - Bagi seorang bloger tampilan blog memanglah sangat penting agar para pengunjung makin betah dengan website kita. Untuk kali ini saya akan membagikan sebuah tutorial bagaimana cara membuat kotak script di postingan blog yang keren, sekaligus menyimpan arsip untuk saya jadikan referensi buat diri sendiri. Namun semoga juga bisa bermanfaat bagi siapapun yang ingin mempercantik blog-nya. Ngeblog dan membuat artikel merupakan suatu rutinitas bagi seorang Blogger setiap hari,dari mulai menentukan judul,membuat artikel sampai mempublikasikan hasil karyanya adalah hal yang biasa bagi mereka. 

Kotak script atau yang biasa para blogger sebut yaitu text box area adalah sebuah kotak yang di dalam nya dapat dimasukkan tulisan atau script code baik yang biasa maupun dengan fungsi scroll agar terlihat rapi dan teratur pada sebuah postingan di blogspot, wordpress, atau website sehingga pengunjung pun nyaman ketika sedang membaca artikel yang ada di situs web tersebut.

Untuk memasang / membuat kotak html blog kita hanya perlu memasukkan / menambahkan kode script ke dalam posting blog yang dapat kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.

Langkah Membuat Tulisan Dalam Kotak :
1. Masuk ke Blogger - Buat Entri Baru
2. Mulailah menetukan judul artikel dan lanjut membuat artikel pada mode Compose
3. Saat ingin memasukkan kode tulisan dalam kotak,masuk ke mode HTML dan pastekan kode script yang ingin dipasang pada postingan
4. Untuk melanjutkan menulis artikel,kembalikan ke mode Compose seperti pada no 2 dan lihat hasilnya jika berhasil akan ada kotak untuk menulis didalamnya
5. Tambahkan / paste script dibawah ini sesuai selera kamu


Berikut adalah script bordernya  yang keren dan silahkan pilih sesuai keinginan sobat ya :)

<div style="border: 3px #04B45F Double; padding: 10px;background-color:#FFFFFF; text-align: left;"> border warna hijau double</div>

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: #cfe2f3; text-align: center;"> biru muda</p>


<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">samar</div>

<p style="border: solid 1px #eceff5; background: #29447E; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px">biru tua</p>


<p style="border: solid 1px #aaa; background: #ccc; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">Abu Abu Sisi melengkung</p>


<p style="border: dashed 2px #eceff5; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">Abu Abu Putus-Putus</p>

<p style="border: dashed 2px #ee3f10; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">orange putus-putus</p>


<div style="border: 2px #006400 ridge; padding: 10px; background-color: GOLD; text-align: left;">kuning</div>

<div style="border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;"> kuning putus-putus pendek</div>

<div style="border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;"> kuning putus-putus sedang</div>

<div style="border: 2px #006400 solid; padding: 10px; background-color: GOLD; overflow: auto; height: 50px; width: 600px; text-align: left;">ngescript </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;">biru sisi melengkung</div>

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 200px; width: 500px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">border scroll
< /div></span></span></span>


<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

<div style="background-color: #ffebcd; border: 3px Red Dotted; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

<div style="background-color: #dde5d1; border: 3px Blue Ridge; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

<div style="border: 4px #02d144 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Tulis script anda di sini..! </div>

<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

<div style="background-color: turquoise; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

<div style="background-color: ivory; border: 2px solid black; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

<div style="background-color: lightcyan; border: 3px #FE0606 double; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

..Postingan Terkait..