Make Blockquote More Attractive With CSS

Blockquote serves to further confirm the sentence or paragraph quote to the reader. And Blogger already provide this feature in the menu editor blockquote posts marked with quotation marks.

We stayed block all sentences or paragraphs in question and then click on the quotes on the menu editor posts.
Author: Adhy Suriady
However blockquote display default Blogger is very simple, just a paragraph that is indented into to distinguish with the other paragraphs.

But of course we can make this blockquote become more attractive and different from the settings in the CSS style for blockquote.
With so paragraphs we mean a citation will be more visible and more firmly stand as paragraphs quote. And below the display blockquote dimodif with CSS.

How? Interested to try? Please use the CSS code below.

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";}

And the HTML code of the blockquote above as follows:

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

But in its development, blockquote not only used to display the highlighted paragraphs, but is also often used to display the code CSS, HTML, and JavaScript in the post.