How to Make Blockquote Styles In Blogger

Upon  my first experienced in this world of blogging tutorials, I was wondering  on how to display my blockquote codes in a manner that my readers can distinguish them from my ordinary texts. So I was keep on researching on the web, experimenting the effects of CSS until I came - up with a beautiful one. Since I do't want to monopolize this gift from God, I am dare to share it with you on how to make it. I would humbly say that because of Muhammad Mustafa I was able to learn this tweak but of course with additional spices to make it more fitted to your blog. I would present this one a quite different to be learnt easily by the  newbie  bloggers.  So, let us now go with the tutorial!

How to Make Blockquote Styles In Blogger

Step 1. Log - in to your Blogger Dashboard
Step 2. Hit the Template button (have a back-up of your template as your reference)
Step 3. Click The Edit HTML button
Step 4. Find or search the code/tag below

.post blockquote 

In most cases the code will look like this:

.post-body blockquote {some codes here}
OR
.post blockquote{ some codes here}

But if you did't find the above code or tag above, It is fine.
Step 5. Now search for code below

]]></b:skin>

And just above ]]></b:skin> , you choose among the blockquote styles codes  below that would most fit to your blog.

---

Copyrighted Blockquote with Gradient Yellow Image at the Left Side and Small Solid Borders

---

Live Demo

.post blockquote {
font: 14px normal verdana, sans-serif;
padding-left: 38px ;
margin:0 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWXh0DBFJKOsBPJp9QJ8q6i3QYKkwA4G28yqQAA0IniFZ3M_T4R0hgpz_cuR984oI_z4jDSk_NasSldnN4VDnsnsxmMk6Hrk2G_R36us0o_2W1xOFVXkRKE12-6DkCbCUJR5jlc5zvpID/s1600/blocquote+yellow.png);
background-position:;
background-repeat:repeat-y;
text-indent: 65px;
border-top: 3px solid #61380B;
border-right: 3px solid #f4fa58;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXRzbi9gKGkGMUD41EIKyIjR6wtYqqIf-EBUDdyfQyedSiEo-71KYZ0Hhr9dZa9Qr16-6cUym9XFCBejxIjHg3jrMaDDEjY5H7eKTkCUazaTf6NPLqqbeCvSQqeo8hfAzDHGb1wAf3HsU/s1600/blockquote+4.png) no-repeat bottom center;
padding-bottom:20px;
border-bottom: 10px solid #F4FA58;
margin-left: -20px
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

---

Live Demo

Blockquote Codes:

.post blockquote { 

margin : 0 20px; 

padding: 20px 20px 50px 20px; 

background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicNGo5El7GW7hyphenhyphenOqIh9ofD58ibhezJGmSpGrNqeUYXEJmRFtf9pBJxiS8M5Yak0igylWrmwKL1m5-llSuu38a23PljvrMMZi9wvdLGlBaE7w0zpnD_yVMfLB_S0SofhPPZXS7nMiut2HWS/s1600/Scanned+black+blockquote.png) no-repeat center bottom; 

font: bold .9em "verdana", Georgia; 

color : #000; 

border-top: 2px solid #000; 

border-right: 2px solid #000;

border-bottom: 2px solid #000;

border-left: 2px solid #000; 

}

.post blockquote p { 

margin: 0; 

padding-top:10px; 

}

---

Live Demo

Blockquote Codes:

blockquote {
margin : 0 20px;
padding: 20px 20px 20px 20px;
background : #fff url( ) no-repeat top;
font: normal 1em "Times New Roman", Times, serif;
color : #000000;
border-top : 7px solid #FF0000;
border-right : 7px solid #FF0000;
border-bottom : 7px solid #FF0000;
border-left : 7px solid #FF0000;
}
}
blockquote p {
margin: 0;
padding-top:5px;
}

---

Live Demo

Blockquote Codes:

.post blockquote {
margin : 0 20px;
padding: 20px 20px 50px 20px;
background : #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmQJkwF8ggmSWL1UeX2tTP76MrAPeyxVP32JLdYf0byybNY6GvBaoWxZoY7Ek8hl4BY2vfduvlVtFqYHFmGbjabv-5pmrrp1-fwp3B8IQO-gAoJNndKKYPQiATw4aNr9Z65BkOwUy5TU1w/s1600/Copyrighted+blue+blockquote.png) no-repeat center bottom;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border-top: 2px solid #158aee;
border-left: 2px solid #158aee;
border-right: 2px solid #158aee;
border-bottom: 2px solid #158aee;
}
.post blockquote p {
margin: 0;
padding-top:10px;
}

---

Live Demo

Blockquote Codes:

blockquote {
margin : 0 20px;
padding: 20px 60px 80px 20px;
background :url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMVQuGH7nd1nqV2YsI1cyzYnC3ZlWFHWsPS4K_UQyFxR5d_alhi-NFeEA4G0zuGdd7AdcJh1Sgk8RGGpw0p-tmBDzgx4n8cejH7lvelPXFXN11ntOgYHNi6oVO2xPYc-QW4h41O_ob1M25/s120/blockqute+3.png) no-repeat bottom right;
font: bold italic 1em  Georgia, verdana, Helvetica,  "Times New Roman", Times, serif;
color : #000;
border-top: 3px ridge #000;
border-left: 3px ridge #000;
}
blockquote p {
margin: 0;
padding-top:1px;
}

