How to Change a Blockquote to a Script Box

How to Change a Blockquote to a Script Box - Websites that contain tutorial content on web design and programmers such as javascript, css and html are usually equipped with a script box or code snippets to package html, css and javascript in a professional and attractive appearance on their tutorial page .

But in some cases some types of script boxes (pre code) generally use JavaScript libraries and third-party css (CDN, Highlight.js, Prism.js. Or Google Prettify) which can add a little burden to the loading of the site's pages. And using the script box with syntax highlighting pre code must be extra careful so that the html and js code embedded can be displayed perfectly, it is usually required to parse the "html and js" code before pinning it with pre code (code snippets).

In this tutorial I will share how to make a script box that can be used with a simpler technique that is by changing the blockquote function into a script box similar to pre code. follow the steps as follows;

Create a Script Box with Blockquote
Login to blogger> Template> Edit HTML
Search and find the basic style "css blockquote" template then replace it with css below;

blockquote{quotes:none;}
blockquote:before,blockquote:after{content:'';content:none;}
blockquote{margin:1.5em 0;padding:5px;background-color:#353535;border:1px solid #DADADA;padding-left:1em;font-family:"Monospace",Courier,Courier New;color:inherit;color:#fff;font-size:12px;display:block;}

If previously your blogger template did not have a "blockquote" style, please add the css just above the code]]> </ b: skin> then save the template.

How to use:
Highligt or select code (javascript, htm or css code) then click the blockquote button on the top bar of the blogger post editor, see the example image below;

Thus the tutorial how to make / change the function of the blockquote into a script box, please note if the site pages use ads with articles, position the blockquote above or above the content and below or below the bottom half of the content so it does not conflict with the ad script.