Color Box Material Design Blogger

color box material design ini sangat berguna ketika blog kita memiliki artikel yang panjang, untuk membuat pengunjung tidak bosan dan tertarik.
saya pun menerapkan color box material design ini dibeberapa blog saya yang lain.

langsung saja kita ke cara dan demonya.

buka dasboard Blogger kalian lalu ke bagian template / theme, klik edit HTML.

Cari kode /b:skin lalu letakan kode dibawah ini tepat di atas kode /b:skin.

/* Material Color Box */
.colorbox{overflow:hidden;position:relative;margin:.5rem 0 1rem;transition:box-shadow .25s;border-radius:2px;color:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);padding:20px;font-size:14px}
.colorbox.blue{background:#03a9f4}
.colorbox.green{background:#4CAF50}
.colorbox.red{background:#F44336}
.colorbox.orange{background:#ff9800}
.colorbox.purple{background:#673ab7}

Simpan Template.

Untuk memunculkan color box ini kalian tinggal buat postingan lalu swift dari kompose ke HTML.
Pilih salah satu kode di bawah ini.

contoh warna ungu

<div class="colorbox purple">
contoh warna ungu
</div>

contoh warna biru

<div class="colorbox blue"> contoh warna biru
</div>

contoh warna merah

<div class="colorbox red">
contoh warna merah
</div>

contoh warna oren

<div class="colorbox orange">
contoh warna oren
</div>

sumber : idblanter.com

Share this post

loading...

loading...