Membuat Design Color Box atau Box Warna Responsive di Blogger

Cara Membuat dan Cara Memasang Material atau Kode Color Box Pada Blog ~ Sebenarnya tutorial ini saya cari dari beberapa bulan yang lalu, dan saya akhirnya nemu juga, tutorial yang saya dapat ada di postingan atau artikel yang di tulis oleh Admin Dunia Blanter. Dunia Blanter adalah blog inspirasi saya, kenapa demikian? karna blog tersebut membagikan atau mempublikasikan tentang tutorial maupun tips blogger, jadi blog tersebut bagus untuk saya blogger pemula.

Kenapa di setiap blog memasang widget-widget atau script-script yang menarik? dikarenakan ada beberapa pengunjung yang hanya melihat penampilan blognya saja dan ada juga hanya melihat artikel atau postingan berkualitas. Di postingan ini, saya akan membagikan lima atau enam color box yang bisa Anda pakai, langsung saja ke tutorialnya.

Memasang Material Color Box di Blogger

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu terapkan kode dibawah ini di atas kode ]]></b:skin>

/* 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.biru{background:#03a9f4}

.colorbox.ijo{background:#4CAF50}

.colorbox.merah{background:#F44336}

.colorbox.oren{background:#ff9800}

.colorbox.purple{background:#673ab7}

Lalu Save Template.

Selanjutnya adalah pemanggilan kode-kode yang akan Anda gunakan, caranya adalah kamu buat post lalu Anda buka mode HTML dan Anda masukkan salah satu box warna yang Anda mau pakai.

Ini adalah color box bewarna oren

<div class="colorbox oren">

Ini adalah color box bewarna oren

</div>

Ini adalah color box bewarna biru

<div class="colorbox biru">

Ini adalah color box bewarna oren

</div>

Ini adalah color box bewarna ijo

<div class="colorbox ijo">

Ini adalah color box bewarna ijo

</div>

Ini adalah color box bewarna merah

<div class="colorbox merah">

Ini adalah color box bewarna merah

</div>

Ini adalah color box bewarna purple

<div class="colorbox purple">

Ini adalah color box bewarna purple

</div>

Jika Anda sudah menerapkannya di mode HTML, jangan lupa untuk Pratinjau terlebih dahulu untuk berjaga-jaga kalau nanti kode tersebut tidak berjalan dengan baik, kalau saya si bisa-bisa aja dan tidak error sedikitpun.

Demikian tutorial yang bisa saya posting hari ini semoga bermanfaat, bila terjadi error sebaiknya Anda berkomentar dibawah, dan secepatnya saya tanggapi. Jangan lupa Like dan Share postingan ini agar berkembangnya blog ini, terimakasih.