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,400iuntuk 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,400iMaka 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.