Blockquote, Mostly Bloggers use to impress the reader of blog and by the use of blockquote you can distinguish the special message in your blogs. I am Providing you some Amazing Blockquote style by this you can create yourself Blockquote and Customize your blog. Now the simple Blogspot blogger could also be compete  with others Platforms bloggers as Wordpress, Joomla etc. by the using of blockquote.


 How to Use BlockQuote New Style in Your blogs:




When creating a post with a blockquote, the quoted text will be indented on the right and left to set it off from other text. However, if you would like to add more style to your quotes, you can use the Edit HTML tab to make changes to edit the blockquote using inline CSS. For example, after inserting a blockquote in the Rich Text Editor, you can click on the Edit HTML tab and look for text like above image.
after adding your css style your code will look like this:
<blockquote style="border: 2px solid #666; padding: 8px; background-color: #ccc;">Type Your Text Here. </blockquote>
This will display your blockquote with a 2 pixel wide dark-grey border, 8 pixels of padding inside the border, and a lighter grey background.
Type Your Text Here.
Pro subscribers have access to the feature, which allows you to easily make stylesheet changes for your entire weblog. This will allow you to edit the display of your blockquotes without editing the HTML of the post each time you include a quote. For the same results as above, you would add the following in Template > Customization > Add CSS:
blockquote { border: 2px solid #666; padding: 10px; background-color: #ccc; }










If your blog is using Advanced Templates, you would add the above code to the Stylesheet template.
Style 1:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus fringilla leo, sed malesuada tortor pharetra quis. Mauris pharetra interdum ante a tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu metus vel libero imperdiet mollis quis sit amet diam. Duis bibendum sapien sem. Mauris dui metus, lobortis id blandit a, euismod eu arcu. Nulla condimentum ultricies justo non porta. Nunc dolor ipsum, ultricies et pharetra ac, interdum non dolor. Nulla lectus tellus, porttitor a vestibulum sed, vestibulum sit amet massa.
HTML Code:

<blockquote style=" margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; ">This is some quoted text.<
Css Code:
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
Style 2:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus fringilla leo, sed malesuada tortor pharetra quis. Mauris pharetra interdum ante a tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu metus vel libero imperdiet mollis quis sit amet diam. Duis bibendum sapien sem. Mauris dui metus, lobortis id blandit a, euismod eu arcu. Nulla condimentum ultricies justo non porta. Nunc dolor ipsum, ultricies et pharetra ac, interdum non dolor. Nulla lectus tellus, porttitor a vestibulum sed, vestibulum sit amet massa. Ut eleifend, magna nec bibendum vulputate, leo ipsum bibendum elit, non bibendum justo tortor eget ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ultrices enim felis, sit amet elementum neque. Integer ac sem at nunc dapibus pellentesque. In ante libero, vulputate at placerat a, blandit in sem. Donec euismod dictum felis, id rhoncus lectus molestie non. Sed semper varius tortor ut feugiat.
HTML Code:
<blockquote style="border-left: 2px solid #999; color: #999999; margin: 1em 3em; padding-left: 1em;">This is some quoted text.</blockquote>
CSS Code:
blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }
Style 3:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus fringilla leo, sed malesuada tortor pharetra quis. Mauris pharetra interdum ante a tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu metus vel libero imperdiet mollis quis sit amet diam. Duis bibendum sapien sem. Mauris dui metus, lobortis id blandit a, euismod eu arcu. Nulla condimentum ultricies justo non porta. Nunc dolor ipsum, ultricies et pharetra ac, interdum non dolor. Nulla lectus tellus, porttitor a vestibulum sed, vestibulum sit amet massa. Ut eleifend, magna nec bibendum vulputate, leo ipsum bibendum elit, non bibendum justo tortor eget ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ultrices enim felis, sit amet elementum neque. Integer ac sem at nunc dapibus pellentesque. In ante libero, vulputate at placerat a, blandit in sem. Donec euismod dictum felis, id rhoncus lectus molestie non. Sed semper varius tortor ut feugiat.
CSS Code:

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }
Style 4:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus fringilla leo, sed malesuada tortor pharetra quis. Mauris pharetra interdum ante a tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu metus vel libero imperdiet mollis quis sit amet diam. Duis bibendum sapien sem. Mauris dui metus, lobortis id blandit a, euismod eu arcu. Nulla condimentum ultricies justo non porta. Nunc dolor ipsum, ultricies et pharetra ac, interdum non dolor. Nulla lectus tellus, porttitor a vestibulum sed, vestibulum sit amet massa. Ut eleifend, magna nec bibendum vulputate, leo ipsum bibendum elit, non bibendum justo tortor eget ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ultrices enim felis, sit amet elementum neque. Integer ac sem at nunc dapibus pellentesque. In ante libero, vulputate at placerat a, blandit in sem. Donec euismod dictum felis, id rhoncus lectus molestie non. Sed semper varius tortor ut feugiat.
CSS Code:
blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
Style 5:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus fringilla leo, sed malesuada tortor pharetra quis. Mauris pharetra interdum ante a tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu metus vel libero imperdiet mollis quis sit amet diam. Duis bibendum sapien sem. Mauris dui metus, lobortis id blandit a, euismod eu arcu. Nulla condimentum ultricies justo non porta. Nunc dolor ipsum, ultricies et pharetra ac, interdum non dolor. Nulla lectus tellus, porttitor a vestibulum sed, vestibulum sit amet massa. Ut eleifend, magna nec bibendum vulputate, leo ipsum bibendum elit, non bibendum justo tortor eget ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ultrices enim felis, sit amet elementum neque. Integer ac sem at nunc dapibus pellentesque. In ante libero, vulputate at placerat a, blandit in sem. Donec euismod dictum felis, id rhoncus lectus molestie non. Sed semper varius tortor ut feugiat.
Css Code:
blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }
 Style 6:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus fringilla leo, sed malesuada tortor pharetra quis. Mauris pharetra interdum ante a tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu metus vel libero imperdiet mollis quis sit amet diam. Duis bibendum sapien sem. Mauris dui metus, lobortis id blandit a, euismod eu arcu. Nulla condimentum ultricies justo non porta. Nunc dolor ipsum, ultricies et pharetra ac, interdum non dolor. Nulla lectus tellus, porttitor a vestibulum sed, vestibulum sit amet massa. Ut eleifend, magna nec bibendum vulputate, leo ipsum bibendum elit, non bibendum justo tortor eget ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ultrices enim felis, sit amet elementum neque. Integer ac sem at nunc dapibus pellentesque. In ante libero, vulputate at placerat a, blandit in sem. Donec euismod dictum felis, id rhoncus lectus molestie non. Sed semper varius tortor ut feugiat.
