Membuat text box untuk postingan di blog,sangat mudah gan hanya perlu beberapa kode CSS dan HTML,untuk mengatur bentuk box dan untuk menggunakan kotak pesan tersebut pada saat kita membuat postingan,tex box ini tidak jauh berbeda dengan fungsi massage box pada blogger,sama-sama
untuk meletakan kata-kata pada kotak,sehingga pembaca blog akan lebih
mudah memahami maksud dari si penulis postingan,apalagi bila kita akan
membuat postingan tutorial,tentunya tex box akan sangat membantu kita
dalam menjelaskan atau memberikan instruksi pada pembaca blog kita,nah
pada postingan saya kali ini saya akan berbagi tips atau cara membuat
text box atau kotak pesan keren untuk postingan di blog,lebih
jelasnya silahkan screenshot disamping,seperti itulah text box yang akan
kita buat. .dengan 4 warna abu-abu,merah,kuning,hijau,oke langsung ke
caranya saja sob.
Cara membuat text box
Salin kode CSS di bawah ini dan pastekan tepat di atas kode ]]></b:skin> pada tempelate anda
.box {
height:auto;
margin:15px auto;
line-height:1.1 !important;
font-size:15px;
padding:5px;
width:300px;
text-align: justify;
}
.abu2 {
background:#999;
outline:4px solid #888;
outline-offset:1px;
border:2px dashed #666;
}
.merah {
background:#e00;
outline:4px solid #d00;
outline-offset:1px;
border:2px dashed #a00;
}
.kuning {
background:#FD0;
outline:4px solid #FC0;
outline-offset:1px;
border:2px dashed #FA0;
}
.hijau {
background:#0C0;
outline:4px solid #080;
outline-offset:1px;
border:2px dashed #0A0;
}
Kalau sudah memasang kode CSS di atas,sekarang save tempelate anda dan
untuk menggunakan di postingan gunakan HTML di bawah ini.pastikan saat
anda ingin memasukan kode HTML dibawah ini,beralih ke mode HTML dulu
bukan Compose.
<div class='hijau'>
Masukan konten atau kata-kata untuk text box anda disini
</div>
KETERANGAN: Kode yang berwarna hijau itu adalah tema untuk tex
box yang akan anda gunakan,silahkan diganti dengan tema tex box yang
akan anda gunakan seperti:
- abu2
- merah
- kuning
- hijau
0 comments:
Kode Smiley Untuk Komentar
:a :b :c :d :e :f :g :h :i :j :k :l :m :n :o :p :q :r :s :t
Post a Comment