28 August 2016

Cara Membuat Material Design Color Box di Blogger

Cara Membuat Material Design Color Box di Blogger

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.
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic