Cara Membuat Box/Kotak Script Di Blog

Pasti sobat pernah bingung gimana ya cara membuat box/kotak script di dalam postingan?.Banyak manfaatnya dalam membuat kotak/box script, salah satunya yaitu membuat tampilan blog atau postingan lebih menarik dan enak di pandang. Oke dah langsung saja gue kasih tau caranya. Simak ya baik baik caranya di bawah ini.

1. Login di Blogger

2. Klik segitiga di samping Daftar Entri, lalu klik Pos

3. Lalu Klik Entri Baru

4. Di situ ada dua piliha "Compose" dan "HTML"

5. Klik HTML

6. Copy Script Di Bawah ini lalu 

<div style="background-color: white; border: 4px #000000 Double; padding: 10px; text-align: left;">
Magezine123.blogspot.com</div>
<br />

7. Letakkan di bawah tulisan cara membuat box/kotak script di blog, lihat caranya seperti gambar di bawah ini

8. Lalu klik Compose lagi dan Lihat Hasilnya

Keterangan :

• Border: 4px = ketebalan kotak script. dan #1780dd = warna kotak script.
• Double : bentuk kotak. (kode ini bisa diganti dengan kode berikut atau juga bisa dihilangkan).
• Padding:10px = panjang kotak ke bawah, untuk lebarnya otomatis sampai ke ujung posting.
• background-color:ffffff; = warna dalam kotak.
• Dan text-align:left; = posisi tulisan didalam kotak di kiri

Nih sobat saya sediakan versi lain dari Kotak/Box, sobat tinggal copas aja script di bawah ini  dan caranya seperti di atas.

<div style="background-color: white; border: 4px #00FFFF Double; padding: 10px; text-align: left;">
Magezine123.blogspot.com</div>
<br />

<div style="background-color: white; border: 4px #DC143C Double; padding: 10px; text-align: left;">
Magezine123.blogspot.com</div>
<br />

<div style="background-color: white; border: 4px #7FFF00 Double; padding: 10px; text-align: left;">
Magezine123.blogspot.com</div>
<br />

<div style="background-color: cyan; border: 4px #00FFFF Double; padding: 10px; text-align: left;">
Magezine123.blogspot.com</div>

<div style="background-color: gainsboro; border: 4px #DCDCDC Double; padding: 10px; text-align: left;">
Magezine123.blogspot.com</div>
<br />

Semoga bermanfaat .

Share :

Facebook Twitter Google+