Trik Membuat Kotak/Border Pada Postingan Blog

 
                                                             بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Tutorial Blog Kali ini kita akan membahas tentang Trik Membuat Border/kotak di Dalam Postingan Blog. Ada banyak sekali model/style dari border, sebenarnya hal ini sudah banyak di bahas di postingan blog blog. sebenarnya fungsi dan manfaat dari border ini hanya untuk mempercantik, mempertegas atau membatasi elemen elemen pada postingan blog. sehingga elemen elemen di blog anda jadi tersusun dan terlihat rapi. oke kali ini akan saya share trik membuat border/kotak dengan 4 (Empat) variasi.

Di bawah ini Adalah beberapa Model yang Umum dan biasa di pakai para blogger.

1. Solid Border.
Kode Html :
<div style="background: #0000; border: 5px solid red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Solid</div>

2. Double Border.
Kode Html :
<div style="background: #0000; border: 5px groove red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Groove</div>

3. Dotted Border.
Kode Html :
<div style="background: #0000; border: 5px dotted red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Dotted</div>

4. Dashed Border.
Kode Html :
<div style="background: #0000; border: 5px dashed red; color: black; font-size: 30px; padding: 10px; text-align: center; width: 300px;">Garis Kotak Dashed</div>

Silahkan Di coba dan kreasikan sesuai dengan warna, font, dan tulisan border yang anda inginkan.

Happy Blogging....!!!!!
Artikel Terkait

Tidak ada komentar:

Posting Komentar