Cara Membuat BOX dalam Postingan Blogger

e-Pusat Sumber Belajar - Cara Membuat BOX dalam Postingan Blogger

Selain Scroll Box  untuk memasukkanscript, biasanya digunakan untuk memasukan kode-kode script ke dalam posting. Agar terlihat rapi dan tidak memakan banyak tempat. Ada yang berbentuk kotak/box sederhana, dan lain-lainnya. Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya.

Caranya cukup mudah tinggal mengkopi script dibawah ini  pindah ke mode HTML  dan pastekan di dalam entri post anda. maka akan muncul kotak tersebut dipostingan anda.

Contoh: 1
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>
hasil 

.Klik Disini.

Contoh 2
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Anda Di Sini
</div>
hasil :

Kode Script Anda Di Sini

Contoh 3
<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;">Kode Script Anda Disini</div>
hasil :

Kode Script Anda Disini

Contoh 4
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

Kode Script Anda Disini

Dengan cara :
- Copy script box code dari beberapa jenis tampilan di atas
- Paste pada Menu Tab HTML Artikel Entri
-Ganti kode yang berwarna (Merah) yang bertulisan (Kode Script Anda Disini) dengan script yang anda inginkan

Kreasi dengan beberapah bagian di bawah ini :
- Mengganti ukuran sudut lengkungan : border-radius: 10px ada 3 ganti semua
- Mengganti warna background : background-color: #codewarna
- Merubah ketebalan border / garis tepi kolom : border: 4px

Silahkan dicoba, jangan lupa share biar lebih semangat dalam posting hal baru...
Semoga Bermanfaat

Baca Juga

Tweet

Sign up here with your email address to receive updates from this blog in your inbox.