Cara Membuat Material Design Color Box di Blogger
28 August 2016
Cara Membuat Material Design Color Box - Banyak orang berusaha untuk membuat blognya menarik dan berusaha membuat pengunjung merasa nyaman saat membaca artikel di blog tersebut, salah satu usaha yang biasa dilakukan yaitu dengan memperindah tampilan blognya dari segi desain maupun struktur artikel yang ditulis.
Nah kali ini saya akan memberikan tutorial yang akan membuat artikel di blog sobat menjadi lebih berwarna, dengan 5 pilihan warna yang akan membuat quotes, note dan info pada artikel blog sobat menjadi lebih berwarna.
Kenapa harus menggunakan Color Box?
Salah satu alasan kenapa blog dengan artikel yang panjang harus menggunakan color box yaitu untuk membuat pembaca tidak bosan dengan tulisan dari atas sampai bawah tanpa ada notes atau info rangkuman yang bermanfaat. Dengan adanya Color Box pada artikel akan membuat pengunjung merasa tidak bosan saat membaca.
Tertarik untuk membuatnya? silahkan ikuti tutorial di bawah ini
Buka Blogger > Template > Edit HTML
Letakan 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}Simpan Template.
Selanjutnya untuk meletakan HTML Color Box masuk ke editor postingan lalu pilih mode HTML dan masukan salah satu kode box warna yang sobat 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 adalah salah satu di antaranya.
<div class="colorbox blue">
Untuk mencapai suatu tujuan, kadang kita harus menempuh jalan memutar. Kegagalan adalah salah satu di antaranya.
</div>
Satu orang yang mencoba lalu gagal, lebih baik daripada seribu orang yang tak pernah mencoba.
<div class="colorbox green">
Satu orang yang mencoba lalu 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 adalah bagian dari usaha, bukan hasil yang membuat kita menyerah begitu saja.
<div class="colorbox orange">
Kegagalan adalah bagian dari usaha, bukan hasil yang membuat kita menyerah begitu saja.
</div>Simpan.
Quotes Source : Book #BERANIGAGAL, #BERANIBEDA
Baca Juga : Cara Membuat Tweet Box di Postingan Blogger
Semoga tutorial dan quotes tambahan ini bermanfaat, Terima kasih.