Kali ini saya akan membagikan 5 (lima) warna sekaligus yaitu biru, hijau, merah, oren, dan purle. Keren bukan? ya pasti keren dong, untuk penggunaannya, Anda di haruskan ke postingan, dan menerapkan kode yang sudah saya berikan di bawah.
Membuat Material Color Box Responsive di Blogger
Langkah pertama :Login ke Blogger > Tema > Edit HTML. Lalu Anda masukkan kode di bawah ini 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}
Silakan Anda Save.
Langkah kedua :
Langkah selanjutnya adalah penggunaannya, penggunaanya adalah Anda di haruskan membuat postingan dan meletakkan CSS di bawah ini pada mode HTML, dan silakan Anda pilih kode color box di bawah ini satu saja (banyak juga tidak apa-apa).
<div class="colorbox purple"> Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir. </div>Di atas adalah kode color box bewarna purple.
<div class="colorbox blue"> Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir. </div>Di atas adalah kode color box bewarna biru
<div class="colorbox red"> Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir. </div>Di atas adalah kode color box bewarna merah
<div class="colorbox orange"> Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir. </div>Di atas adalah kode color box bewarna oren
<div class="colorbox green"> Kegagalan bukanlah akhir, tapi awal bagi kita yang mau berpikir. </div>Di atas adalah kode color box bewarna hijau
Silakan Anda Simpan lalu Anda Pratinjau terlebih dahulu.
Demikian tutorial yang bisa saya berikan hari ini semoga Anda senang dengan apa yang saya share hari ini. Untuk mengetahui update an terbaru tentang design, Anda cukup Subcribe.
EmoticonEmoticon