Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Script Box/Kotak Script di Postingan Blog

script box

Cara membuat script box atau kotak script untuk menulis script kode di postingan - script box atau kotak script adalah kolom atau kotak khusus yang sering digunakan oleh para blogger untuk menempatkan kumpulan kode di dalam postingan artikel blog, script box bisa berisi kumpulan kode html, css, javascript, atau berupa tulisan penting yang diunggulkan.

Dengan adanya kotak script ini, selain untuk mempermudah pembaca, halaman artikel juga akan terlihat lebih ramah dan rapi, antara script kode dan juga tulisan artikel terpisah dan tidak tercampur.

Tidak bisa dipungkiri, setiap pengunjung sudah pasti akan lebih menyukai halaman artikel yang ramah dan juga enak untuk dibaca, sehingga pengunjung akan betah untuk membaca artikel tersebut berkali-kali.

Pada postingan ini, saya akan memberikan contoh script box dengan beberapa model yang bisa kamu pilih untuk digunakan.

Bagaimana cara membuatnya?

Yuk! simak tutorial dibawah ini..

Cara Membuat Text Box di Postingan Blog

1. Pertama Silahkan kamu masuk terlebih dahulu ke halaman pembuatan postingan blog (Entri Baru)

2. Selanjutnya, buatlah artikelnya. Untuk membuat text box, pilih pada mode HTML, bukan compose. Untuk lebih jelasnya lihat gambar dibawah ini.

text box

3. Silahkan copy script code dibawah ini.

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px;">Letakkan code yang Anda inginkan di sini</div>

4. pastekan script code tersebut di tempat yang kamu inginkan.

kotak script

5. Jika sudah, pilih mode compose untuk melihat hasilnya.

script text box diatas hanya untuk contoh saja, kamu bisa memilih script text box sesuai dengan yang kamu inginkan di bawah ini.

Script untuk Membuat Text Box / Script Box di Postingan Blog

Ada berbagai macam bentuk text box yang bisa kamu pilih, berikut script untuk membuat text box yang bisa kamu gunakan beserta contohnya.

Script
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; ">Letakkan code yang Anda inginkan di sini</div>

Script
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #87CEFA; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Letakkan code yang Anda inginkan di sini</div>

Script
<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;">Letakkan code yang Anda inginkan di sini</div>

Script
<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;">Letakkan code yang Anda inginkan di sini</div>

Script
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
Letakkan code yang Anda inginkan di sini</div>

Demikian pembahasan dari cara membuat text box untuk menulis script kode di postingan blog. Semoga Bermanfaat. Selamat mencoba!