Cara Membuat Kotak Teks/Scipt Pada Postingan Blog/Website

12/26/2015
Logo-1

Yoo sob.. selama liburan ini saya akan sedikit share ilmu nih tentang cara membuat kotak teks pada postingan blog/website. Apa itu kotak teks? kotak teks biasanya digunakan untuk menaruh sebuah kalimat, kata, script, kode atau lain - lain pada sebuah kotak yang sudah disesuaikan ukurannya. Selain itu, kita juga bisa merubah dan mewarnai kotak atau tulisan tersebut dengan sesuka hati kita. Nah bagaimana cara membuatnya? Ready? Ok, Step by Step.. cekidot! :D

Cara Membuat Kotak Teks:
  • Login ke www.blogger.com 
  • Pilih Blog sobat yang ingin digunakan
  • Pada menu Sidebar klik "Entri Baru"
    Entri Baru
  • Disebelah pojok kiri atas terdapat Compose dan HTML, Pilih yang HTML.
    Compose | HTML
  • Copy Paste kode berikut ke kolom HTML tersebut:
Tanpa Scroll (Standar) :
<div style="background-color: #ffffff; border: 2px #454843 Double; padding: 10px; text-align: left;"> Mau di isi apa disini</div>
Keterangan:
Warna Background Kotak Teks #ffffff : bisa diganti dengan kode warna yang lain
Ukuran Border 2px : bisa diganti dengan ukuran lain contoh 3px
Warna Border #454843 : bisa diganti dengan kode warna yang lain
Bentuk Kotak padding : bisa diganti dengan dashed , dotted , double , groove , inset , outset , atau ridge
Ukuran padding 10px : bisa diganti dengan ukuran lain
Mau di isi apa disini bisa diubah dengan teks yang ingin sobat sampaikan

Dengan Scroll :

<div style="border: 2px #454843 solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 50px; width: 300px;
text-align: left;">
Mau di isi apa disini</div>
Keterangan
Sama seperti Script yang Tanpa Scroll hanya saja ditambahkan overflow:auto; sebagai fungsi scrollnya.
  • Kembali ke Mode Compose lagi dan lihat hasilnya :D

Share this:

Related Posts

Previous
Next Post »

Aturan Berkomentar:
[+] Tidak Spam
[+] Tidak membuat konflik (SARA & Hinaan)
[+] Tidak menerima Link aktif (Atas Seizin Admin)
[+] Tutur kata sopan dan baik
[+] Emoticon list: EmoticonEmoticon