Home » » Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru


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.

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

Kali ini saya akan share gimana Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat sobat yang ingin membuat text box area yang keren pada artikel / posting di blogspot.

Cara Membuat Kotak Script Di Postingan :

1. Bikin kotak teks html seperti diatas yaitu dengan cara masuk dashboard blog dan klik Entri Baru untuk membuat artikel baru yang akan ditambahkan kotak script

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

2. Kemudian isi judul dan klik mode HTML

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

3. Setelah itu masukkan kode berikut, masih dalam mode HTML :

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">
.Masukkan Kode Script Sobat Disini.</div>

#Ganti tulisan warna merah dengan script atau tulisan yang akan sobat masukkan dalam kotak

Jika sudah klik Mode Compose untuk melihat hasilnya

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

4. Berikut adalah tampilan kotak script biasa tanpa scroll yang telah sobat buat..

Jika sobat ingin menggunakan scroll pada kotak script tersebut tinggal menambahkan kode yang berwarna biru seperti dibawah ini

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto;">
.Masukkan Kode Script Sobat Disini.</div>

#Untuk mengatur ukuran bisa ubah angka height (tinggi) dan widht (lebar) nya

Jika sudah bisa klik Publikasikan untuk mengepost artikel.. Selesai

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

5. Berikut adalah pilihan text box / kotak script yang berbagai macam bentuk dan warna yang bisa sobat gunakan agar terlihat lebih keren :


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


<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Sobat 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 Sobat 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 Sobat 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 Sobat 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 Sobat Disini</div>


<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Sobat 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 Sobat Disini</div>


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


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


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


#Jika ingin menambahkan scroll tinggal menambahkan kode height widht dan overflow seperti pada langkah no 4 di atas

Nah itulah bagaimana cara membuat kotak script di dalam postingan blog dengan mudah dan cepat.

Silahkan dicoba

Artikel Lainnya :

14 komentar:

  1. bookmarked!!, I really like your web site!

    ReplyDelete
  2. I am impressed with this internet site, real I am a fan.

    ReplyDelete
  3. thanks infonya sob bermanfaat bgt

    ReplyDelete
  4. infonya sangat membaantu, terimakasih sudah dibuatka artikel yang sangat bermanfaat

    ReplyDelete
  5. Membantu bgt caranya, saya sampai bookmark soalnya penting buat bagian "Baca Juga" saya berikan kotak

    ReplyDelete
  6. Terima kasih atas infonya sangat bermanfaat.

    ReplyDelete
  7. tutorialnya lengkap banget dengan ragam pilihan tampilan boxnya, makasih

    ReplyDelete
  8. Makasih codenya kawan, sehat selalu.

    ReplyDelete

Powered by Blogger.