Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Add A CSS Notebook Style To Your Blockquotes In Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add A CSS Notebook Style To Your Blockquotes In Blogger

Add A CSS Notebook Style To Your Blockquotes In Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

749 views

This Blogger trick and tutorial from TechGod wil show you how to add a custom style to the blockquotes on your blog posts. It’s a basically a CSS hack that will add a backgroundl to your blockquotes that looks like a  notebook page.

Like all, if not most, of our featured tutorials here, you only need to follow some of these usual steps to make this one work.

  • In your Blogger dashboard, under the “Design” page, go to “Template”.
  • Then click on “Edit HTML” and then “Proceed”.
  • Using the “Ctrl+F” search function, look for ]]</b:skin> in the template’s code
  • Copy/paste the following code before it:
blockquote  { background: url(https://lh6.googleusercontent.com/-JL3xSHJZ7W0/UAfD64wDPBI/AAAAAAAACp0/q4g6ZIdwFIw/s986/note.png) repeat-y scroll 0 0 transparent;  

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-moz-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-ms-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-o-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
margin: 10px 13px;
padding: 21px 45px 14px;
line-height: 1.65em;
font-style:italic;
font-famliy:georgia,sarif;
font-size:13px;
}

TIP: If you don’t like the italicized font, simply delete font-style:italic; from the code

Save the template and you’re done!

To try out the news style, simply enclose the text you want quoted inside a <blockquote> and </blockquote> tag while your composing your post in HTML mode in the post editor. Enjoy your new customized blockquote style!

Liked It ? Please Share

Comments

One Response | Post A Comment | Subscribe To Comments RSS Feed

  1. Avis says:

    Hello, i read your blog from time to time and i own a similar one
    and i was just wondering if you get a lot of spam remarks?
    If so how do you stop it, any plugin or anything you can recommend?
    I get so much lately it’s driving me crazy so any support is very much appreciated.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here