Cara Membuat Material Design Color Box - Banyak orang berusaha untuk menciptakan blognya menarik dan berusaha menciptakan pengunjung merasa nyaman ketika membaca artikel di blog tersebut, salah satu perjuangan yang biasa dilakukan yaitu dengan memperindah tampilan blognya dari segi desain maupun struktur artikel yang ditulis.
Nah kali ini saya akan memperlihatkan tutorial yang akan menciptakan artikel di blog teman menjadi lebih berwarna, dengan 5 pilihan warna yang akan menciptakan quotes, note dan warta pada artikel blog teman menjadi lebih berwarna.
Kenapa harus memakai Color Box?
Salah satu alasan kenapa blog dengan artikel yang panjang harus memakai color box yaitu untuk menciptakan pembaca tidak bosan dengan goresan pena dari atas hingga bawah tanpa ada notes atau warta rangkuman yang bermanfaat. Dengan adanya Color Box pada artikel akan menciptakan pengunjung merasa tidak bosan ketika membaca.
Tertarik untuk membuatnya? silahkan ikuti tutorial di bawah ini
Buka Blogger > Template > Edit HTML
Letakan CSS dibawah ini sempurna di atas instruksi
]]></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}Simpan Template.
Selanjutnya untuk meletakan HTML Color Box masuk ke editor postingan kemudian pilih mode HTML dan masukan salah satu instruksi box warna yang teman pilih.
Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir.
<div class="colorbox purple"> Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir. </div> Untuk mencapai suatu tujuan, kadang kita harus menempuh jalan memutar. Kegagalan yaitu salah satu di antaranya.
<div class="colorbox blue"> Untuk mencapai suatu tujuan, kadang kita harus menempuh jalan memutar. Kegagalan yaitu salah satu di antaranya. </div> Satu orang yang mencoba kemudian gagal, lebih baik daripada seribu orang yang tak pernah mencoba.
<div class="colorbox green"> Satu orang yang mencoba kemudian gagal, lebih baik daripada seribu orang yang tak pernah mencoba. </div> Jangan selalu mengikuti arus, jadilah diri sendiri.
<div class="colorbox red"> Jangan selalu mengikuti arus, jadilah diri sendiri. </div> Kegagalan yaitu bab dari usaha, bukan hasil yang menciptakan kita mengalah begitu saja.
<div class="colorbox orange"> Kegagalan yaitu bab dari usaha, bukan hasil yang menciptakan kita mengalah begitu saja. </div>Simpan.
Quotes Source : Book #BERANIGAGAL, #BERANIBEDA
Baca Juga : Cara Membuat Tweet Box di Postingan Blogger
Semoga tutorial dan quotes komplemen ini bermanfaat, Terima kasih.
