Membuat Tulisan dalam Kotak di Blogger
MEMBUAT TULISAN DALAM KOTAK/BINGKAI
Halo, Bloggers!
Pada postingan ini saya ingin membagikan beberapa kode HTML untuk membuat sebuah teks di dalam kotak bingkai supaya tampilan blog kamu terlihat lebih menawan. :)
Kamu bisa menggunakan kode-kode berikut di dalam postingan atau di halaman blog kamu.
CARA PEMASANGAN
A. Memasang di Halaman Blog
- Masuk ke Blogger
- Pilih layout/tata letak
- Pilih posisi di mana kamu mau meletakkan kode
- Klik "Tambhakan Gadget"
- Pilih "HTML/JavaScript"
- Paste kode yang saya bagikan di bawah dan modifikasi sesuai keinginan.
- Save.
B. Memasang Kode di Dalam Postingan
- Masuk ke postingan baru/postingan lama yang ingin kamu tambahkan kode
- Ganti mode menulis ke mode tampilan html
- Paste kode yang saya bagikan di bawah dan modifikasi sesuai keinginan
- Save
KUMPULAN KODE KOTAK BINGKAI
1. Kotak Border Berwarna Hijau
<div style="border: 3px #04B45F Double; padding: 10px;background-color:#FFFFFF; text-align: left;">isi tulisan kamu di sini</div>
2. 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</p>
3. 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>
4. 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</p>
5. 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</p>
6. 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</p>
6. 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</div>
7. Kotak background Kuning Putus Pendek
<div style="border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;">isi tulisan</div>
8. 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</div>
9. Kotak Border Teks Disembunyikan (Scroll)
<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>
< /div></span>
TERIMA KASIH SUDAH BERKUNJUNG
> SELAMAT MENCOBA <
Mas Azer
Blogger Pelukis kata ...
