Setelah membahas tentang cara pemasangan syntax highlighter di postingan blog, kali ini saya ingin membahas tentang cara modifikasi fitur blockquote. Meski sepintas hampir sama dengan syntax highlighter, fitur blockquote ini sebenarnya berfungsi untuk kalimat kutipan, mempertegas isi tulisan/paragraf, atau untuk menggaris bawahi sebuah kalimat penting agar mudah dipahami oleh pembacanya. Dengan kata lain, ada penekanan khusus pada kalimat di fitur blockquote ini sehingga dibuat berbeda.
Salah satu ciri fitur blockquote ini biasanya kalimat dibuat menjorok ke dalam dari batas tepi kiri dan tepi kanan area postingan. Ciri lainnya yaitu penggunaan font khusus, warna latar, atau adakalanya kalimat tersebut disertai dengan tanda kutip pada awal dan akhir kalimat untuk membedakannya dengan kalimat lain di dalam postingan. Tujuannya tentu saja untuk menunjukkan bahwa kalimat tersebut benar-benar perlu dipahami karena bisa jadi merupakan kata kunci dari keseluruhan isi artikel.
blockquote {... ...
.post-body blockquote{ ... ...
blockquote{margin:0.25em 0;padding:15px 20px 15px 50px;line-height:1.45;color:#333;border-left: 12px solid #c0c0c0; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsoe9Vy7izRnJas_KG-OBl0-e9Dk9anArGZD1sdqehf9FMTQPE37At0izqdJU99Fm8fk9A39W-_74kn_fs1mU3KsHNh0WYgkgbyLLnUky0VF7oiM4UtAg555C2pdSigbQZZqBW9102iCs/s1600/bg-blockquote.gif) no-repeat 15px 18px;clear:both}
blockquote{display:block;background: #fff;margin: 0px 50px 0px 50px;padding: 30px 30px 30px 50px;position: relative;font-family: Georgia, serif;font-size: 20px;line-height: 1.2em;color: #666;text-align: justify;border-left: 15px solid #c76c0c;-moz-box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;box-shadow: 2px 2px 15px #ccc;}blockquote::before{content: “201C”; font-family: Georgia, serif;font-size: 60px;font-weight:bold;color: #999;position: absolute;left: 10px;top:5px;} blockquote::after{content: “”;} blockquote a{text-decoration: none;background: #eee;cursor: pointer;padding: 0 3px;color: #c76c0c;} blockquote a:hover{color: #666;} blockquote em{font-style: italic;}
blockquote {font-family: "Merriweather", Georgia, serif;font-style: italic;padding-left: 35px;padding: 17px 58px 20px 55px;font-size: 16px;text-align:left;font-weight: 300;color: #333;background: #F2E4A0;margin: 21px 30px;} blockquote:before {content: "\201C";margin-left: -35px;line-height: 1.33;float: left;font-weight: 700;font-style: normal;font-size: 25px;color: #111;}
blockquote{margin:0.25em 0;padding:15px 20px 15px 50px;line-height:1.45;color:#fff;border-left: 12px solid #080; background:#213040}
<style type='text/css'>/*Blockquote Catatan*/.post-body blockquote {text-align: left;background: #6591c2;position: relative;display: block;padding: 55px 20px 20px;color: #fff;margin: 10px 0;border-radius: 3px;}.post-body blockquote:before {position: absolute;content: 'Catatan';background: rgba(255,255,255,1);right: 3px;left: 3px;top: 3px;padding: 5px 20px;display: block;font-weight: 700;border-radius: 3px 3px 0 0;color: #6591c2;}</style>