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!
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
But if you did't find the above code or tag above, It is fine.
Step 5. Now search for code below
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
Live Demo
Live Demo
Live Demo
Live Demo
Blockquote Codes:
Live Demo
Blockquote Codes:
Customization (Optional):
The above blockquote codes were bolded in the manner to make you easily customize according to your preferences.
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:
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:
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.
Also check the related posts below:
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!!!!!
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 blockquoteIn 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
.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;
}
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;}
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;
}
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;
}
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;
}
.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>
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
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!!!!!