---

Live Demo Blockquote Codes:

.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EHz6_N1_124-4gkF1lzR49ApmM8c5JP4pdrkfVRflX_rDBpKXhmYYZdmTFOMs4_tfFge1OAUQa-71kAw3zi7lOnjmr6-7msZbfsCvaDM1ySb-vPlD90qgLw0m-I08qws270_dP1BwdSa/s1600/blockquote.png) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1em Vivaldi, serif;
border-top : 3px ridge #FF8000;
border-right : 3px ridge #FF8000;
border-bottom : 3px ridge #FF8000;
border-left : 3px ridge #FF8000;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}

Customization (Optional):
The above blockquote codes were bolded in the manner to make you easily customize  according to your preferences.

• Margin  :- ) This refers to the position of your whole blockquote.
• Padding  :- It changes the distance of your texts from the borders of your blockquote. 
• Background >> This includes blockquote background color in six digit value and the image URL that is being used . You can replace the hexadecimal color and the image URl respectively.
• Font >: This includes the font style, size, and type respectively.
• Color >> This is the color of your texts of your blockquote, you can use our  free color code generator to choose a wide variety of colors.
• Border >.. In the above codes, I arranged the border styles from top, right, bottom, and left. Along with each are the border size, style and color. You can also use  this link to choose different border styles.

Step 6. After you made some customization of you blockquote codes, you may now save your template.

Whenever you have  some quotes or codes to share with your readers just follow the  steps below:
1. Go to post or create new post
2. Switch it in the compose mode and type your quotes.
3. After typing your quote in the compose mode, switch it to HTML mode.
4. Then  add these tags "<blockquote>.......</blockquote>" . It may look like this:

<blockquote>
Your quotes here
</blockquote>

Now if you want to apply different blockquote styles in your blog, simply copy the blockquote codes above and paste it to you Blogger Post Editor page (it should be in the HTML Mode). For example you want to apply the Blockquote With Ridge Border Style. The  setting will be  this one:

<style>
.post blockquote {
background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3EHz6_N1_124-4gkF1lzR49ApmM8c5JP4pdrkfVRflX_rDBpKXhmYYZdmTFOMs4_tfFge1OAUQa-71kAw3zi7lOnjmr6-7msZbfsCvaDM1ySb-vPlD90qgLw0m-I08qws270_dP1BwdSa/s1600/blockquote.png) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 10px 45px;
font-size: 0.9em;
font: italic 1em Vivaldi, serif;
border-right : 3px ridge #FF8000;
border-bottom : 3px ridge #FF8000;
border-top : 3px ridge #FF8000;
border-left : 3px ridge #FF8000;
}
.post blockquote p {
margin: 0;
padding-top: 10px;
}
</style>

<blockquote>

Your quote or codes here........

</blockquote>

Note:- For Blockquotes with yellow gradient, there is a little more coding required. Read below

Guide:- For above mentioned blockquotes you need to add some extra tags inside blogger editor as explained below,
Now, whenever you have written a Quote inside the compose mode of Blogger Editor simply switch to the HTML mode and add two tags i.e <div> and </div> between the blockquote tags as demonstrated below.

<style>
.post blockquote {
font: 14px normal verdana, sans-serif;
padding-left: 38px ;
margin:0 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWXh0DBFJKOsBPJp9QJ8q6i3QYKkwA4G28yqQAA0IniFZ3M_T4R0hgpz_cuR984oI_z4jDSk_NasSldnN4VDnsnsxmMk6Hrk2G_R36us0o_2W1xOFVXkRKE12-6DkCbCUJR5jlc5zvpID/s1600/blocquote+yellow.png);
background-position:;
background-repeat:repeat-y;
text-indent: 65px;
border-top: 3px solid #61380B;
border-right: 3px solid #f4fa58;
}
.post blockquote div {
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiXRzbi9gKGkGMUD41EIKyIjR6wtYqqIf-EBUDdyfQyedSiEo-71KYZ0Hhr9dZa9Qr16-6cUym9XFCBejxIjHg3jrMaDDEjY5H7eKTkCUazaTf6NPLqqbeCvSQqeo8hfAzDHGb1wAf3HsU/s1600/blockquote+4.png) no-repeat bottom center;
padding-bottom:20px;
border-bottom: 10px solid #F4FA58;
margin-left: -20px
}
</style>
<blockquote><div>
Your Codes/Quote Here
</div>
</blockquoe>

Also check the related posts below:

• How to Add Syntax Highlighter To Your Blogger Blog
• Different Border Styles for Various Uses
• Adding Tables In Blogger Post Editor 

Hope you like this tutorial and if you have some clarifications, questions or additional informations regarding this post, I will be happy to hear your side. Please leave it at the comment box below or you can contact me.
Within this week, I will try to make a blockquote codes with a  stylistic hover effect on it.

God Bless Everybody and Take Care of your Love Ones!!!!!

About the Author:

Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More

Follow him @ Twitter |Facebook