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 sajian editor postingan yang ditandai dengan tanda kutip.

Kita tinggal mem-block kalimat atau paragraf yang dimaksud dan lalu tinggal klik tanda kutip pada sajian 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 dapat menciptakan 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 instruksi 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 instruksi HTML dari blockquote di atas ibarat 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 akrab eu tortor dictum, et mollis augue volutpat.</em> <a href=" " title="Membuat Blockquote Lebih Menarik Dengan CSS">Example link here</a><cite>Kompi Ajaib</cite></p></blockquote>

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

Sumber https://www.kompiajaib.com/

Share this post