Hello sobat IcloudZer kali ini admin akan memberikan informasi seputar dunia blogging serta tips terbaru untuk anda, dan kali ini admin akan membahas bagaiamana caranya membuat color box atau kotak warna keren diblogger
Info: Okay sobat jika sudah penasaran yuk langsung aja kita bahas bersama sama
Color Box
Color Box atau bisa disebut dengan kotak warna adalah suatu tampilan yang dibentuk atau diciptakan melalui struktur kode CSS, sedangkan pada tampilan color boxnya akan memiliki tampilan standar dengan kotak dengan batas yang berwarna warni
Fungsi Color Box
Sebenarnya fungsi dari color box ini apa ya? Untuk fungsi color boxnya sendiri itu bisa dipakai ataupun digunakan untuk menampilkan text disertai color box berwarna warni untuk membuat tampilan text semakin menarik, bukan cuma text tetapi gambar, tetapi source kode untuk menampilkan video juga bisa menggunakan color box
Cara Pembuatan
Baiklah sekarang saatnya admin akan mulai membahas bagaiamana caranya membuat color box keren diblogger, perhatikan setiap penjabaran admin agar bisa mempelajari nya dengan baik
Kode CSS
Pertama Tama langkah yang bisa kamu lakukan adalah menyalin kode CSS dibawah ini kemudian letakkan di atas kode ]]></b:skin> atau sebelum kode ]]></b:skin>
.post-body .rah-box{
background-color:#e9ebee;
color:#515a5d;
padding:10px;
margin:20px 0px;
border:1px solid #dddfe2;
border-radius:5px;
}
.post-body .rah-box.green{
color:#155724;
background-color:#d4edda;
border:1px solid #c3e6cb;
}
.post-body .rah-box.blue{
color:#004085;
background-color:#cce5ff;
border:1px solid #b8daff;
}
.post-body .rah-box.red{
color:#721c24;
background-color:#f8d7da;
border:1px solid #f5c6cb;
}
.post-body .rah-box.yellow{
color:#856404;
background-color:#fff3cd;
border:1px solid #ffeeba;
}Info: Penyataan saya agar meletakkan kode CSS tepat diatas kode ]]></b:skin> atau sebelum kode ]]></b:skin> memiliki artian yang berbeda, maksudnya tidak harus tepat diatas kode ]]></b:skin> juga, terpenting jangan setelah kode ]]></b:skin> oke
Kode HTML
Kemudian setelah kamu meletakkan dan menyimpan kode CSSnya, sekarang admin akan membahas penggunaan dan cara menampilkan Color boxnya, kamu bisa menggunakan kode HTML dibawah ini kemudian gunakan didalam setiap postingan jika kamu ingin menampilkan color boxnya
<div class='rah-box red'>
<!-- Tuliskan text anda disini -->
</div>Penjelasan Penggunaan Kode
Jika kamu ingin menggunakan warna lainnya ubah class='red' dengan warna yang kamu inginkan tersedia 4 warna diantara red, yellow, green, dan juga blue Oke
Contoh Tampilan
Sebagai pelengkapnya admin akan membuatkan sebuah contoh tampilan dari color boxnya okay, berikut ini adalah contoh dari tampilan color boxnya
Beginilah tampilan dari color boxnya
Info: Bagaiamana sobat IcloudZer dengan contoh tampilan dari color box nya keren bukan 😬