New Blogger Themes : How To Resize and Adjust Blockquote Text, Change Font Style and Design in Emporio Theme


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 code

blockquote {background: #f5f5f5;font: 13px/20px;color: #444;border-left: 4px solid #fa5b0f;padding: 15px;font-family: Geneva, Tahoma, Verdana, sans-serif;}

Save your theme and preview your blog post where you have used blockquote.



I hope this helps..

Cheers! 






Subscribe To Our Newsletter
Follow Us On Twitter and Instagram

Comments