Cara Membuat Kotak Menggunakan Script HTML di Postingan Blog

Cara membuat kotak menggunakan script html di postingan blog. Mau tau cara membuat script box dalam postingan blog?. Yuk simak cara membuat kotak teks menggunakan script html di postingan berikut ini.


cara membuat kotak script dalam postingan blog


Cara membuat script box. 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.
Terkadang kita ingin membuat kotak teks atau kolom teks di dalam postingan blog bukan?. Nah, bagaimana cara membuat kotak script di postingan kita?. Cara membuat kotak script di dalam posting blog itu mudah kalau tahu cara membuat kode HTML tapi kalau Anda tidak tahu, cukup mencari tahu kode HTML nya saja.

Kalau sudah tahu kodenya kan tinggal copy paste ke blog yang mau dipasang kolom teksnya. Inikan cara paling mudah membuat kotak di blog

Jadi, disini saya mau berbagi beberapa kode HTML untuk membuat kolom teks di Blog. 

Berikut cara membuat kotak menggunakan script html di postingan blog. Untuk 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, di bawah 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. Itu sebabnya banyak blogger menggunakan kotak dalam postingan untuk menaruh informasi penting.

Demikianlah cara membuat kotak script dalam postingan blog, cukup copypaste script html yang kalian anggap menarik untuk ditaro dalam postingan blog kalian. Semoga cara membuat kotak html di postingan ini bisa mudah dimengerti.



 


Add Your Comments

Disqus Comments