Cara Membuat Tulisan dalam Kotak Bingkai di Postingan Blog



Halo, Sobat RuangKata!

Barangkali ada di antara kalian yang mungkin juga sedang seru-serunya mengulik tampilan blog. Begitu juga Mas Admin ini, hehe. Dan kali ini saya dapat ilmu baru setelah mencari ke mana-mana, yakni membuat tulisan di dalam kotak bingkai.

Dalam beberapa keadaan, saat kita menulis konten di blog terkadang ada kata-kata atau kode-kode tertentu yang mungkin menurut kita pantasnya kata-kata atau kode-kode tersebut dimasukkan dalam bingkai kotak tersendiri yang terpisah dari artikel dan tanpa menggunakan Blockquote. Tujuannya supaya pembaca tahu kalau tulisan di dalam kotak tersebut berisi informasi yang penting.

Sebagai pemula dalam dunia blog tentunya muncul kendala yang membuat saya merasa bingung; Bagaimana caranya membuat tulisan dalam kotak bingkai yang kita inginkan?

Baiklah, supaya kapan-kapan tidak bingung saat saya ingin menggunakan, pada tulisan ini saya posting hasil yang sudah saya kumpulkan dari beberapa tempat, dan sekaligus berbagi kepada sobat RuangKata sekalian yang mungkin juga sama-sama mencari cara ini.

Berikut ini kami sajikan beberapa kode script untuk membuat tulisan di dalam kotak bingkai yang kami kumpulkan beserta cara pemasangannya di dalam postingan blog.


Tiga Langkah Cara Memasang Bingkai Kotak di Postingan Blog


1. Masuk ke bloger dan buat postingan baru, kemudian ganti mode Tampilan Menulis menjadi Tampilan HTML.




2. Langkah selanjutnya, pastekan salah satu kode script bingkai kotak yang kamu inginkan (kode script ada di bawah) ke dalam postingan.
 


3. Untuk melihat hasilnya, ganti mode Tampilan HTML menjadi Tampilan Menulis. Dan selanjutnya silakan teruskan dan selesaikan tulisan kamu seperti biasa. Mudah, kan? :)



Berikut Kumpulan Kode Bingkai Kotak


Setelah kamu mengetahui cara pemasangannya, sekarang kamu tinggal memilih kode-kode script bingkai berikut ini untuk mempertegas tampilan artikel di blog kesayangan kamu.


Catatan:
Ganti tulisan berwarna merah sesuai dengan isi yang kamu kehendaki.


Kotak Border Berwarna Hijau
<div style="border: 3px #04B45F Double; padding: 10px;background-color:#FFFFFF; text-align: left;">isi tulisan kamu di sini</div>


Kotak Border Background Biru

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: #cfe2f3; text-align: center;">isi tulisan kamu di sini</p>


Kotak Border Background Samar

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

Kotak Border Background Biru Tua
<p style="border: solid 1px #eceff5; background: #29447E; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: white; font-size: 18px"> isi tulisan kamu di sini </p>


Kotak Abu-abu Siku Melengkung

<p style="border: solid 1px #aaa; background: #ccc; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">isi tulisan kamu di sini</p>


Kotak Border Orange Putus-putus

<p style="border: dashed 2px #ee3f10; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">isi tulisan kamu di sini</p>


Kotak Biru Sisi kiri Siku Melengkung

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">isi tulisan kamu di sini</div>


Kotak background Kuning Putus Pendek
<div style="border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;">isi tulisan kamu di sini</div>


Kotak Sisi Shadow
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">isi tulisan kamu di sini</div>


Kotak Border Teks Scroll

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 200px; width: 500px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini. isi tulisan kamu di sini
< /div></span></span></span>

*angka 200px dan 500px di atas bisa kamu rubah sesuai selera.


Itu saja kumpulan kode script bingkai kotak yang bisa kami bagikan. Semoga di antara beberapa kode script bingkai yang kami sajikan di atas ada kotak bingkai yang sesuai harapan dan keinginan sobat RuangKata. Jika ada saran atau pertanyaan silakan tuliskan di kolom komentar.

Terima kasih. ^_^





ATAU

Baca Selanjutnya Baca Sebelumnya
Komentar Netizen
Tulis Komentarmu
comment url