Dalam
membuat postingan sebuah blog,
kita biasanya terbiasa untuk bereksperimen mencoba semua fitur
penulisan yang di sediakan oleh blogger. Selain karena latar belakang
coba-coba, kegiatan kita dalam mengeksplorasi semua fitur penulisan
postingan juga dikarenakan oleh keinginan kita untuk membuat tampilan
postingan blog terlihat lebih menarik dan mengundang pengunjung untuk
membaca. Menyisipkan gambar,
memberi tabel dalam postingan,
memberi video, memberi quote (keterangan kata), dsb. Akan tetapi,
karena keterbatas fitur kita juga cenderung terpaku pada kreasi yang
itu-itu saja. Kita harus menemukan sendiri bagaimana cara membuat ini,
cara menambahkan itu dalam rangka mengemas tampilan postingan blog agar
terlihat lebih menawan.
Salah satu contohnya adalah membuat border dalam postingan blog. Border
berguna untuk memberikan bingkai pada tulisan agar terlihat lebih
terfokus dan menawan. Dengan pemberian border juga akan membuat tulisan
lebih mudah untuk dipahami poin pentingnya. Akan tetapi, karena fitur
untuk membuat border belum disediakan oleh blogger, maka kita harus
membuatnya sendiri dengan beberapa kode HTML yang perlu ditambahkan.
Bagaimana
cara membuat border dalam postingan blog ini?
Pertama, masuk ke akun blogger kita.
Klik entri baru.
Saat masuk dalam halaman untuk menulis postingan blog, jangan masuk ke
bagian compose, tetapi masuk lah ke bagian edit HTML untuk menuliskan
kode HTML yang digunakan untuk membuat border yang diinginkan beserta
tulisan yang akan muncul di dalam border tersebut. Setidaknya ada empat
pilihan jenis border yang dapat kita gunakan, yaitu ;
Bentuk I
Kode HTMLnya adalah sebagai berikut ;
<div
style="border: 1px #000000 solid; padding: 10px; background-color:
#CEF6CE; text-align: left;"> isi tulisan yang tampil dalam border
</div>
Contoh hasilnya ;
ISI DI SINI GANTI DENGAN SESUKA HATI ANDA . ISI DI SINI GANTI DENGAN
SESUKA HATI ANDA .ISI DI SINI GANTI DENGAN SESUKA HATI ANDA .ISI DI SINI
GANTI DENGAN SESUKA HATI ANDA ISI DI SINI GANTI DENGAN SESUKA HATI ANDA
ISI DI SINI GANTI DENGAN SESUKA HATI ANDA ISI DI SINI GANTI DENGAN
SESUKA HATI ANDA
Bentuk II
Kode HTMLnya adalah sebagai berikut ;
<div
style="border: 1px #000000 dotted; padding: 10px; background-color:
#CEF6CE; text-align: left;"> isi tulisan yang tampil dalam border
</div>
Contoh hasilnya ;
ISI DI SINI GANTI DENGAN SESUKA HATI ANDA . ISI DI SINI GANTI DENGAN
SESUKA HATI ANDA .ISI DI SINI GANTI DENGAN SESUKA HATI ANDA .ISI DI SINI
GANTI DENGAN SESUKA HATI ANDA ISI DI SINI GANTI DENGAN SESUKA HATI ANDA
ISI DI SINI GANTI DENGAN SESUKA HATI ANDA ISI DI SINI GANTI DENGAN
SESUKA HATI ANDA
Bentuk III
Kode HTMLnya adalah sebagai berikut ;
<div
style="border: 1px #000000 dashed; padding: 10px; background-color:
#CEF6CE; text-align: left;"> isi tulisan yang tampil dalam border
</div>
Contoh hasilnya ;
ISI DI SINI GANTI DENGAN SESUKA HATI ANDA . ISI DI SINI GANTI DENGAN SESUKA HATI ANDA .ISI DI SINI GANTI DENGAN SESUKA HATI ANDA .ISI DI SINI GANTI DENGAN SESUKA HATI ANDA ISI DI SINI GANTI DENGAN SESUKA HATI ANDA ISI DI SINI GANTI DENGAN SESUKA HATI ANDA ISI DI SINI GANTI DENGAN SESUKA HATI ANDA
Bentuk IV
Kode HTMLnya adalah sebagai berikut ;
<div
style="border: 2px #000000 solid; padding: 10px; background-color:
#CEF6CE; overflow: auto; height: 50px; width: 300px; text-align:
left;"> isi tulisan yang tampil dalam border </div>
Contoh hasilnya ;
ISI DI SINI GANTI DENGAN SESUKA HATI ANDA . ISI DI SINI GANTI DENGAN
SESUKA HATI ANDA .ISI DI SINI GANTI DENGAN SESUKA HATI ANDA .ISI DI SINI
GANTI DENGAN SESUKA HATI ANDA ISI DI SINI GANTI DENGAN SESUKA HATI ANDA
ISI DI SINI GANTI DENGAN SESUKA HATI ANDA ISI DI SINI GANTI DENGAN
SESUKA HATI ANDA
Keterangan :
- Kode HTML border: 1px #000000, menunjukan warna dari border yang kita gunakan.
- Kode HML padding: 10px, menunjukan jarak bagian dalam dari border dengan body.
- Kode HTML background-color: #CEF6CE, menunjukan warna yang digunakan sebagai background dalam border yang kita buat.
- Kode HTML text-align: left, akan menampilkan pemerataan tulisan
dalam border yang dibuat, apakah rata kanan (right), rata kanan kiri
(justify), atau rata tengah (center).
- Kode HTML height: 50px, menunjukan tinggi dari boder. Sedangkan kode HTML width: 300px, menunjukan lebar border yang kita buat.
Mudah untuk membuatnya bukan? Yuk kita buat bersama-sama!
Kalau ada pertanyaan silakan tulis lewat kotak komentar ya kawan..
Salam blogger!
