Membuat Blockquote Lebih Menarik Dengan CSS

Membuat Blockquote Lebih Menarik Dengan CSS - Blockquote berfungsi untuk lebih menegaskan kalimat atau paragraf kutipan kepada pembaca. Dan Blogger sudah menyediakan fitur blockquote ini pada menu editor postingan yang ditandai dengan tanda kutip.

Kita tinggal mem-block kalimat atau paragraf yang dimaksud dan kemudian tinggal klik tanda kutip pada menu editor postingan.

Namun tampilan blockquote default Blogger sangat sederhana, hanya berupa paragraf yang lebih menjorok ke dalam untuk membedakan dengan paragraf lainnya.

Namun tentunya kita bisa membuat blockquote ini menjadi lebih menarik dan berbeda dengan pengaturan pada CSS style untuk blockquote.

Dengan begitu paragraf yang kita maksud sebagai kutipan akan lebih terlihat menonjol dan lebih tegas sebagai paragraf kutipan. Dan di bawah ini tampilan blockquote yang dimodif dengan CSS.

Bagaimana? Tertarik untuk mencobanya? Silahkan gunakan kode CSS di bawah ini.

blockquote{display:block;background:#fff;padding:25px 15px 10px;margin:20px 0;position:relative;font-family:Georgia,serif;font-size:16px;line-height:1.2em;color:#666;text-align:justify;border-left:15px solid #555;border-right:2px solid #555;box-shadow:2px 2px 15px #ccc}

blockquote::before{content:"\201C";font-family:Georgia,serif;font-size:100px;font-weight:bold;color:#999;position:absolute;left:10px;top:15px;text-shadow:2px 2px 0 #ccc}

blockquote::after{content:""}

blockquote a{text-decoration:none;color:#ffa133}

blockquote a:hover{color:#333}

blockquote em{font-style:italic}

blockquote p{margin:0!important}

blockquote cite{color:#999;font-size:14px;display:block;margin-top:5px;}

blockquote cite:before{content:"\2014 \2009";}

Dan kode HTML dari blockquote di atas seperti berikut:

<blockquote>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus vel urna vel facilisis. In mi ante, pretium quis mi nec, sagittis gravida nunc. Nunc pulvinar fermentum libero sit amet molestie. Fusce vitae dui ligula. Fusce a lectus vel lectus dapibus laoreet sit amet quis felis. Aliquam sed tortor quis eros tristique ullamcorper. Nunc sapien nunc, sollicitudin id lacus feugiat, vulputate viverra dolor. Maecenas sit amet aliquet diam. Praesent nulla orci, sollicitudin ac neque nec, dapibus gravida odio. <em>Pellentesque imperdiet erat eu tortor dictum, et mollis augue volutpat.</em> <a href="http://www.kompiajaib.com/2014/11/membuat-blockquote-lebih-menarik-dengan.html" title="Membuat Blockquote Lebih Menarik Dengan CSS">Example link here</a><cite>Kompi Ajaib</cite></p></blockquote>

Namun dalam perkembangannya, blockquote tidak hanya digunakan untuk menampilkan paragraf yang ditonjolkan saja, namun juga sering digunakan untuk menampilkan kode-kode CSS, HTML, maupun Javascript di dalam postingan.