Membuat Kotak Border dalam Postingan Blog Dengan Berbagai Macam Style

Membuat Kotak Border dalam Postingan Blog - Cara membuat kotak border dalam postingan blog ini sebenarnya sudah cara-mei terapkan kedalam beberapa postingan sebelumnya. Internal link yang terdapat dalam postingan cara-mei sebelumnya sebenarnya juga menggunakan css kotak border untuk meletakkan link artikel terkait. Cara membuat kotak border ini bisa kalian manfaatkan untuk berbagai keperluan. Selain untuk menjadikan background internal link, kalian juga bisa menggunakannya untuk membuat pengumuman di blog di widget atau didalam artikel maupun di halaman blog.

Degan membuat kotak border didalam blog kalian, tentu akan menjadikan tampilan blog kalian terkesan menarik dan membuat betah pengunjung yang datang ke blog kita, namun dengan catatan, gunakan seperlunya saja. Dibawah ini adalah contoh pengunaan kotak border yang ada dalam postingan cara-mei sebelumnya.

Border dalam Postingan Blog style 1

Border dalam Postingan Blog style 2

Border dalam Postingan Blog style 2

Jika kalian ingin membuat style seperti contoh diatas, kalian bisa baca Cara Membuat Alert di Blog dengan Style Bootstrap Tanpa Javascript

Ke tiga style tersebut pada dasarnya mempunyai konsep yang sama, hanya bagian warna yang membedakan style satu dengan yang lain. Pada ketiga style diatas, cara-mei hanya menggunakan satu saja properti css, yaitu border. Border sendiri bisa ditambahkan dengan berbagai properti lain, agar membentuk tampilan border yang berbeda. Dibawah ini contohnya.

Dari ke empat style border pada gambar diatas masing-masing memakai style border yang berbeda, silahkan praktekkan tutorial dibawah ini.

Cara Membuat Kotak Border

Langsung saja cara-mei akan memberikan kode dari ke empat style border seperti gambar diatas. Kode html dan css akan cara-mei pisah, supaya kalian lebih mudah memahami.

 #bordersemuasisi{border:1px solid #000;padding:10px}
#borderbawah{border-bottom:1px solid #ff0000;padding:10px}
#borderbulat{border:1px solid #b3b1b1;padding:10px;border-radius:12px}
#borderkiri{border-left:7px solid #22a1f1;padding:10px;background-color:#b7dbf2} 

 <div id="bordersemuasisi">Ini adalah border semua sisi | cara-mei.blogspot.com</div>
<br />
<div id="borderbawah">Ini adalah border bawah | cara-mei.blogspot.com</div>
<br />
<div id="borderbulat">Ini adalah border bulat | cara-mei.blogspot.com</div>
<br />
<div id="borderkiri">Ini adalah border kiri | cara-mei.blogspot.com</div> 

Nah kode diatas jika dijalankan akan menjadi seperti dibawah ini :

Ini adalah border semua sisi | cara-mei.blogspot.com

Ini adalah border bawah | cara-mei.blogspot.com

Ini adalah border bulat | cara-mei.blogspot.com

Ini adalah border kiri | cara-mei.blogspot.com

Sampai disini kalian sudah membuat kotak border dengan berbagai macam style seperti diatatas. Lalu pertanyaannya, bagaimana cara menerapkan kode tersebut kedalam postingan blog? Silahkan lanjut simak tutorial berikutnya dibawah ini.

Cara membuat kotak border dalam postingan blog

1. Salin kode css diatas, dan paste tepat diatas kode ]]></b:skin>
2. Tulis artikel seperti biasa dan masuk ke menu HTML bukan Compose
3. Paste salah satu kode html diatas, pilih sesuai selera.
4. Sisipkan kata-kata sesuka kalian diantara kode html tadi.

Contoh : 

<div id="borderkiri">Baca juga : <a href="#">Cara membuat border didalam post blog</a></div>

Dengan kode diatas, maka akan tampil dalam postingan blog seperti dibawah ini :

Baca juga : Cara membuat border didalam post blog

Nah, bagaimana? cukup mudah bukan. Kalian bisa menggunakan kotak border ini untuk berbagai macam fungsi. Selain untuk dijadikan background internal link seperti contoh diatas, kalian juga bisa menggunkannya untuk membuat pengumuman di blog yang bisa dipasang di widget. Seperti yang cara-mei pasang di blog ini juga menggunakan cara diatas, namun dengan sedikit tambahan fungsi close didalamnya.

Baca juga : Cara Membuat Notifikasi Alert di Blog Dengan Tombol Close

Jika kalian masih merasa bingung tentang tutorial diatas, silahkan berkomentar dibawah. Dengan senang hati cara-mei akan pandu dan bantu. Sampai disini dulu tutorial kali ini tentang Membuat Kotak Border dalam Postingan Blog Dengan Berbagai Macam Style. Semoga dengan tutorial diatas, membuat pengunjung betah berlama-lama di blog kalian. Terimakasih dan Happy Blogging.