Cara Membuat Kotak Script Dalam Postingan Blog 100% Work

Genajaib.com- Pada kesempatan kali ini, saya akan share tutorial cara membuat kotak script dalam postingan blog.

Cara Membuat Kotak Script Dalam Postingan Blog

Kotak Script adalah sebuah kotak yang didalam nya terdapat bagian source kode, kotak script ini terbilang hampir mirip dengan syntaxt highlighter hanya saja tampilannya yang berbeda.

Fungsi dari kotak script agar tampilan pada kode source agar terlihat rapih dan tidak memakan tempat, bukan hanya itu aja tampilan kotak script ini pun banyak pilihan dan berbagai warna yang bisa anda gunakan untuk mempercantik tampilan blog anda.

Biasanya kotak script ini digunakan untuk blogger tutorial, agar tampilan source kode mereka terlihat rapih dan tidak menggangu para pengunjung.

Nah, jika anda tertarik untuk membuatnya, anda bisa mengikuti langkah-langkah dibawah ini.

cara membuat kotak script dalam postingan blog

• Langkah 1 : masuk ke akun blogger.
• Langkah 2 : buat postingan baru di blog anda.
• Langkah 3 : ubah compose menjadi HTML.
• Langkah 4 : silahkan copy kode dibawah ini, lalu pastekan kode tersebut kedalam HTML.

• 1. Warna Orange

  <div style="background-color: #ffa66f; border: 2px #6e2222 dashed; text-align: left; height: 30px; overflow: auto; padding: 10px; width: auto;">Silahkan simpan  tulisan kalian yang akan menggunakan scroll box disini</div>

• 2. Warna Pink

<div style="background-color: #ffc7c7; border: 2px #6E2222 dotted; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

• 3. Warna Toska

<div style="background-color: #82cafa; border: 3px #6E2222 double; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

• 4. Warna Hijau

<div style="background-color: #6eb76a; border: 2px #6E2222 inset; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

• 5. Warna Abu Gelap

<div style="background-color: #c2c2c2; border: 2px #6E2222 ridge; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

• 6. Warna Kunyit

<div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

• 7. Warna Abu Terang

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

• 8. Warna Putih

<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; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

• 9. Warna Kuning

<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; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

• 10. Warna Biru

<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; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

• 11. Warna Biru Muda

<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; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div>

Baca juga

• Cara Mengganti Favicon Blogger 100% Work
• Cara Memasang Tag Label Di Bawah Postingan Blogger
• Cara Membuat Popular Post Responsive Seperti Arlina Design

PENTING : Silahkan pilih kotak Script yang ingin sobat gunakan, jangan lupa ganti dengan tulisan sobat pada teks "Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini"