Cara Membuat Kotak Teks di Postingan Blog yang Menarik dan Benar

mastagul.com - Saat ini sudah mulai banyak para blogger yang menggunakan Kotak Teks ( text Box ) untuk merubah penampilan postingan mereka. Terkadang ada sebagian orang yang bosen karena tampilan blog mereka begitu-begitu saja.

mastagul.com
Ilustrasi Coding
Dengan menambah Kotak Teks di postinganya membuat postinganya akan terlihat berbeda, bahkan tampilan postinganya bisa menjadi lebih berwarna dan terlihat hidup.

Fungsi kotak teks sebenarnya ada banyak, tergantug mau digunakan untuk apa. Pada umumnya kotak teks digunakan karena adanya informasi yang penting, seperti penulisan scrip HTML, java dan lain-lain.

Untuk Kotak Teks sebenarnya modelnya sangat banyak sekali, tergantung dengan kreatifitas masing-masing. semakin kreatif maka semakin bagus juga hasilnya.

Bagi sobat Blogger yang mau membuat kotak teks disini mastagul.com akan membagikan Cara Membuat Kotak Teks di Postingan Blog yang Menarik.

Bagi sobat yang mau membuat kotak teks alangkah baiknya sobat mengetahui hal-hal dasar sebagai berikut:

  • Border adalah garis yang mempunyai bentuk kotak, yang garisnya bisa dirubah ketebalanya sesuai dengan keinginan pengunanya, biasanya untuk merubah ketebalannya dengan mengganti angka di depan px.
  • Background Color adalah suatu kode yang berfungsi untuk merubah warna yang berada di dalam kotak.
  • Text Align adalah mempunyai fungsi untuk merubah posisi teks, kondisinya mau rata sebelah kiri, rata sebelah kanan atau posisinya mau di tengah-tengah. biasanya menggunakan left, right dan Center.
  • Padding adalah mempunyai fungsi untuk merubah ukuran panjang atau lebar pada kotak script. untuk merubah ukuranya cukup denga mengganti anggka di depan px.
  • Kode Double adalah tampilan kotak script, untuk pin ini bisa di ganti dengan kode dotted, solid, groove, inset, ridge.

Ituah beberapa hal dasar yang perlu sobat ketahui sebelum membuat kotak teks.

Cara membuat kotak di postingan blog:

Langkah 1: Masuk ke blog sobat masing-masing kemudian Klik Entri Baru




Langkah 2: Buatlah tulisan atau artikel terlebih dahulu di Halaman Compose ( seperti pada gambar dibawah perhatikan kotak warna merah )


Langkah 3: Kemudian setelah membuat tulisan atau artikel menuju Halaman HTML ( lihat gambar dibawah perhatikan kotak merah 1), kemudian tempelkan Code script kotak dibawah kedalam Halaman HTML ( lihat gambar dibawah kotak merah 2 ).

 
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
 
Code script kotak


Langkah 4: Setelah Code script terpasang di halaman HTML, kemudian sobat kembali ke Halaman Compose ( lihat gambar dibawah perhatikan kotak merah 1 ). Maka Hasilnya akan Terlihat seperti dibawah ini ( di gambar bawah akan terlihat di kotak merah 2 ).

Hasilnya akan terlihat seperti ini.


Langkah 5: Tinggal di publikasikan, selesai.

Itulah beberapa langkah untuk membuat Kotak Teks di dalam postingan Blog, setelah sobat mengetahui cara pemasanganya sekarang mastagul.com akan memberikan beberapa script kotak yang bisa sobat gunakan.

Model Script Kotak Teks

1. Kotak Minimalis

Code Script
 
 <div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">Kode Script Anda Di Sini</div> 
 

Hasilnya
Hasilnya seperti ini, sobat tinggal isi teks disini

Keteranga:

  • tulisan 1px jika di ganti dengan angka yang lebih besar maka garis pinggir kotak akan semakin tebal, semakin besar angkanya, akan semakin tenal garis kotaknya.
  • Tulisan #eaeaea; menunjukan warna begraound yang sedang digunakan, jika ingin mengganti warna backgroundnya maka tinggal mengganti Code warnanya.
  • Pada tulisan left menunjukkan bawa tulisan yang berada di dalam kotak memiiki pisisi rata sebelah kiri.
  • Tulisan padding: 10px semakin tinggi angkanya maka kotaknya akan semakin panjang kebawah.

Untuk Code Scrip lainya juga intinya hampir sama, nanti silahkan sobat-sobat bereksperimen sesuai dengan kreatifitas masing masing.

2. Kotak Left Border


Code Script
 
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
 

Hasilnya
Hasilnya seperti ini, sobat tinggal isi teks disini

3. Kotak Dotted

Code Script
 
<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
Kode Script Anda Disini</div>
 

Hasilnya
Hasilnya seperti ini, sobat tinggal isi teks disini

4. Kotak Double

Code Script
 
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
 

Hasilnya
Hasilnya seperti ini, sobat tinggal isi teks disini

5. Kotak Dashed

Code 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;">Kode Script Anda Disini</div>
 

Hasilnya
Hasilnya seperti ini, sobat tinggal isi teks disini

6. Kotak Scroll

Code Script
 
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">
Kode Script Anda Disini…… </div>
 

Hasilnya
Hasilnya seperti ini, sobat tinggal isi teks disini
Hasilnya seperti ini, sobat tinggal isi teks disini
Hasilnya seperti ini, sobat tinggal isi teks disini
Hasilnya seperti ini, sobat tinggal isi teks disini
Hasilnya seperti ini, sobat tinggal isi teks disini

Bagaimana, tidak seribet yang sobat bayangkan bukan, sobat hanya perlu mgambil Code script kemudian tempel pada postingan, jadi deh.

Itulah beberapa Code script yang bisa mastagul.com berikan, silahkan berkomentar jika ada hal yang belum sobat pahami. kita nanti diskusikan bersama dan belajar bersama.

Terimakasih.




Ide Bisnis


Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Cara Membuat Kotak Teks di Postingan Blog yang Menarik dan Benar"

Posting Komentar

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar bersifat iklan, spam, titip link Semua akan dihapus oleh admin

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel