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. ^_^
