Blockquote is a quotation in a particular post or article (where it is used) that stands out from the main text as a article paragraph, or block of text. Blockquote is used by bloggers or writers to give out a particular sentence which they wants readers to read or copy (especially code). In Blogger or WordPress or any other blogging platforms, writers whose niche is related to “How To” do use this code.
In Blogger, the old themes are set to default to display Blockquote in a good style and default text and font. In the new blogger themes, Blockquote is not well edited which is not suitable for mobile viewers. This in the sense that, it displays x-large text, italic font, and centred in the middle. This was an issue I faced for good 1 week after installing emporio blogger new theme because it Blockquote is annoying which makes mobile post page too long
Finally, I found the correction to the issue of blockquote in blogger new themes which I am here to share with my fellow bloggers who have not tweaked their blockquote. You can edit your Blockquote using it css widget via your html template/theme.
How To Get Started
Log in into your blogger dashboard
In the left menu, click “Theme” >> “Edit HTML”
Let the html code area load completely, then tap anywhere inside the code and click CTRL+F to open search box. (For Mac PC, use Cmd+F)
If I tell you to search blockquote you might find it not one or twice neither thrice. Therefore search this one and only code.
color: $(blockquote.color);
Among above code you will see below code.
blockquote {
color: $(blockquote.color);
font: $(blockquote.font);
font-size: x-large;
font-style: italic;
font-weight: 300;
text-align: centre;
Change x-large to small Change italic to normal Change centre to left
Finally the css code will be
blockquote {
color: $(blockquote.color);
font: $(blockquote.font);
font-size: small;
font-style: normal;
font-weight: 300;
text-align: left;
Successfully, you have adjusted your Blockquote size and position. Now you have to design your blockquote.
Still in the html code area, search :
]]></b:skin>
Above it, copy and paste the following css code
blockquote {background: #f5f5f5;font: 13px/20px;color: #444;border-left: 4px solid #fa5b0f;padding: 15px;font-family: Geneva, Tahoma, Verdana, sans-serif;} /code]
Save your theme and preview your blog post where you have used blockquote.
Is this not cute???
I hope this helps…
Cheers!
Recommended :
==> How To Hide Blur Images On Post Pages of Emporio Blogger Theme
==> How To Adjust Width of Sidebar and Post Stream on Emporio Blogger Theme