CSS Code:
blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQhA8DJQdTnDxyFW9MmEspn5XVSJu8aWMshUFa-vJGAdHJTTDw-SH6MHhSG8NFssnflnnw0iZUgBpMy43wWROPTnl8Of59lZ_HI3VP2sLXRCZKuCdjnV_AjXIEtWBzhq6e_qDTyjrZSe0/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }
Style 7:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus fringilla leo, sed malesuada tortor pharetra quis. Mauris pharetra interdum ante a tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu metus vel libero imperdiet mollis quis sit amet diam. Duis bibendum sapien sem. Mauris dui metus, lobortis id blandit a, euismod eu arcu. Nulla condimentum ultricies justo non porta. Nunc dolor ipsum, ultricies et pharetra ac, interdum non dolor. Nulla lectus tellus, porttitor a vestibulum sed, vestibulum sit amet massa. Ut eleifend, magna nec bibendum vulputate, leo ipsum bibendum elit, non bibendum justo tortor eget ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer ultrices enim felis, sit amet elementum neque. Integer ac sem at nunc dapibus pellentesque. In ante libero, vulputate at placerat a, blandit in sem. Donec euismod dictum felis, id rhoncus lectus molestie non. Sed semper varius tortor ut feugiat.
CSS Code:
.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ4Mmijk0yVYLKdGdLopDHm09jpVVILS-E-0n62AkVOMSi1O3y9Vm3DiMro2c_RTn3Bm08VRm4FhjPt3bEs9rQhmVecwexvrg7xqC4_66jwRT5Qo5IBbUNvAY30e5mhfDPD8rX5qII3wI/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }

Home Blockquote Style Tips Blog