Membuat Blockquote Lebih Menarik Dengan CSS

Membuat Blockquote Lebih Menarik Dengan CSS

Bola Hero Gawai

Membuat Blockquote Lebih Menarik Dengan CSS

Blockquote
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.

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. Pellentesque imperdiet erat eu tortor dictum, et mollis augue volutpat. Example link hereKompi Ajaib

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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×