Earcontra

Earcontra.com is a blog for everyone who's curious about Blogging Tips, SEO, Making Money Online. We share fresh and updated information related to Bogger Templates, Layouts, Blogger Widgets, HTML & CSS Tips, jQuery Tweaks, JavaScript Scripts, and other related keywords.

  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy

Adding Costume Quote To Blogger Posts

Posted by OG Superman in: Blog Design
styling blogger quote


The design of blogs is very essential. We take a good look at the type of fonts and every other thing and discover something needs to be fixed. We do this until our template is perfect. You can feel like I need to change my quote style an you probably found yourself in this page.

Throwing one or two quotes in a post just to show off your template design is a very good strategy for trapping visitors to your website, because apart from content, visitors also check the design before they decide if they will visit again.

To have made this tutorial to help you edit your quote to your taste. Before proceeding, make sure you have backed up your template in case you mess up you just need to restore it again. To backup your template, open the blog you want to make customization on and go to; Template. By the upper right of  your screen, click on the Backup/Restore button.

Follow the steps carefully.

Step 1- Go to Template and click on the Edit HTML button


Step 2- On the new page that comes  up, click on the box and press crtl + F on your keyboard

Step 3- Search for the ]]></b:skin>  If you do not find it, search for </b:skin>  You will see something like the below screenshot. Just click on the arrow and search for ]]></b:skin>  again.



Step 4- Just before the ]]></b:skin> tag, paste the below code.


blockquote {
background: #f4f4f4;
margin: 7px 0px 15px;
padding: 20px 25px;
font-color: #333333;
font-style: italic;
font-size: 0.9375rem;
font: inherit;
text-rendering: optimizelegibility;
border:none;
}

After you have pasted the code, Save your template and check your website to see the new design.

To edit the color of the background - #f4f4f4
To edit the color of the font - #333333
To edit the size of the font - 0.9375rem



0 comments:

Post a Comment

Note: only a member of this blog may post a comment.

Newer Post Older Post Home
Earcontra

Popular Posts

  • How to Generate & Import Dummy or Demo Content on Blogger
    In the stages of blog development, we are definitely going to need posts to test run the blog. This can be an issue especially for web d...
  • How To Create Sitemap In Blogger - HTML Sitemap Page
    This sitemap alone is capable of making all your post available to google crawler as well as other search engine crawlers. Having an HTM...
  • How To Change Your Search Engine Prefernce On Microsoft Edge Browser
    Sometimes you may want to change your default search engine on Edge browser because of various reasons. Aside from the reason that I...
  • New Moon Times Newspaper Template
    LIVE PREVIEW If you are in real need of a template that looks just like a newspaper, then you are lucky. Actually, this template fits ...
  • How To Insert Facebook Page Plugin To Blogger - Original Poster
    Facebook page plugin is very handy, it can dramatically increase your traffic and let's say it also saves your traffic. Why Do Y...

ABOUT EARCONTRA

Earcontra.com is a blog for everyone who's curious about Blogging Tips. We share fresh and updated information related to Bogger Templates, Layouts, Blogger Widgets, HTML & CSS Tips, jQuery Tweaks, Javascript scripts, and other related keywords.

QUICK NAVIGATION

  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy

FEATURED CONTENT

  • Adding Related Posts Widget In Your Blog
  • Automatic Date Counter Widget
  • Setup Blogger With a Custom Domain Name
  • How to Create a Demo Page

© Copyright 2016 Earcontra · All Rights Reserved · And Our Sitemap · All Logos & Trademark Belongs To Their Respective Owners·
Template Developed By Blogging Recipes.