Cara Mudah Membuat Script Box Responsive Blog - Hallo Kopingers Kopi Coffee, Pada sharing ini tentang Dunia Kopi or Coffee kali ini yang berjudul Cara Mudah Membuat Script Box Responsive Blog, Disini akan di bahas semua tentang dunia kopi di mulai sejak penanaman kopi, merawat kopi, penyakit tanaman kopi, fermentasi, roasting hingga cara minum kopi.

Judul : Cara Mudah Membuat Script Box Responsive Blog
Pembahasan : Cara Mudah Membuat Script Box Responsive Blog

Cara Mudah Membuat Script Box Responsive Blog

Pernah melihat Script Box pada beberapa tutorial yg telah dibuat oleh para blogger? Biasanya blog yang memiliki rating tinggi akan membuat postingan dengan isi maupun tampilan yang semenarik mungkin. Salah satunya adalah Script Box yang mereka gunakan pada beberapa tutorial yang telah mereka buat. Script Box ini akan mengemas Script yang akan mereka share kepada para pembaca, menjadi lebih elegan dan terkesan rapih. Sebenarnya Script Box sendiri adalah hanya sebuah Text Box biasa pada umumnya. Namun Text Box ini sangat sering digunakan untuk menyimpan sebuah material Script di dalamnya sebagai tutorial, yang nantinya dapat digunakan oleh para pengunjung blog.

Terdapat beberapa jenis Box yang bisa kita gunakan. Namun Akira telah memilih salah satu Box, yang menurut Akira cukup elegan. Box yang satu ini memiliki fitur Scroll. Jadi, Box ini tidak akan memanjang ke bawah jika Script yang kamu masukan cukup banyak.

Cara membuatnya cukup mudah. Ikuti tahap-tahap berikut:

1. Buat postingan baru, atau buka postingan yang sudah kamu buat.

2. Ubah dari mode Compose menjadi mode HTML.

3. Masukan Script ini untuk membuat Box.

<div style="background-color: #1c1c1c; border: 3px #eeeeee solid; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;"></div>

4. Setelah selesai, ubah kembali dari mode HTML menjadi mode Compose.

5. Box akan muncul, dan kamu sudah bisa memasukan Script atau teks apapun ke dalam box tersebut.

Hasilnya akan seperti ini... (di dalamnya adalah beberapa Script Box lain yang bisa kamu gunakan)

<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Kode Script Sobat Disini
</div>



 <div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #ffffcc; border-top: 20px solid #ffff00; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Kode Script Sobat Di sini
</div>



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



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


<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ccffcc; border-left: 5px solid #ccffff; 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: #ccffcc; border-left: 5px solid #ccffff; border-radius: 10px; padding: 10px; t-align: left;">
Kode Script Sobat Disini</div>

<div style="background-color: #cccccc; border: 3px #eeeeee solid; height: 100px; overflow: auto; padding: 10px; text-align: left; width: 520px;">
kode script Sobat di sini</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>

Beberapa element dapat kamu edit untuk merubah tampilan Box. Seperti warna, tinggi, dan lain sebagainya. Kamu bisa bereksperimen sendiri :D

author: Akira Asayami

Demikianlah Artikel Cara Mudah Membuat Script Box Responsive Blog

Sekian dunia kopi coffee Cara Mudah Membuat Script Box Responsive Blog, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingan kopi coffee kali ini. Selmat menikmati minum kopi

Anda sedang membaca artikel Cara Mudah Membuat Script Box Responsive Blog dan artikel ini url permalinknya adalah https://minumkopicoffee.blogspot.com/2018/09/cara-mudah-membuat-script-box.html Semoga artikel ini bisa bermanfaat.

Tweet