How to add Advanced code box in blogger post

Team TeachWiki
add Advanced code box in blogger post Like This

If you do not know how to add code box in your website so kindly do not worry because this post is written for you just read this post and add an advanced code box into your post.

Table of Contents

Blogger is the best platform provided by Google for those people who need to begin their sites with free facilitating that google gives us. You don't have to give any single cent to make your online blog. It gives you many templates and choices to make your blog look proficient and wonderful.If you are new blogger you can start from blogger. Many individuals are as yet utilizing blogger rather than a lot of blogger users migrating to other sites like Wordpress, Wix, and so forth.

Is Blogger Difficult Than Other Platforms?

Blogger gives you all the access to edit your blog theme according to your choice but for that, you just need some basic knowledge of codings like HTML, CSS, and PHP, etc for professional use. Therefor you have to need some coding knowledge if you want to add any advanced widget into your's blogger site like code box.On the other hand, If you are using other platforms like WordPress, etc you can add a lot of plugins with one click like code box.

Why You need to Add Code Box In your Post?

If you are a article writer or a developer sometimes when you write a blog post and you want to share some type of code to your visitors. When you try to add code box into your post in a simple form your's code box not working correctly but sometimes it mixed with your other content so therefor you should add code boxe so that's make easier to your visitors to make a difference between your article and code box. After adding this code box visitors can easily copy code from the code box and use it. It will give a professional touch to your post content.

As we know blogger does not offer us a lot of widgets so therefor we need to add code box using third party sites or using some other codes.So today, I will let you know the total and simple strategy to add code in blogger posts. I will give you a basic and alluring code box for your post readers. It will help's a lot to your readers with read and duplicate that code.

Let's start the topic.

How To Add Code Box In Blogger Post

  • Open blogger blog - Create account
  • Go to Theme > edit html
  • Type Ctrl+f and search </head>
  • Paste given code befor </head>.
<link href="https://nationaltools.github.io/apps/scripts/shCoreDefault.css" rel="stylesheet"/>
  • Type Ctrl+f and search </body>
  • Paste given code befor </body>.
<script src="https://nationaltools.github.io/apps/scripts/shCore.js"></script>
<script src="https://nationaltools.github.io/apps/scripts/shAutoloader.js"></script>
&lt;script&gt;
function path()
{
var args = arguments,
result = []
;
for(var i = 0; i &lt; args.length; i++)
result.push(args[i].replace(&#039;@&#039;, &#039;https://nationaltools.github.io/apps/scripts/&#039;));
return result
};
SyntaxHighlighter.autoloader.apply(null, path(
&#039;css                    @shBrushCss.js&#039;,
&#039;js jscript javascript  @shBrushJScript.js&#039;,
&#039;xml xhtml xslt html    @shBrushXml.js&#039;
));
SyntaxHighlighter.defaults[&#039;auto-links&#039;] = true;
SyntaxHighlighter.defaults[&#039;collapse&#039;] = false;
SyntaxHighlighter.defaults[&#039;first-line&#039;] = 1;
SyntaxHighlighter.defaults[&#039;gutter&#039;] = true;
SyntaxHighlighter.defaults[&#039;smart-tabs&#039;] = true;
SyntaxHighlighter.defaults[&#039;tab-size&#039;] = 2;
SyntaxHighlighter.defaults[&#039;toolbar&#039;] = true;
SyntaxHighlighter.config.tagName = &quot;pre&quot;;
SyntaxHighlighter.all();
&lt;/script&gt;
save you theme.

After saving your theme just open any post of your blog where you want to add this code box jus use pre tag to create a code box as shown in below

<pre class='brush:ADD BRUSH NAME HERE;'></pre>

Friends if your are confusing select a brush do not worry you can use (BRUSH LIKE: xml, javascript, css etc)

If you are new and do not know even the abc about blogging you can join our full blogging course.

Comments