Cara Membuat Text Box Source Code Pada Postingan Blog
Blogging
<!-------- Contoh Script Text Box -------->
<div style="background-color: #444444; border-radius: 0px; border: 5px solid #ff0000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;"> <div style="background-color: #444444; border-radius: 0px; border: 5px solid #ff0000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Nah kalian pasti pernah kan melihat text box seperti itu pada postingan blog yang kalian kunjungi? text box source code seperti di atas sangat bermanfaat, khususnya bagi kita sendiri semisal ingin membuat postingan pada blog yang berisikan source code yang panjang jadi kelihatan lebih rapi dan tidak memakan banyak space, dan untuk pengunjung blog sendiri selain melihatnya lebih rapi tapi menjadi lebih mudah untuk menyalin source codenya. Untuk cara membuatnya tidak terlalu sulit, kalian hanya perlu menambahkan sedikit kode html pada bagian "HTML" pada saat membuat Entri/Postingan blog. Nah untuk itu silahkan simak dan ikuti dengan benar caranya di bawah ini.<div style="background-color: #444444; border-radius: 0px; border: 5px solid #ff0000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;"> <div style="background-color: #444444; border-radius: 0px; border: 5px solid #ff0000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Style Text Box 1
<!-------- Contoh Script Text Box 1 -------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #111; border-radius: 5px; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #111; border-radius: 5px; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Style Text Box 2
<!-------- Contoh Script Text Box 2 -------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #444444; border-radius: 0px; border: 5px solid #ff0000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #444444; border-radius: 0px; border: 5px solid #ff0000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Style Text Box 3
<!-------- Contoh Script Text Box 3 -------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #3d3627; border-radius: 0px; border: 1px solid #000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #3d3627; border-radius: 0px; border: 1px solid #000; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Style Text Box4
<!-------- Contoh Script Text Box 4 -------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #000; border-radius: 0px; border: 2px dashed #fff; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #000; border-radius: 0px; border: 2px dashed #fff; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
Style Text Box 5
<!-------- Contoh Script Text Box 5 -------->
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #2b3b44; border-radius: 0px; border: 2px dotted #fff; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
<!-------- Yang bagian ini tidak perlu dicopy--------->
<!-------- Copy kode mulai dari <div hingga </div>-------->
<div style="background-color: #2b3b44; border-radius: 0px; border: 2px dotted #fff; height: 100px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<br /></div>
1. Silahkan pilih style text box yang kalian sukai dan copy source codenya mulai dari <div hingga </div>.
2. Buat Entri/Postingan blog, kemudian masuk ke bagian "HTML" dan Paste kode style text box yang sudah di copy tadi.
3. Klik menu "Compose" dan hasilnya akan seperti berikut:
4. Nah mudah bukan? jika kalian ingin mengisikan Teks pada tengah-tengah textbox, kalian tinggal klik saja pada tengah-tengah textbox dan isikan teks yang kalian inginkan. Dan untuk warna teksnya sesuaikan dengan background textboxnya supaya warnanya kelihatan.
TAMBAHAN!!!
background-color: #2b3b44 >> Ganti kode warna #2b3b44 Dengan kode warna yang kalian inginkan untuk mengganti warna background textboxnya.
border-radius: 0px; >> Ganti 0px dengan 1px, 2px, 3px, dst.. Untuk memberikan efek lengkungan pada bagian pojok textbox.
border: 5px >> Ganti 5px dengan 1px, 2px, 3px, dst.. Untuk menambah/mengurangi ketebalan border textbox.
height: 100px; >> Ganti 100px; Dengan menambahkan/mengurangi nilainya.
text-align: left; >> Ganti left; Untuk merubah Alignment text.
width: Auto; >> Ganti Auto; dengan nilai px Untuk memanjangkan/memendekkan textbox.
Sekian dulu postingan kali ini tentang Cara Membuat Text Box Source Code Pada Postingan Blog. Semoga bermanfaat bagi kalian, jika ada pertanyaan atau saran bisa meninggalkan jejak komentar di bawah. Have a Nice Day...