Enhancing Blockquotes in Blogger

Hi everyone I'm back with my new post on how to customize your blockquotes. This is one of the important customization for those who provide codes, Quotations in their blog post. This also enhances the look of your blog. Many bloggers prefer to start a blog on a topic which is in great demand, Many topics include things which must be illustrated more professionally. So, this is one of the main thing bloggers prefer to do first.
Many newbies don't even know what actually blockquotes are. Blockquotes are symbols like " or ' which appear on the sides of some quotes. Customization change these symbols to other designs.  So lets directly come to the point.
Also read - How to make widget sticky in blogger

Why to customize?

• Professional look
• Enhances template
• Popular designs

How to customize?

1. First of all, Log In to your blogger account.

2. Now click on the template tab and backup your template.

3. Now click on Edit Html and search for following in css section

blockquote

4. Replace whole blockquote css with the following blockquote css.

Top 10 Blockquotes

As many of you prefer professional look, I'm here with that -

.post blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid lightblue;
}

---

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 5px solid #fce27c;
background-color: #f6ebc1;
}

---

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 10px dotted white;
background-color: #f6ebc1;
}

---

.post blockquote {
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}

---

.post blockquote {
border: 2px solid rgb(255, 204, 0);
padding: 8px 10px;
font-size: 120%;
color: black;
font-weight: bold;
background-color: rgb(255, 255, 153);
border-radius:20px 20px 0 20px;
}

---

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
color : #484848;
border: 5px dotted #fff;
}

---

.post blockquote {
background-color: white; color: #845424;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwEojI91D33e8Xn3n3GAeLNkMW03ZXw_VPXF7EH8doNqUmpfJ9GEQ_I5cvTEdOIq0p2xGixIuKk9i2Mzd1Al0zPUz9MKAUFcP5ONtIkv9s7ieSySLiKd8eWGFTvF-d7p6mETkijGSxBOQ/s1600/Orange.gif);
background-position: 0% 10px;
background-repeat: no-repeat repeat;
border-width: 2px;
margin: 0px 20px;
min-height: 30px;
padding: 20px 20px 10px 45px;
vertical-align: baseline;
}

---

.post blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv858LWl-mqynm3tVjxgo9ZZIpN2Q4UAFVr4MYbZDFVY0vk1L5GzR9Q3EnnLgqAUhFVqKoeF78P750mnF-MUnNoDdr3tZUb3Uz9sv-LIVZM8D_rMpHGa3Thj80W1GWRko4PwXPVM09AFE/s1600/green-black-side.gif) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}

---

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVUBGzMtA1U96KdTjG3j5NIrgaaLC-zwVn9On86yRIownTekJOAjEiM3XqIh_3b3xynVHqwctseNWwLH_sXLNHSjmkdxJidZ-E7Js3QTP95uAZHF70UlVdlgI5yMOve-A0pxZtgir9fg/s1600/blockquote.png) no-repeat scroll 0px 0px transparent;
border: medium none;
margin: 5px 5px 50px;
padding: 25px 30px 5px 70px;
color: rgb(153, 153, 153);
font-style: italic;
}

---

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAk9_GHToq6EFbZpCLdVkbTdW35ROz8QSJeJ6WUr906Ks0tHQ1LwGVcYHK9Q7Tk9eOxY-42OQ3ycDL6H-7E7ItcVEsHbnYUowwUl7JTYJSOD8aoKutCmtt0HBGuOedDfLe4BjDQQmVfdI/s1600/note.png) repeat-y scroll 0 0 transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-moz-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-ms-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-o-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
margin: 10px 13px;
padding: 21px 45px 14px;
line-height: 1.65em;
font-famliy:georgia,sarif;
font-size:13px;
}

+Change the codes according to your template or requirements.

Now save the template.

How to use blockquotes?

1. Click on new post.
2. During your post, when you want to put your words/ quotes/ codes in blockquote just click on the
    icon on your option bar in post editor and type the words.
    

     3. Click on preview tab and check the awesome blockquotes.
For more newbies tutorials stay connected. Please provide us with your feedback as it will help us grow.