Saturday, September 19, 2020
Home Blogging Tips & Tweaks Simple Numbered Blockquote For Blogger and Website

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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments