Customize Change Blogger BlockQuote Style

This tutorial specially for all my blogger lover,well today we will learn how to customize blogger blog block quote with stylish css effect notepad style quote. If you don't know what is block quote, where can we use quote? etc. well the answer is, some time we use some code like HTML, CSS, JavaScript in blogger post then we put the code in Blockquote its a style.
You can use many different quote style as you like you will just need source code. Here is a  notepad style quote code, you can use it if you like. Take a look

Blogger BlockQuote Style

How to customize Blockquote in blogger blog

• Go to Blogger dashboard > Template> Edit HTML
• Search .blockquote  Or .blockquote p or any more just  Delete it.
• Now Search ]]></b:skin> 
• Copy below code and paste it ]]></b:skin> 
• Save your template.

.code2{overflow:auto;width:500px;height:auto;font-family:"Consolas","Courier New",Courier,mono,serif;margin:15px 35px 15px 15px;padding:10px 10px 10px 60px;clear:both;color:#000;list-style-type:none;background:#f5f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtWX6nSswmAY0s0BcFTeh39RTMM8DAd8gFEN6lFHzrsyKD5e4Kta5C58uDJ3yFRk6Ix-WTHC3CLpP5JQKyYjvOFLT4xo_y6voxka9QTVqYr1Wil-q28-IEAYbxXtjdFrDPBqD07UgwcjkD/s1600/notepad1.gif) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.1);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}.code2:hover{overflow:auto;width:500px;height:auto;background:#f5f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtWX6nSswmAY0s0BcFTeh39RTMM8DAd8gFEN6lFHzrsyKD5e4Kta5C58uDJ3yFRk6Ix-WTHC3CLpP5JQKyYjvOFLT4xo_y6voxka9QTVqYr1Wil-q28-IEAYbxXtjdFrDPBqD07UgwcjkD/s1600/notepad1.gif) repeat-y top left;border:1px solid #ccc;border-right:15px solid rgba(0,0,0,.1);-webkit-box-shadow:0 0 10px rgba(0,0,0,.3);-moz-box-shadow:0 0 10px rgba(0,0,0,.3);box-shadow:0 0 10px rgba(0,0,0,.3)}

• Now create a new post in HTML
• Use this tag <div class="code2"> YOUR TEXT/CODE HERE </div>
•  Publish your post and visit your blog to see the changes.

Customize

• You can change quote box width you just need to change the size width:500px as you like ,recommended set size same as your blog post body size. if your  post body size width:600px then set the quote box width size 500px its look perfect. Any kind of problem please leave a comment.