Cara membuat kotak dengan border pada posting blog atau web.
Menggunakan kotak border dengan warna dan bentuk berbeda dapat menambah
nilai lebih pada postingan. Selain itu tujuaannya untuk memberikan
sebuah penekanan terhadap pernyataan yang di anggap penting, unik
ataupun peringatan. Mulai dari warna background, model dan warna border
dapat diganti-ganti sesuai dengan keinginan. Berikut cara membuat dan menggunakan kotak border di posting blog. Maaf dan terima kasih.
Dalam fitur blog, sebenarnya sudah tersedia untuk membuat kotak
berbeda, yaitu blockquate. Akan tetapi jika dalam satu postingan ada
beberapa penekanan terhadap pernyataan, kalau memakai blockquote semua
jadi akan terlihat membosankan dan kaku. Maka agar lebih menarik
sehingga menjadi tampil cantik dengan membuat kode html untuk
kotak-kotaknya (istilah pastinya tidak tahu
). Langsung saja dipraktikkan yuk cara menggunakan bordernya…
Cara membuat border beda
Untuk membuat border pada postingan maka dalam penulisan kodenya harus dalam mode HTML, tanpa mode tersebut, maka akan dianggap sebagai teks biasa. Contoh border pertama kode html sebagai berikut :
1px #c8c785 solid; background-color: #fdfccf; width: 200px; padding: 10px; text-align: left;”>KATA POSTING DI SINI>
Hasilnya script di atas menjadi seperti di bawah ini
KATA POSTING DI SINI
Contoh lagi dengan panjang, warna dan background border posting berbeda seperti di bawah ini kode html-nya. Perubahan pada kata yang dicetak tebal
1px #a0ca9e dotted; background-color: #e5fce4; width: 400px; padding: 5px; text-align: right;”>Contoh border kedua
Contoh border kedua
Penjelasan sedikit supaya paham struktur kode html tersebut bagi yang lagi mulai mengenal, like me
- border: 1px #a0ca9e dotted;
Ini untuk model border. “1px” untuk ketebalan border, bisa diganti dengan 2px atau 3px.
“#a0ca9e” ini untuk warna border (hijau). Bisa diganti-ganti misalnya pada contoh pertama warna kuning #c8c785, biru #7c9af0, atau warna-warna yang lainnya.
“dotted” bentuk border garis putus-putus (titik-titik). Pada contoh yang pertama dengan type “solid” untuk garis biasa. - background-color: #e5fce4;
Ya sudah bisa dimengerti, ini untuk warna backgroundnya. Bisa diganti-ganti. - width: 400px;
Kode untuk panjang border, bisa disesuaikan dengan panjang posting. - padding: 5px;
Jarak huruf dengan garis tepi. Semakin besar angkanya maka jaraknya
menjadi semakin jauh. Kode di atas berlaku untuk semua jarak dari atas,
kanan, bawah dan kiri.
Juga bisa dibuat berbeda, misalnya dengan kode padding: 10px 5px; Kode ini membuat jarak atas dan bawah 10px, sedangkan yang kanan dan kiri 5px.
Jika setiap sisi ingin beda, maka kodenya padding: 10px 5px; atau berbeda semua padding: 10px 15px 5px 8px;
Jika hanya satu sisi yang berbeda bisa dengan kode padding-left: 10px;
Contoh border ketiga kodenya:
2px #a0ca9e solid; background-color: #e5fce4; width: 500px; padding: 5px; text-align: justify;”>Contoh border ketiga
Di bawah ini width saya hapus, agar panjangnya menyesuaikan dengan posting, dan saya tambahi kode margin, jarak border dengan sisi kiri.
Contoh border keempat kodenya:
margin-left: 60px; padding: 5px; text-align: justify;>Kata di sini
Untuk desain atau model border selengkapnya di bawah, sehingga lebih mudah melihat perbedaannya:
Solid
solid #000000; background-color:#efefef; padding: 5px; width: 500px;”>
Artikel blog di sini….
Dotted
dotted #000000; background-color:#efefef; padding: 5px; width: 600px;”>
Artikel blog di sini….
Dashed
dashed #000000; background-color:#efefef; padding: 5px; width: 600px;”>
Artikel blog di sini….
Double
Groove
groove #000000; background-color:#edfcf0; padding: 5px; width: 600px;”>
Artikel blog di sini….
Outset
outset #000000; background-color:#f9effb; padding: 5px; width: 600px;”>
Artikel blog di sini….
Ridge
4px ridge #000000; background-color:#fafae9; padding: 5px; width: 600px;”>
Artikel blog di sini….
Urutan penulisan kode bisa dibolak-balik, asal tanda pemisahnya jelas. Pada contoh terakhir yang warna merah. Selain itu kita bisa menghilangkan border pada sisi tertentu. Ambil contoh pada border terakhir, bagian bawah tidak ada garisnya
border-bottom: none; background-color: #fafae9; padding: 5px; width: 600px;”>Artikel blog di sini….
Maka dari beberapa contoh di atas, Anda bisa memodifikasi kodenya
sesuai dengan kebutuhan. Dengan mencoba-coba langsung sehingga akan
lebih mengerti setiap perubahan pada kodenya. Dari semua kode silahkan
pilih yang cocok, tentunya menyesuaikan temanya, umpama untuk peringatan
agar benar-benar diperhatikan pengunjung, maka background berwarna
merah
Contoh border untuk posting blog, kode terakhir :
1px #7c9af0 solid; background-color: #d9e1fb; padding: 2px;”>Kata Ada Di SINI
Demikian artikel tentang cara membuat border atau kotak pada postingan blog. Untuk mencoba dan belajar kode tersebut bisa dengan WordPress secara offline Semoga bisa membantu.
Agar blog cepat terindek mesin pencari, maka silahkan baca cara daftar ke search engine. Bagi yang suka teka-teki dan mencari tantangan, saya punya soalnya tentang pawang hewan, kambing, rumput dan macan.
No comments:
Post a Comment