Cara Membuat Kotak Script Code di Postingan Blog

Kotak script atau text box  area merupakan kolom khusus yang sering digunakan para blogger untuk meletakkan kumpulan code di dalam postingan artikel blog, baik berupa html, css, java script, atau berupa tulisan penting yang diunggulkan.


Dengan adanya text box,  selain mempermudah pembaca, halaman artikel juga akan terlihat lebih rapi, tidak tercampur antara script code dan tulisan artikel.

Tidak lain dan tidak dapat dimungkiri, pengunjung sudah pasti menyukai halaman artikel yang ramah dan enak untuk dibaca, sehingga pengunjung pun betah berlama-lama di halaman artikel tersebut.

Model dari text box pun berbeda-beda, tidak hanya satu dua saja, bahkan lebih.

Di post kali ini, saya akan berbagi script membuat text box dengan beberapa model yang bisa Anda pilih untuk digunakan.

Mau tahu cara membuatnya? Yuk! Simak tutorial berikut ini.

1. Silakan Anda masuk ke halaman pembuatan postingan ( Entri Baru).


2. Selanjutnya silakan buat artikelnya. Jika ingin membuat text box, silakan pilih mode HTML. Bukan Compose. Lihat gambar berikut ini.


3. Copy script code di bawah ini.

<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>

4. Paste script tersebut di tempat yang Anda inginkan.


5. Pada bagian script yang bertulisan "Letakkan code yang Anda inginkan di sini" (warna merah), silakan Anda ganti sesuai dengan apa yang Anda inginkan.


6. Jika sudah, silakan kembali ke mode Compose untuk melihat hasilnya. Contoh hasilnya seperti berikut ini.

Letakkan code yang Anda inginkan di sini

Baca juga:

Script text box di atas hanya contoh saja. Anda bisa memilih scrip text box sesuai yang Anda inginkan di bawah ini.

Script Membuat Text Box di Postingan Blog

Ada beberapa macam bentuk text box yang bisa Anda pilih. Berikut script yang bisa Anda gunakan beserta contohnya.

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: #ffe599; border-radius: 10px; border: 2px dashed #aaa; 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: #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-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>

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>



Beberapa script di atas bisa Anda gunakan untuk mencantumkan code atau tulisan tertentu. Jika tutorial ini dirasa membingungkan, silakan bertanya di kolom komentar. Semoga bermanfaat. Selamat mencoba!

Baca juga: Panduan Gratis Membuat Blog Sampai Bisa

0 Response to "Cara Membuat Kotak Script Code di Postingan Blog"

Post a Comment

Silakan tulis pesan di kolom komentar dengan bijak. Komentar SPAM, memberikan link tanpa izin Admin, dan tindakan negatif lain tidak akan diterbitkan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel