Add Blockquote/Syntax highlighter in Blogger

Posted on November 26, 2014 by 
Add Blockquote/Syntax highlighter in Blogger
In post we use Blockquote for highlighting some important text, quote, poem, codes etc. Blogger’s default Blockquote is just a quote sign, it’s so simple. Again if you use custom blockquote what developed by other Blogger developers those Blockquotes basically designed with image, those looks cool but it increase Http request, page size and loading speed. So here I presenting a simple CSS3 blockquote design for you, what doesn’t make extra pressure on Http request, responsive, flat designed. It made with solid CSS3 and Google font. Let’s see how it looks like and how to add it to your blogger blog.

Add Blockquote/Syntax highlighter in Blogger


Preview-

Blockquote for Blogger


Live Demo- (Click Here)

How to add it in your Blogger-

All you need to do is embedding these given code into your template, Let’s start-

Step 1: Backup your template (Optional step)
  • Login to your blogger, select your blog, 
  • Select 'Template' option, click 'backup/restore' from upper right corner. 
  • Download full template and save it on your pc's Harddrive

Step 2: Installing blockquote (Mandatory step)
  • First log into your Blogger, Select your Blog, 
  • Go to ‘Template’ tab, Select ‘Edit HTML’
  • Search for .post-body blockquote using (Ctrl+F or Cmd+F) into code snippet
  • If you found .post-body blockquote delete .post-body blockquote’s all default CSS code and replace with these codes in to .post-body blockquote {between brackets here}

 @import url(http://fonts.googleapis.com/css?family=Lora);
position: relative; width: 80%;
  padding:30px 30px;
    margin:auto;
    line-height:30px;
    color: #6a5f49;
    border:#ccc 1px solid;
-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
     -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
          box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
          text-align:left;
font-family: 'Lora', serif;
font-size:100%;
  background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);

  • Unfortunately, If your template doesn’t already have .post-body blockquote then search for ]]></b:skin>
  • Above ]]></b:skin> paste these codes.

.post-body blockquote {@import url(http://fonts.googleapis.com/css?family=Lora); position: relative;
    width: 80%;
    padding:30px 30px;
    margin:auto;
    line-height:30px;
    color: #6a5f49;
    border:#ccc 1px solid;
-webkit-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
     -moz-box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
          box-shadow: 0px 1px 5px rgba(0,0,0,.25) inset;
          text-align:left;
font-family: 'Lora', serif;
font-size:100%;
  background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -moz-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);
  background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.1) 90%), -o-repeating-linear-gradient(top, transparent, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);}

  • Then 'Save Template'. And see your Blockquote in live action.

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

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