Cara Membuat kotak Teks Pada 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.
Baca Juga
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.
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
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-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. Semoga Tutorial ini bermanfaat. Selamat mencoba!
0 Comments