Material Design Blockquote Sederhana - Agiel Triono

Material Design Blockquote Sederhana

Baca Juga


Pada blog atau ketika kita membuat sebuah artikel blockquote digunakan sebagai element untuk mengutip sebuah paragraf dan kalimat agar menandai teks tersebut sebagai penting.

Dan sebelumnya saya juga sudah menerapkan nya di website saya sendiri berikut tampilan yang sudah jadi seperi yang terlihat di bawah ini.

Contoh sebuah kutipan yang penting !

Perlu diperhatikan saya membuat ini menggunakan google font dengan nama Open Sans itu artinya sobat perlu menambahkan font tersebut pada website untuk cara penambahan font family silahkan perhatikan metode di bawah ini.

Pada praktek nya sobat dapat menggunakan font selain Open Sans sesuai keinginan sobat.

Jika sobat sudah Terinstal font Roboto atau lain nya maka akan sepeerti ini.

//fonts.googleapis.com/css?family=Roboto:400,400i

untuk menambahkan link font pada font seperti di atas sobat tidak perlu membuat link css lagi akan tetapi cukup tambahkan | sebagai pemisah font.

//fonts.googleapis.com/css?family=Roboto:400,400i|Open+Sans:400,400i

Maka seperti itu nantinya, jika sudah maka kita lanjut ke penerapan css.

Silahkan sobat Login ke blogger jika belum,lanjut ke bagian tab Edit HTML lalu cari bagian </b:skin>.
tambahkan css pada bagian </b:skin>.

.post-body blockquote{text-align:left}
.post-body blockquote{background:#fff;color:#227fca;font-family:'Open Sans',sans-serif;font-size:15px;font-weight:normal;position:relative;margin:10px auto;padding:10px 20px;line-height:1.5em;border-left:5px solid #ea454f;border-radius:3px;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}
p,blockquote,pre,table,figure,hr,form,ol,ul,dl{margin:1.5em 0}

Dan satu lagi untuk penulisan seperti biasa.
<blockquote>...</blockquote>

Jika ada kekurangan silahkan kreasikan sendiri. Terima Kasih.

  • Untuk memasukan gambar silakan upload gambar pada komentar disqus.
  • Untuk memasukan link silahkan cantumkan link pada komentar tanpa menggunakan tag <a>.
  • 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 kutipan pendek gunakan <q>...</q>.
  • Untuk menulis kutipan panjang gunakan <blockqoute>...</blockqoute>.
  • Untuk menyembunyikan konten panjang gunakan <spoiler>...</spoiler>.
  • Untuk menulis syntax highlighter silahkan gunakan <pre><code>...</code></pre>, dan silahkan parse kode pada tab TOOLS.