MASIGNALPHA101
6536304137350128937

Cara Memasang Kotak Warna atau Color Box Material Design di Blogger

Cara Memasang Kotak Warna atau Color Box Material Design di Blogger
12/02/2018

Baca Juga


Banyak para blogger yang berlomba lomba membuat blognya tempil menarik di mata pengunjung terutama para blogger pemula yang suka gonta ganti template, entah itu  membuat atau menambah widget - widget menarik ataupun membuat tampilan -tampilan seperti popular post dan recent post yang keren dan menarik perhatian, usaha semua itu pastinya bertujuan agar pengunjung merasa nyaman dan menjadi betah berlama - lama di blog kita. Bukan begitu ???

Dan dipertemuan kali ini saya atas nama blogger pemula yang newbie banget seputar blogger yang suka nya intip sana intip sini hehehe... daripada ngomongin orang nambahin dosa mendinig ngomongin diri sendiri hehehe... akan membagikan sebuah tutorial dari sang master yaitu "Cara memasang Kotak Warna atau Color Box Material Design di Blogger". Di tutorial kali ini dijamin blog kalian akan menjadi lebih indah dan berwarna, dan cocok juga digunakan untuk kalian yang suka membuat quotes, note, info dan kata - kata mutiara pada artikel blog kalian.

Penasaran seperti apakan penampakannya ??? silahkan lihat sendiri DISINI

Apakah Kalian Tertarik Untuk Membuatnya ? Simak Tutorialnya Berikut :


  • 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.

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.

Jangan lupa ganti kata - kata sesuai kata hati kalian... hehehe...
Sekian tutorial "Cara memasang Kotak Warna atau Color Box Material Design di Blogger" kali ini, semoga dapat bermanfaat bagi kalian semua.

SUMBER : https://www.idblanter.com/2016/08/cara-membuat-material-design-color-box-di-blog.html
Antonio Ferguso

Saya hanyalah seorang blogger pemula yang suka mengintai para senior blogger lewat postingan mereka, untuk mempelajari hal baru tentang dunia blogger yang masih belum saya mengerti. Jadi tidak ada salahnya mengintai untuk hal kebaikan dan kebenaran :D

Berkomentar adalah hak asasi bagi semua pengguna internet dan akan berdampak kembali kepada diri masing - masing, maka berkomentar dengan bahasa yang baik dan sopan adalah suatu hal positif dan sangat dianjurkan.