Cara Membuat Kolom Teks di Blog

Bagi seorang blogger membuat kotak script atau teks di dalam postingan blog wajib tahu. Berikut cara membuat kolom teks di Blog. Kotak script atau kotak teks, biasanya digunakan untuk memasukan kode HTML ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya.
Cara Membuat Kolom Teks di Blog

Terkadang kita ingin membuat kotak teks atau kolom teks. Cara membuat kotak script di dalam posting blog itu mudah kalau tahu cara membuat kode HTML tapi kalau kalau Anda tidak tahu cukup mencari tahu kode HTML nya saja. Kalau sudah tahu kodenya tinggal copy paste ke blog yang mau dipasang kolom teksnya. Disini saya mau berbagi beberapa kode HTML untuk membuat kolom teks di Blog. 

Cara membuat kolom teks di Blog, ikuti langkah-langkah dibawah ini.
Login ke blogger pilih entri baru. Kemudian buatlah tulisan artikel Anda.

Selanjutnya klik HTML dan masukan kode berikut, dibawah tulisan Anda.
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;text-align: left;">.Klik Disini.</div>

Keterangan Kode :
  • border: 3px = ketebalan kotak script
  • #1780dd = warna kotak script 
  • Double; = Bentuk kotak, bisa diganti dengan dashed, dotted, Double 
  • padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
  • background-color: #ffffff; = warna dalam kotak.
  • text-align:left; = posisi tulisan didalam kotak di kiri
Hasil kolom teks/scriptnya seperti dibawah ini. 

.Klik Disini.
 
Tulisan "Klik Disini" dalam kolom teks  bisa kita ubah sesuai keinginan, contoh seperti ini : 

Handphone seken cuman 200ribu.Harga Barang bisa berubah sewaktu-waktu!

Ini kolom teks biasa, jika ingin membuat Kotak Script dengan Scroll, caranya sama cuman kodenya beda. Berikut kode HTML untuk kolom teks dengan scroll:

<div style="border: 3px #1780dd solid; padding: 10px;background-color:#ffffff;overflow: auto; height: 50px; width: 300px;text-align: left;">.kode script disini.</div> 

Keterangan Kode :
  • overflow:auto; = fungsi scrollnya. 
  • height: = tinggi kotak
  • width: = lebar kotak
Hasilnya seperti dibawah ini :

.kode script disini.

Jika tulisa dalam teks kita ubah, maka menjadi seperti ini: 

tess...
oke...
KERENN
 

(teksnya harus minimal 3 baris baru muncul scrollnya). Kotak script bisa juga dipindahkan ke kanan, dengan menambahkan kode float: right; Sehingga kodenya menjadi seperti ini :

<div style="border: 3px #1780dd solid; float: right; 10px;background-color:#ffffff;overflow: auto; height: 50px; width: 300px;text-align: left;">.kode script disini.</div>

Hasilnya seperti ini : 

.kode script disini.




Bentuk kolom teks juga bisa seperti ini. 

Kode HTML nya adalah : 
<form name="copy"><div align="center"><input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button"/></div><p style="text-align: center;"><textarea style="padding: 3px; width: 300px; height: 50px;" name="txt">Ganti dengan teks atau kode sobat </textarea></p></form>
Masih banyak bentuk kolom teks yang bisa kita variasikan. Karena menyematkan kotak dalam tulisan blog terlihat menarik dan indah. Banyak blogger menggunakan kotak dalam postingan untuk menaruh informasi penting. Demikian "Cara Membuat Kolom Teks di Blog". 
Semoga Bermanfaat!.


Add Your Comments

Disqus Comments