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 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 ...
  • 7 Add-ons Needed For Bloggers to Make Blogging Easier
    Having add-on gives us extra ability and flexibility for writing a rich post. As a blogger, you may find yourself in difficult situations so...
  • How To Create a Demo Page In Blogger
    I have always thought of writing this a post on this topic for a while now. It came to my mind when I wanted to sell a template on theme...

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.