Cara Membuat Kotak/Box Warna Keren di Blog - Blog Materi Pembelajaran

Kumpulan Artikel tentang pendidikan, materi pembelajaran dan artikel menarik lainnya

Breaking

Home Top Ad

Responsive Ads Here

Monday, March 14, 2016

Cara Membuat Kotak/Box Warna Keren di Blog

Cara Membuat Box Warna Menarik di Blog - Sebelumnya saya telah mengulas membuat kolom scroll , kali  ini masih mengenai kolom namun tampilannya menjadi lebih menarik karena dengan warna. Membuat kotak warna ini bisa membuat tampilan postingan Anda semakin menarik karena Anda bisa menyesuaikan warnanya sesuai keinginan, Anda bisa menemukan banyak kode warna di generator warna.

Menariknya, untuk membuat box warna ini hanya menggunakan kode HTML, Anda tidak perlu mengedit template. Bila Sobat tertarik bisa mengikuti langkah-langkahnya dibawah ini:

Contoh :

Cara Pemasangan Kotak Warna

1. login-keakun Blogger
2. Pilih buat enteri baru
3. Silahkan Sobat Buka Entri baru kemudian salin kode dibawah ini dan terapkan pada Mode HTML

<div style="background: #3963FF; padding: 10px; text-align: left;">
<b><span style="color: white;">CSS</span></b></div>
<div style="background: #fff; border: 1px solid #3963FF; padding: 10px; text-align: left;">
<span style="color: #3963ff;"> Silahkan Sobat Masukkan teks di sini </span></div>

Keterangan :
*background: #3963FF adalah pengaturan pada warna header
*background: #fff adalah pengaturan pada warna latar
*solid #3963FF adalah pengaturan pada warna line
*color: #3963ff adalah pengaturan warna pada text

Demo :

Text
Terkadang cinta itu aneh ..ada yang mengatakan bahwa cinta itu tidak mempunyai kaki, tetapi cinta dapat berjalan dari hati ke hati, dan kini cintaku telah berjalan kehatimu.


CSS
Terkadang cinta itu aneh ..ada yang mengatakan bahwa cinta itu tidak mempunyai kaki, tetapi cinta dapat berjalan dari hati ke hati, dan kini cintaku telah berjalan kehatimu.


Jquery
Terkadang cinta itu aneh ..ada yang mengatakan bahwa cinta itu tidak mempunyai kaki, tetapi cinta dapat berjalan dari hati ke hati, dan kini cintaku telah berjalan kehatimu.

Mudah bukan,

Semoga bermanfaat!

No comments:

Post a Comment