Membuat Warna Background Dan Jenis Box Pada Postingan Blog

Membuat warna background dan jenis box pada postingan blog

Sebenarnya cara ini telah banyak yang membuat tutorial, namun saya tidak ada salahnya membuat lagi artikel ini siapa tahu masih ada yang memerlukan pas kebetulan berkunjung di blog ini.

Biasanya warna latar seperti ini digunakan pada halaman-halaman tertentu yang memiliki peran tersendiri, misalnya about, disclaimer, privacy policy atau pada halaman utama, atau halaman apa saja yang memiliki keistimewaan tersendiri.

Baca juga:
- Anti copy paste untuk artikel blog
- Font awesome untuk blog
- Kode warna html untuk design blog
- Cara mendapatkan domain TLD gratis 1 tahun
- Cara buat tombol back to top satu menit
- Cara membuat entri popular keren

Dan ini juga bisa digunakan untuk membuat setiap halaman agar postingan tampak keren, rapi dan menarik. Dengan demikian akan memberikan tampilan baru pada setiap halaman sehingga pembaca tidak bosan.

Ini adalah contoh warna background pada postingan tertentu. Anda bisa menentukan warna apa saja sebagai latar postingan. Cara membuat warna latar pada halaman postingan sebenarnya sangat mudah sekali.

Caranya:

1. Buat posting baru/ entry baru

2. Klik pada menu HTML di kiri atas pada entry baru

3. Hapus semua kode script yang ada

4. Copy dan pastekan kode dibawah ini di HTML postingan tersebut

<div dir="ltr" style="text-align: left"; trbidi="on">

<div style="background-color: #66CDAA; border: 2px #2F4F4F ridge; padding: 10px;">

</div>

</div>

5. Kembali klik pada menu Compose untuk melihat bentuknya

6. Kemudian mulailah menulis artikel di area backround yang telah tersedia.

7. Klik Preview/Pratinjau, lalu publish artikel. Selesai.

Catatan:

- #66CDAA adalah warna latar/background, gantilah sesuka anda.

- #2F4F4F adalah warna garis tepi, gantilah sesuka selera.

- 2px adalah ketebalan garis tepi

Anda juga bisa membuat bermacam-macam gaya background pada area postingan.

Kode di bawah ini juga berguna untuk membuat garis tepi saja ( kotak tanpa background) sebagai fungsi untuk menulis artikel khusus yang di anggap penting. Dan lebih simpel kodenya

<div style="border: 5px solid rgb(192, 192, 192); padding: 10px; text-align: start;"> Artikel anda di sini </div>

Caranya hampir sama dengan contoh di atas;

1. Buat entry baru

2. Klik pada HTML

3. Paste kodenya

4. Kembali klik compose

5. Mulailah mengetik artikel di dalam kotak yang sudah terbentuk

6. Selesai, pratinjau dan publikasikan.

Catatan:

- 5px  : ganti ketebalan garis tepi sesuai selera.
- solid rgb(192, 192, 192) : bisa di ganti dengan solid #006400 atau warna sesuai selera.

Dan yang terakhir ini untuk membuat Jenis kotak dengan scroll ke atas dan ke samping

Ini adalah contoh kotak yang otomatis akan memiliki scoll ke atas dan ke bawah apabila artikel yang di tulis melebihi lebar dan tinggi kotak.

Karena tulisan yang ada dalam kotak tidak saya tulis memanjang maka scroll ke samping tidak ada, jika ingin menerapkan tulislah artikel panjang tanpa enter.

Silahkan copy paste kode berikut:

<div style="background-color: #f1f1f1; border-left-color: rgb(204 , 204 , 204); border-left-style: solid; border-left-width: 5px; clear: both; height: 80px; overflow: auto; padding: 0.5em 1em; word-wrap: normal;">

</div>
</div>
</div>

Catatan:
- #f1f1f1 adalah warna background ganti sesuka anda
- border-left-width: 5px : ganti lebar border kiri sesuai selera
- height: 80px : ganti ukuran tinggi kotak sesuai keinginan
- border-left-color: rgb(204 , 204 , 204) : bisa di ganti dengan kode warna seperti #333333

Contoh yang lain silahkan pilih sesuai selera:

<div style="background: #1E90FF; border-bottom: 5px double #dc143c; border-left: 5px solid #708090; border-right: 5px solid #708090; border-top: 5px double #dc143c; font-size: 12px; padding: 5px;">

</div>

<div style="background: #fff; box-shadow: 2px 2px 0 red , 3px 3px 0 #fff , 4px 5px 0 yellow , 5px 6px 0 #fff , 6px 8px 0 green , 7px 9px 0 #fff , 8px 11px 0 blue , 0px 0px 2px 2px; height: auto; padding: 10px; width: auto;">

</div>

<div style="background-color: #333366; border: 4px dotted olive; padding: 5px; width: auto;">

</div>

Atau bisa menambahkan style yang lain, yaitu membuat garis sudut kotaknya melengkung. Hanya perlu menambah kode yang berwarna merah.

<div style="background-color: #333366; border: 4px dotted olive; padding: 5px; width: auto; -webkit-border-radius: 20px 20px 20px 20px;">

</div>

<div style="-webkit-border-radius: 20px 0 0 0; background-color: #333366; border: 4px dotted olive; padding: 5px; width: auto;">

</div>

<div style="-webkit-border-radius: 0 20px 0 0; background-color: #333366; border: 4px dotted olive; padding: 5px; width: auto;">

</div>

Tinggal memindahkan saja size 20px. 
-webkit-border-radius: 0 0 0 0
0 pertama adalah  pojok kiri atas
0 kedua : pojok kanan atas
0 ketiga : pojok kanan bawah
0 keempat : pojok kiri bawah

Oke itulah beberapa jenis background dan kotak untuk tampilan pada postingan yang dibuat istimewa. Selamat mencoba dan semoga bermanfaat.

Terima kasih...