2 Pop Blockquote/Syntax Highlighter for Blogger blog

You maybe already familiar with Blockquotes, in post we often use this option for highlighting text, quote, poem, codes (syntax highlighting) etc. If you are using Blogger’s default themes than you already knew how ridicules default Blockquote looks like. So removing this boringness of this simple quoting option I developed and published a cool CSS3 blockquote few days ago. And here I developed more two, their design inspiration comes from very popular blogsites around web, and these two designs are very fashionable and trendy for any Blogger blogs. Created with CSS, HTML and CSS3, no JavaScript and image used that’s why they are fast loading and do not create any extra request on HTTP requests. They have adaptive design, retina ready and responsive. Let’s see how they look like, how to install ‘em in your Blogger blogs.

2 Popular Blockquote/Syntax Highlighter for Blogger blog

Number 1: Cool minimalistic design, On mouse hover left side of quote change color (Green to Red)
 
Preview:

Live demo: Click Here

Codes for copy:

/*crawlist.net bq starts*/
.post-body blockquote {
        background-color: #151515; 
        color: #fff;
        width:80%;
        padding: 10px 15px 10px;
        border-left:5px solid #0C0;
        font-size:15px;
        font-family:Courier;
        line-height:1.5;
        margin:auto;
        -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.50);
        -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.50);
          box-shadow: 0px 0px 5px rgba(0,0,0,.50);
        }
.post-body blockquote:hover {
        border-left:5px solid #F33;
        }
/*crawlist.net bq ends*/

Number 2: Super smart designed with curved border, retina ready designed.

Preview:

Live demo: Click Here

Codes for copy:

/*crawlist.net bq starts*/
.post-body blockquote {
        background-color:#333; 
        color: #fff;
        width:80%;
        padding: 10px 15px 10px;
        font-size:15px;
        font-family:Courier;
        line-height:1.5;
        margin:auto;
        -moz-border-radius:10px;
        -webkit-border-radius:10px;
        -o-border-radius:10px;
        border-radius:10px;}
/*crawlist.net bq ends*/

How to install in Blogger-
All you need to do is embedding these given code into your template, Read on-

• First log into your Blogger, Select your Blog,

• Go to ‘Template’ tab, Select ‘Edit HTML’

• Find (Using Ctrl+F or Cmd+F) in to code snippet

.post-body blockquote

• If you found .post-body blockquote delete .post-body blockquote’s all default CSS code (within {bracket to bracket all code}) and replace your desired code into .post-body blockquote’s bracket

• Unfortunately, if your template doesn’t already have .post-body blockquote than search for ]]><

• Above ]]>< copy paste this line with desired codes;

.post-body blockquote {your desired blockquote’s code}

• Than 'Save Template'. And write a post using Blockquote, and check out blockquote in live action.

Compatibility
These custom CSS3 Blockquotes is compatible with all web browsers latest version (except-IE)

So what you think about these blockquote design, how it working on your blog don’t forget to mention. New tricks and widgets will be release soon stay tuned. Goodluck.....