Cara membuat tulisan berada dalam kotak pada blog

Cara membuat tulisan dalam kotak pada blog

Menyematkan kotak dalam tulisan blog akan lebih terlihat bagus. Banyak pengguna blog menaruh kotak dalam postingan, biasanya salah satu tujuannya adalah menaruh informasi penting agar terlihat rapi dan mudah di perhatikan oleh pengunjung.

Namun untuk membuat kotak tersebut, tidak di sediakan menu default oleh blogger untuk membuatnya. Jadi kita harus membuat sendiri. Ikuti langkah-langkah di bawah ini.

1. Login ke akun blogger anda => tulis artikel (klik entri baru) => buat tulisan contoh seperti gambar berikut.

2. Lihat bagian kiri layar terdapat menu 'Compose' dan 'HTML' => klik HTML (guna untuk membuat kotak) => lalu copy paste script di bawah. lihat gambar di bawah

<div style="background-color: white; border: 3px #1780dd Double; padding: 10px; text-align: left;">.(GANTI TULISAN INI).</div>

Contoh gambarnya seperti berikut:

3. Setelah script di paste, kembali ke menu Compose dan lihat hasilnya => hasilnya akan sebagai berikut.

4. Ada pilihan kotak lainnya seperti gambar berikut.

5. Jika anda ingin merubah seperti gambar di atas, perhatikan script yang saya beri tanda biru di atas pada langkah 2 (Double). Ganti script tersebut dengan script di bawah dan lihat hasilnya.

.suragx (Dashed).

.suragx (Dotted).

.suragx (Groove).

.suragx (Inset).

.suragx (Outset).

.suragx (Ridge).

.suragx (Solid).


6. Jika anda ingin membuat kotak seperti gambar yang saya beri tanda merah di atas (langkah no 4). Buat script sebagai berikut. (penjelasan gambarnya ada pada langkah no 2 dengan mengganti bagian yang saya kasi tanda kotak merah dan mengganti warna backgroundnya).

<div style="background-color: #f3f3f3; padding: 10px; text-align: left;">.(GANTI TULISAN INI).</div>

Penjelasan script :

• border: 3px = ketebalan kotak script. 
• #1780dd = warna kotak script.
• Double = bentuk kotak.
• 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 

Sekian dan semoga bermanfaat. Terimakasih.