Buat Border Dalam Postingan Blog

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 ;

Sekarang ini bisnis internet berkembang dengan pesat. Marketing yang dulunya berbasis offline kini mulai bergeser ke arah online. Hal ini sedikit banyak dipengaruhi oleh semakin berkembangnya teknologi informasi, banyaknya pengguna internet, dan luasnya jaringan pemasaran. Marketing di internet memiliki banyak sekali tipe terkait mekanisme operasinya, salah satunya adalah iklan dengan sistem Pay Per Click (PPC)

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 ;

Sekarang ini bisnis internet berkembang dengan pesat. Marketing yang dulunya berbasis offline kini mulai bergeser ke arah online. Hal ini sedikit banyak dipengaruhi oleh semakin berkembangnya teknologi informasi, banyaknya pengguna internet, dan luasnya jaringan pemasaran. Marketing di internet memiliki banyak sekali tipe terkait mekanisme operasinya, salah satunya adalah iklan dengan sistem Pay Per Click (PPC)


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 ;

Sekarang ini bisnis internet berkembang dengan pesat. Marketing yang dulunya berbasis offline kini mulai bergeser ke arah online. Hal ini sedikit banyak dipengaruhi oleh semakin berkembangnya teknologi informasi, banyaknya pengguna internet, dan luasnya jaringan pemasaran. Marketing di internet memiliki banyak sekali tipe terkait mekanisme operasinya, salah satunya adalah iklan dengan sistem Pay Per Click (PPC)

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 ;

Sekarang ini bisnis internet berkembang dengan pesat. Marketing yang dulunya berbasis offline kini mulai bergeser ke arah online. Hal ini sedikit banyak dipengaruhi oleh semakin berkembangnya teknologi informasi, banyaknya pengguna internet, dan luasnya jaringan pemasaran. Marketing di internet memiliki banyak sekali tipe terkait mekanisme operasinya, salah satunya adalah iklan dengan sistem Pay Per Click (PPC)

Keterangan :
  1. Kode HTML border: 1px #000000, menunjukan warna dari border yang kita gunakan.
  2. Kode HML padding: 10px, menunjukan jarak bagian dalam dari border dengan body.
  3. Kode HTML background-color: #CEF6CE, menunjukan warna yang digunakan sebagai background dalam border yang kita buat.
  4. 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).
  5. 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!

15 komentar:

  1. mas pandu....jadi langkah pertama hrs tau kode HTML nya dulu..?

    BalasHapus
  2. iya, kode HTMLnya sudah saya kasih di kotak yg berwarna abu2 kebiru2an itu. pilih model border mana yg kita sukai. nah, kemudian kita tinggal menggunakan kode HTMLnya dan memasukan tulisan yg ingin dibingkai di dalamnya. ;)

    BalasHapus
  3. mas gmn cranya klo kita mau menmbah dengan tulisan compose di dalam html...?
    saya bingung mas...
    mohon bantuannya??

    BalasHapus
  4. kalau ingin menambahkan border harus diletakan di bagian edit HTML dan tidak bisa diletakan di bagian compose.

    BalasHapus
  5. nyimak, sob! mantep infonya... :)

    BalasHapus
  6. ya Allah... Arigato gozaimasu...akhrinya saya dapat pencerahan. Saya posting 3 kali sampai begadang begini.. Kata om blog..tidak bisa di posting, kenapa? Karena saya KLIK KOMPOS. Hahaha... Payah saya! Ow, harusnya HTML ya... kalau sudah HTML pasti bisa di publish ya? Maaf, masih awam :'(

    BalasHapus
  7. gan , supaya ujung kotak nya tidak "siku-siku" tapi kaya setengah lingkaran gitu , itu namanya apa ya?
    contohnya kaya buku tamu di blog ane

    BalasHapus
    Balasan
    1. yap. saya juga ingin bertanya bagaimana caranya.

      Hapus
  8. Nice bray. Thanks dah ya bray. Kapan-kapan gue kemari lagi kalau butuh bray. Yo bay.

    BalasHapus
  9. Thanks banget sobat, salam kenal!
    izin nempel link :)

    URL : http://sharing-infokuliah.blogspot.com/

    BalasHapus
  10. Siip, ini yang aku cari.. makasih infonya mas bro, salam kenal :)
    http://wafidaa.blogspot.com/

    BalasHapus
  11. bagaimana jika kita ingin setiap sisi paddingnya tidak kotak tetapi membentuk sudut?

    BalasHapus
  12. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan

    Silahkan berkunjung di intanqq

    BalasHapus