Cara Membuat Bingkai pada Tulisan di Postingan

Memberi bingkai pada sebuah tulisan menjadi penting agar selain tulisan menjadi cantik, cuka memberi penekanan khusus sehingga pembaca bisa memahami dan menemukan titik point dengan cepat. Cara membuat tulisan berbingkai sebenarnya sangatlah mudah. Namun bagi yang belum tahu, caranya pun akan terasa sulit. Maka berikut Ngonline06 akan berbagi cara membuat bingkai pada tulisan di postingan.

Perlu diketahui bahwa tutorial ini akan dibagi menjadi dua jenis. Jenis pertama, Ngonline06 akan mengajak pada jenis bingkai dan yang kedua akan mengajak untuk berkreasi. Artinya pada jenis pertama, Sahabat akan melihat dua jenis bingkai yang umum dilakukan oleh para blogger. Dan yang kedua, sahabat akan diajak untuk berkreasi dan melihat aneka kreasi bingkai sehingga tampil cantik dan elegant.

1. Jenis Bingkai

a. Border (Bingkai Biasa)

Seperti namanya, border artinya adalah bingkai. Jika sahabat ingin memposting dan ingin memberi penekanan tersendiri pada tulisan tertentu, maka kebutuhan untuk memberi bingkai atau border menjadi penting. Maka, berikut adalah kode bingkai yang bisa sahabat gunakan.

<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">TULISAN PENDEK</div>

Contoh dari tulisan berbingkai adalah tulisan kode di atas. Menarik bukan jika tulisan tertentu dibuat bingkai? hehe...

2. Overflow (Bingkai Berscroll)

Namun jika tulisan yang hendak dibuat itu sangat panjang, alangkah sebaiknya diberi bingkai yang berscrool agar lebih menarik dan efisien. Maka berikut adalah kodenya.

<div style="background-color: #fbfbee; border: 1px solid #ccc; height: 100px; margin: auto; overflow: auto; padding: 3px; text-align: left; width: 95%;">TULISAN YANG PANJANG</div>

Silahkan rubah tulisan berwarna merah di atas dengan scroll, hidden, atau auto sesuai dengan kebutuhan sahabat semua.

• Scroll berarti tulisan jika melebihi batas, maka secara otomatis scroll akan muncul
• Sidden berarti tulisan jika melebihi batas, maka tulisan tersebut tidak akan terlihat
• Auto berarti automatis (RECOMENDED)

Jika hendak melihat contohnya, silahkan lihat scroll di bawah ini.

TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG. TULISAN YANG PANJANG.

Mengkreasi Bingkai pada Tulisan di Postingan

Bagaimana Sahabat Ngonline06, puaskah dengan tutorial di atas? Jika belum puas, Ngonline06 akan mengajak untuk mengkreasi bingkai dengan indah dan kreatif.

1. Dashed 

Kodenya:

<div style="background: #0f0; border: 5px #295f00 dashed; color: #295f00; height: auto; line-height: 1.5em; margin: 10px 0px; padding: 5px; text-align: left; width: auto;">
TULISAN ANDA</div>

Hasilnya:

Ngonline06 adalah Media Belajar Online Simpel dan Cerdas. Ngonline06 adalah Media Belajar Online Simpel dan Cerdas. Ngonline06 adalah Media Belajar Online Simpel dan Cerdas. Ngonline06 adalah Media Belajar Online Simpel dan Cerdas. Ngonline06 adalah Media Belajar Online Simpel dan Cerdas.

2. Dotted

Kodenya:

<div style="background: #ef0090; border: 5px dotted #ffeff9; color: #ffeff9; height: auto; line-height: 1.5em; margin: 10px 0px; padding: 5px; text-align: left; width: auto;">
TULISAN ANDA</div>

Hasilnya:

Ngonline06 adalah Media Belajar Online Simpel dan Cerdas. Ngonline06 adalah Media Belajar Online Simpel dan Cerdas. Ngonline06 adalah Media Belajar Online Simpel dan Cerdas. Ngonline06 adalah Media Belajar Online Simpel dan Cerdas. Ngonline06 adalah Media Belajar Online Simpel dan Cerdas.

Demikian tata cara membuat bingkai pada tulisan di postingan. Jika ada hal yang belum dipahami, silahkan ditulis di kotak komentar. Akhirnya semoga bermanfaat untuk Sahabat Ngonline06 semua.