19 March 2019

Cara Membuat Material Box Warna-Warni Keren di Blog

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.
Cara Membuat Material Box Warna-Warni Keren di Blog

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

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.

Share This

SD IT Nurul Jannah, adalah sekolah dasar berbasis islam yang merangkum antara pendidikan formal atau umum dengan pendidikan agama secara menyeluruh, sehingga harapan kami nanti, mampu menciptakan generasi yang mandiri, cerdas, serta berahklakul karimah

0 Comments:

Berminat ingin menjadi penulis disini, silahkan kirimkan alamat email anda melalui halaman kontak kami.