Cara Membuat Material Box Warna-Warni Keren di Blog

Posted by Admin

Seiring dengan banyaknya para blogger pemula mungkin ada yang berfikir bagaimana Cara Membuat Material Box Catatan Warna-Warni Keren di Blog. 

Salah satu yang kita lakukan adalah memodifikasi sebuah tamplate kita supaya dapat memperindah tampilan baik dari segi disain maupun struktur artikel yang ditulis. Memodifikasi tamplate blog menjadi keharusan untuk kepada para blogger.

karna, dapat membuat blog kita akan terlihat menarik dan pengunjung juga akan merasa nyaman dalam membaca sebuah artikel diblog kita.

DEMO

Baca Juga: Cara Membuat Gambar Utama Postingan Dengan Info dan Share Post di Blog 

Dengan adanya Color Box di artikel sobat supaya pengunjung tidak bosan saat membacanya. 

Nah, untuk itu disini saya akan memberikan tutorial nya supaya artikel sobat akan terlihat berwarna dan menarik.

Bagaimana Tertarik untuk membuat nya? Silahkan simak tutorial nya di bawah ini.

1. Buka Blogger > Tamplate > Edit HTML
2. Letakkan kode CSS dibawah ini tepat di atas kode ]]></b:skin> atau </style>.

/* 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} 

3. Simpan Tamplate.

4. Langkah selanjutnya untuk meletakkan HTML Color Box, masuk ke editor postingan lalu pilih mode HTML dan kemudian masukan salah satu kode Box Warna yang dipilih.

Tetap Semangat Dalam Menjalani Hidup

<div class="colorbox purple">
Tetap Semangat Dalam Menjalani Hidup</div>

<div class="colorbox blue">
Tetap Semangat Dalam Menjalani Hidup</div>

<div class="colorbox green">
Tetap Semangat Dalam Menjalani Hidup</div>

<div class="colorbox red">
Tetap Semangat Dalam Menjalani Hidup</div>

<div class="colorbox green">
Tetap Semangat Dalam Menjalani Hidup</div>

<div class="colorbox orange ">
Tetap Semangat Dalam Menjalani Hidup</div>

Catatan: Silahkan ganti kode warna disamping colorbox sesuai keinginan anda. 

Baca Juga: Tutorial Membuat Tombol Download Keren di Blog "Flat UI & Icon Awesome"

5. Klik Simpan > Pratinjau ( untuk melihat hasilnya ).
Semoga bermanfaat.

Blogger

Share This :