Cara Membuat Design Color Box Di Blog Keren

Cara Membuat Design Color Box Di Blog Keren| Banyak cara yang dilakukan orang untuk membuat blognya menarik, rapi daris segi design maupun rapi dalam cara penulisan artikel. Nah kali ini Design Seo akan membagikan tutorial salah satu agar blog kamu jadi lebih keren yaitu dengan Memasang Design Color Box Di Blog Keren. caranya cukup sederhana kok.

Alasan Kenapa Sih Color Box Wajib Di Pasang Pada Blog

Alasanya cukup sederhana, dimana agar pengunjung blog tidak bosan membaca artikel postingan panjang dari atas sampe bawah {Kalo Polos-Polos Banget Mah Pasti Ga Like}, Tertarik membuatnya??, Langsung ajha ikutin tutorialnya di bawah ini.

Langkah Pertama

+Buka Blogger >Plih Template >Edit Html
+Letakan Code CSS Ini Tepat Sebelum Code </b:skin> atau </style>Untuk mempercepat pencarian silahkan klik tombol

Ctrl

+

F

/* 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}

+Pilih Save/Simpan Template +Selanjutnya untuk memanggil color box (memasukan ke postingan).
+Buat postingan baru pindah mode dari Compose menjadi HTML

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>

+Klik Pertinjau Untuk Melihat haslinya.
+Terakhih {Save/Publikasi}

Artikel Terkait