Cara Membuat Bingkai/Frame Pada Postingan Blog

Siapa yang tidak suka blog kita ramai akan pengunjung? Pasti semua blogger sangat suka kalau blog nya ramai dikunjungi orang setiap saat, tidak mudah untuk membuat blog kita ramai pengunjung.

Kita harus rajin membuat postingan, mempercantik tampilan blog, dan lain sebagainya. Untuk mempercantik tampilan blog kita bisa menambahkan frame/bingkai pada salah satu tulisan kita di postingan blog kita sendiri, contohnya seperti ini:

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Selain frame/bingkai seperti diatas, masih banyak jenis-jenis frame/bingkai yang kita akan gunakan.

Cara Membuat Frame/Bingkai Pada Postingan Blog

• 1. Masuk ke dashboard blog, kemudian pergi ke menu Postingan
• 2. Pilih postingan baru
• 3. Pilih Tampilan HTML, bukan Tampilan Menulis/Compose
• 4. Letakkan kode berikut ini

Solid

<div style="background-color: #ecf0f1; border: 3px solid rgb(246, 121, 56); padding: 5px; position: relative;">Tulisan Anda disini</div>

Dashed

<div style="background-color: #ecf0f1; border: 3px dashed rgb(246, 121, 56); padding: 5px; position: relative;">Tulisan Anda disini</div>

Double

<div style="background-color: #ecf0f1; border: 3px double rgb(246, 121, 56); padding: 5px; position: relative;">Tulisan Anda disini</div>

Dotted

<div style="background-color: #ecf0f1; border: 3px dotted rgb(246, 121, 56); padding: 5px; position: relative;">Tulisan Anda disini</div>

Groove.

<div style="background-color: #ecf0f1; border: 3px groove rgb(246, 121, 56); padding: 5px; position: relative;">Tulisan Anda disini</div>

Ridge

<div style="background-color: #ecf0f1; border: 3px ridge rgb(246, 121, 56); padding: 5px; position: relative;">Tulisan Anda disini</div>

Outset

<div style="background-color: #ecf0f1; border: 3px outset rgb(246, 121, 56); padding: 5px; position: relative;">Tulisan Anda disini</div>

Kalian juga bisa mengganti warna background dan warna border sesuai selera kalian masing-masing. Untuk mengganti warna background, silahkan ubah kode yang berwarna merah, sedangkan untuk mengganti warna border, silahkan ubah kode yang berwarna biru

Selain itu anda juga dapat mengedit radius dari border nya (sudut melengkung), dengan cara menambahkan border-radius:5px; hasilnya akan seperti ini:

Tulisan Anda disini

Anda juga dapat membuat efek scroll dengan menambahkan overflow:auto;dan juga menambahkan width:100%; serta height:80px hasilnya akan seperti ini

Tulisan Anda disini,

1. satu
2. dua
3. tiga
4. empat