Add A CSS Notebook Style To Your Blockquotes In Blogger

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaX1PpKLNBmTcLhDt1CAgg6zQAaTykxDLv_XUHtD10InhPARr9MrgldEQ5_RhU07qnqTmokSRj6-gNYUGJuTWNbjr29ITVntdRC3EGbS-ZTWY3WbODLeF3tGFCqtQA31UImBJs5AOu77YU/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!