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...

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.