Untuk mempercantik postingan kadang kita kerap memberi bingkai baik bingkai foto, bingkai kayu,maupun bingkai dari besi he he untuk penjelasan di atas..!!! jangan di terapkan karena bahan-bahan nya khusus untuk studio foto... Nah kalau di postingan ini kita mencoba membuat bingkai sederhana untuk mempercantik postingan...
Di bawah ini ada beberapa jenis bingkai yang tersedia sekalian dengan contoh dan kode nya ...sobat tinggal mengcopy kode dan copas ke postingan sobat atau boleh juga buat edit html java script...
1. Solid
kode nya :
<div style="border: 1px solid #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
<div style="border: 1px solid #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
2. Dotted
kode nya :
<div style="border: 1px dotted #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
<div style="border: 1px dotted #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
3. Double
kode nya :
<div style="border: 4px double #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
<div style="border: 4px double #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
4. Groove
kode nya :
<div style="border: 4px groove #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
<div style="border: 4px groove #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
5. Outset
Kode nya:
<div style="border: 4px outset #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
<div style="border: 4px outset #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
6. Ridge
Kode nya:
<div style="border: 4px ridge #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan,gambar,maupun kode script
</div>
<div style="border: 4px ridge #000000; background-color:#00CCFF; padding: 5px; width: 400px;">
Tulisan,gambar,maupun kode script
</div>
Untuk Penjelasan nya:
Kode
<div style="border: 4px ridge #000000; background-color:#00CCFF; padding: 5px; width: auto;">
Tulisan,gambar,maupun kode script
</div>
Tulisan,gambar,maupun kode script
</div>
Cara Memodif nya :
- background-color: #00CCFF untuk merubah warna latar bingkai nah jika sobat ingin warna yang lain silahkan klik di sini untuk mengambil kode warna lain nya .
- width: auto untuk lebar bingkai..bisa sobat rubah sesuai kebutuhan bisa 400px,500px dll..kalo saya sih..lebih suka dengan auto karena bingkai akan menyesuaikan dengan lebar halaman yang di tempati.
- Tulisan,gambar,maupun kode script di sini tempat anda menyisipkan tulisan,gambar maupun kode script.
salam hangat admin
0 komentar:
Posting Komentar