Beberapa style border blog
Border atau box atau kotak bisa dipergunakan untuk :- Mempercantik blog misalkan : untuk box header widget, box posting diberanda, dll.
- Merapikan posting kita, misalkan : membuat box untuk script atau kode agar tampak berbeda dengan isi posting.
- Beberapa style border sbb :
Border 1 :
Border 2 :
Border 3 :
Border 4 :
Border 5 :
Border 6 :
<div style="margin-left: 36px;">
<div style="background-color: whitesmoke; border-color: black; border-style: solid; border-width: 1px 1px 1px 5px;"> Isi Post </div></div>Border 2 :
<div style="background-color: whitesmoke; border-color: black; border-style: solid; border-width: 1px;margin-left: 36px;"> Isi Post </div>
Border 3 :
<div style="margin-left: 36px;">
<div style="background-color: whitesmoke; border-color: black; border-style: dotted; border-width: 1px;"> Isi Post </div></div>
<div style="background-color: whitesmoke; border-color: black; border-style: dotted; border-width: 1px;"> Isi Post </div></div>
Border 4 :
<div style="margin-left: 36px;">
<div style="background-color: whitesmoke; border-color: black; border-style: dashed; border-width: 1px;"> Isi Post </div></div>
<div style="background-color: whitesmoke; border-color: black; border-style: dashed; border-width: 1px;"> Isi Post </div></div>
Border 5 :
<div style="margin-left: 36px;">
<div style="-moz-border-radius: 4px; -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3); -o-border-radius: 4px; -webkit-border-radius: 4px; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3); background: transparent; border-radius: 4px; border: 1px solid #ccc; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);"> Isi Post </div></div>
<div style="-moz-border-radius: 4px; -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3); -o-border-radius: 4px; -webkit-border-radius: 4px; -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3); background: transparent; border-radius: 4px; border: 1px solid #ccc; box-shadow: inset 0px 1px 1px rgba(0, 0, 0, .3);"> Isi Post </div></div>
Border 6 :
<div style="margin-left: 36px;">
<div style="-moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-border-radius: 0 20px 0 20px; -webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5); -webkit-transition: all 0.5s ease-in-out; background: transparent; border-radius: 0 20px 0 20px; border: 1px solid grey; box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5); transition: all 0.5s ease-in-out;"> Isi Post </div></div>
<div style="-moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-border-radius: 0 20px 0 20px; -webkit-box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5); -webkit-transition: all 0.5s ease-in-out; background: transparent; border-radius: 0 20px 0 20px; border: 1px solid grey; box-shadow: 1px 1px 5px 5px rgba(204, 204, 204, 0.5); transition: all 0.5s ease-in-out;"> Isi Post </div></div>
- Cara memasang border untuk Entry Baru Posting :
- Copy Kode diatas.
- Entry Baru Posting, Klik HTML (kiri atas) : Pastekan kode.
- Klik compose/Pratinjau untuk melihat hasilnya.
- Rubah margin apabila jarak dari kiri belum sesuai.
Cara mengatur margin ada 2 cara :
1. Membuat style baru (lihat Border 1)
2. Menambahkan pada style yang sudah ada (lihat border 2)
- Entry Baru Posting, Klik HTML (kiri atas) : Pastekan kode.
- Klik compose/Pratinjau untuk melihat hasilnya.
- Rubah margin apabila jarak dari kiri belum sesuai.
Cara mengatur margin ada 2 cara :
1. Membuat style baru (lihat Border 1)
2. Menambahkan pada style yang sudah ada (lihat border 2)
|
|
|
Tidak ada komentar:
Posting Komentar