Cara Membuat Kotak Tulisan (Text Box) di Blog

Pada kesempatan kali ini Admin akan memberikan sebuah tutorial tentang Cara Membuat Kotak Tulisan atau Text box di Blog agar lebih rapih dan menambah variasi. banyak sekali keguaan dari kotak tulisan ini, misalnya jika Anda ingin menambahkan script atau kode khusus maka harus di tempatkan di tempat yang khsus juga, tidak boleh disamakan dengan tulisan yang lainnya agar pembaca tidak bingung, salah satu caranya adalah membuat tempat kotak untuk teks yang dibuat menggunakan kode HTML singkat dan tidak terlalu panjang, berikut tutorial lengkapnya.

Cara Membuat Kotak Tulisan di Blog

Text box dan script box tidak jauh beda, hanya saja ada sedikit perbedaan dari segi desain dan warna, namun jika keduanya memiliki fungsi yang sama yaitu tempat untuk tulisan yang bisa dibilang penting, oleh karena itu Anda harus menyimpanannya di tempat yang berbeda agar tidak bercampur dengan tulisan yang lainnya, bagi Anda yang belum tahu tutorialnya, di blog ini Admin sudah membuat beberapa desain text box lengkap yang bisa Anda pilih satu persatu.

Bagi Anda yang ingin belajar kode HTML dasar maka sangat cocok pertama kali untuk belajar membuat sebuah kotak dengan menggunakan bahasa HTML yang menurut Admin tidak terlalu sulit, bagi seorang blogger pengunjung adalah hal yang utama yang harus diperhatikan, baik itu kenyamanan, artikel yang mudah dipahami, desain blog yang rapih, loading cepat dan masih banyak yang lainnya, salah satu yang termasuk dari desain blog rapih dan mudah dipahami adalah dengan memasang kotak texks untuk menempatkan tulisan tertentu.

Cara Membuat Kotak Tulisan/Script di Blog Menggunakan Kode HTML

Sudah ada beberapa contoh desain kotak berbeda beda yang Admin jadikan contoh dibawah ini, jika Anda kurang merasa puas dengan desain yang dibuat, Anda bisa kapanpun merubahnya sendiri sesuai versi Anda namun syaratnya harus paham mengenai kode HTML.

Kotak Pertama

Desain yang pertama ini simple dan kodenya sangat singkat, cocok bagi Anda yang tidak suka hal rumit. untuk menerapkan di blog, tempel kode dibawah ini di Mode HTML, bukan Compose.
<textarea cols-“50″ row =”6”> Tulisannya disini</textarea>
Penjelasan:
  • Angka 50 adalah kotak kearah kanan.
  • Angka 6 adalah panjang kotak ke arah bawah.
Dari kode diatas maka jadinya akan seperti ini:

Berikut kotak tulisan yang lebih keren dari yang diatas, tinggal Anda tempel saja di Blog:

Warna Ungu Berkesan Keren

<div style=”background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;”>Tulisan Disini</div>

Lebih Menarik dan Simple

<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;”>Tulisan Disini</div>

Tidak makan tempat, bisa di Scroll keatas dan kebawah

<div style=”background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 100px;”>Tulisan Disini</div>

Lebih simple dan elegan

<div style=”border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;”>Tulisan Disini</div>

Ada warna tambahan  di atasnya, bisa Anda rubah sendiri

<div style=”-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: #dddddd; border-top: 20px solid #f4034c; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;”>Tulisan Disini</div>

Backround putih polos, jadi tulisan lebih terlihat jelas

<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;”>Tulisan Disini</div>

Semuanya hijau, cocok di terapkan di Blog dengan tema berwarna hijau

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #33ff99; border-radius: 10px; border: 2px dashed #ffff99; padding: 10px; t-align: left;”>Tulisan Disini</div>

Warna biru, sangat cocok dipadukan dengan warna biru yang lainnya

<div style=”-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #2288dd; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;”>Tulisan Disini</div>

Dilengkapi warna berbeda di samping kiri, menambah kotak menjadi lebih menarik

<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;”> <span style=”background-color: #eaeaea;”>Tulisan Disini</span></div>

Diatas adalah beberapa contoh kode HTML untuk membuat sebuah kotak yang bisa dimanfaatkan untuk tempat tulisan atau script penting yang memungkinkan di copy oleh para pembaca artikel Anda, silakan pilih desain yang menurut Anda keren, dan soal warna, bisa diubah dengan menggunakan kode warna HTML, sekian tutorial membuat text box, terimakasih.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *