Simple Numbered Blockquote For Blogger and Website

I guess you must have seen blockquotes being used in many tech websites and blogs. This is one of the features which helps a blog owner differentiate his/her normal texts from those he/she wants to lay more emphasis on. I once wrote a tutorial on Adding Customized Blockquote to Blogger Blog, but the blockquote I am going to show you guys today looks more professional and basically for tech blogs and websites where codes are normally distributed with illustrations/guide on how to make them work. One of the benefits of using this blockquote is that as a tech blog/website owner who is into sharing of codes (CSS, HTML, JavaScript, etc), you can be able to direct a user to a specific line number of the codes where you believe his/her problem/inquiry is based.

This type of blockquote follows the concept of the design of most of the popular HTML editing software like Notepad++ and Dreamweaver where each code line is placed horizontally across a specific number. Now to create and add a blockquote which will look exactly like a the Dreamweaver edit page or more so a Notepad++ edit page (i.e. a numbered blockquote), then do the following;

  • Login to your Blogger Dashboard.
  • Navigate to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML page and with the help of Ctrl + F search for
]]></b:skin>
  • Now copy the below CSS code and paste just immediately above/before the ]]></b:skin> you found earlier.
blockquote {

  background-color:#eee;

  font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;

  color:#444;

  overflow:auto;

  margin:0 0 1em;

  padding:1em;

}

blockquote,

blockquote .line-number {

  font:normal normal 12px/14px "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;

  display:block;

  white-space:pre;

}

 blockquote .line-number {

  float:left;

  margin:-1em 1em -1em -1em;

  text-align:right;

  background-color:#f1f1f1;

  color:#acacac;

  padding:1em .2em 1em .2em;

  border-right:1px solid #e0e0e0;

}

blockquote br {

display:none;

}

 blockquote .line-number span {

  display:block;

  padding:0 .7em 0 1em;

}

 blockquote .cl {

  display:block;

  clear:both;

}


  • Next find </body> tag and just above/before it, paste the below JavaScript code
<script type='text/javascript'>

//<![CDATA[

var pre = document.getElementsByTagName('blockquote'),

    pl = pre.length;

for (var i = 0; i < pl; i++) {

    pre[i].innerHTML = '<span class="line-number"></span>' + pre[i].innerHTML + '<span class="cl"></span>';

    var num = pre[i].innerHTML.split(/\n/).length;

    for (var j = 0; j < num; j++) {

        var line_num = pre[i].getElementsByTagName('span')[0];

        line_num.innerHTML += '<span>' + (j+1) + '</span>';

    }

}

//]]>

</script>


  • Finally click on Save Template and you are done.

Remember that to add a blockquote to your post, you will have to navigate to the HTML section of your post compose page and enclose the code or text you wish to blockquote in between <blockquote> and </blockquote>. That is, when adding a blockquote,

  • Click on HTML which is beside Compose in your Blogger post compose page.
  • Now locate the area where you wish to add the blockquoted text or code and enclose them in between <blockquote> and </blockquote> as shown in the format below
<blockquote>

YOUR TEXT/CODE HERE

</blockquote>
  • After adding it, navigate back to the text format compose page by clicking on Compose. Once you are done writing the post, just click in Publish.

Alternatively, you can add the blockquote in your blog by clicking on the quote icon on the Compose page tab. This will automatically save you the time of going to the HTML section of the Compose page.

Blogger Post Compose
Hope that was helpful. To encourage us to keep bringing more tutorials like this, simply like/follow us on the various Social Medias or simply click on any of the Social Media share buttons below this post to share the information with your friends and family.