How to Add Code Snippts in Blogger Post OR How to Add Script Box in Blogger Post

Hello Friends, Welcome to Brothers IT Hub. How are you? Today we are going to show you how can you add code snippets or code box or text box in your blogger / blogspot post with and without adding CSS in blogger theme. We will discuss how can you add code snippets in your blogger post just by adding a line of HTML script. HTML is not a something you should be scared of. It is just a simple language, easy to learn and understand. We are not going to teach you HTML language in this article but we will discuss a little bit of this language.

What is code snippet or script box?

Code snippet or script box is a box used to highlight or place codes in a post for users. The code snippet allow users to copy the code without having any problem or confusion. It decrease users stress about scripts starting point and ending point. They do not need to be worried about from where the script is starting and where the script is ending. Below are the methods to add code snippet or script box in blogger post.

The first best method to add code snippet in blogger post.

There are many methods used by peoples to add code snippets in blogger posts but the method I found and love is to add code snippet using a table method. It is very easy and suitable with all type of themes of blogger. No need to add or use CSS scripts and there is no need of extra knowledge to use this method.
Here is the method to add code snippet in your post using table form method:

• Go to the post in which you want to add code snippet and enter into HTML Editor mode of that post.

• Go to the place where you want  to add the code snippet in your post and copy past the code/script given below at that place. And come back to the compose option in post editor. You will see a box here just past the code or script into this box that you want to share with your visitors. Figure out screenshots  given below for more help.

<table border="2" cellpadding="1" style="background-color: greenish; border-collapse: collapse; height: 26px; width: 100%;"><tbody> <tr style="height: 24px;"><td style="background-color: greenish; height: 24px; text-align: center; width: 50%;"></td></tr> </tbody></table>

Here are screenshots how can you add and use this script.

Features of Table type code snippet

There are many features of this code snippet but some important features are:

• No CSS script is required.
• Does not slow down website or page loading.
• Easy to add and manage.
• No need to touch theme editor.
• You can change size, padding, margins, colors and styles directly without going to theme editor.
• Automatic fit size according to the length of scrip or code pasted inside this.
• Suitable for all type of themes.
• Work with all type of devices such as mobile and desktops.
• Simple HTML code.

I hope you will like this code snippet and will enjoy it. Save the code of this code snippet in text file or in your notes for further use in posts.

Second Method to add Code Snippet in blogger post.

It is second best method to add code snippet in blogger method without adding CSS script in blogger theme. It is also highly customize able and HTML based code snippet. I have converted CSS based code snippet into HTML form so that it could be used easily without slowing down website or page loading. The method of using this code snippet is very easy and same as first method mentioned above. Follow the steps given below to add this code snippet in your blogger post.

• Go to the post in which you want to add this code snippet and enter into HTML editor mode of post.
• Go to the place where you want to show the code snippet in your post and copy past the code given below.

<pre style="background: #ffffff; border-width: 0.1em 0.1em 0.1em 0.8em; border: solid gray; line-height: 125%; margin: 0; overflow: auto; width: auto;">
past or enter your code or script here
</pre>  

Features of PRE code snippet

There are many features of this code snippet and some of these features are mentioned below:

• No CSS is required to use this code snippet.
• Easy to use and manage.
• Does not overload or slow down the site or page loading.
• Highly customize able. You can change background colors, size, margins and borders according to your wish.
• No extra HTML knowledge is required to use this code snippet.
• Completely HTML based and suite able with all type of blogger themes.
• Support scrolling 

Third Method to add code snippet or script box in blogger post

 It is also PRE method to add code snippet in blogger post without adding CSS in blogger theme. It is more advanced than second method to add code snippet in blogger post. It is highly customize able and easy to use. It can be added same as second method in blogger post. Here is the desciptive method to add it in your blogger post. Follow the steps given below to add this code snippet in your blogger post.

• Go to your blogger post in which you want to add code snippet and enter into its HTML editor mode.
• Go to the place where you want to add code snippet in your post and copy paste the code given below.

                 <br />
<pre style="background: rgb(240, 240, 240) none repeat scroll 0% 0%; border: 1px dashed rgb(204, 204, 204); color: black; font-family: &quot;arial&quot;; height: auto; line-height: 20px; overflow: auto; padding: 0px; width: 99%;"><span style="font-family: &quot;georgia&quot; , &quot;times new roman&quot; , serif;"><span style="font-size: large;"><span style="font-size: large;"><code style="color: black; word-wrap: normal;"><span style="color: #783f04;"><span style="font-size: small;">       </span></span></code></span></span></span></pre>
<code> </code>
<span style="font-family: &quot;georgia&quot; , &quot;times new roman&quot; , serif;"><span style="font-size: large;">
</span></span> 

You can sees it is more advanced and functional then uper PRE code snippet as I told you above.

Features of this code snippet

There are many features of this code snippet but some important features are following.

• No CSS script is required to use this code snippet.
• Highly customize able. You can change background color, text color, fonts type, size, styles according to your well.
• Easy to use and manage.
• Auto hight increase according to the length of script you paste inside it.
• Scrolling
• Does not overload or slow down your website or pages.

Fourth and Last method to add code snippet in blogger post

The above mentioned three methods are about adding code snippet in blogger post without adding CSS script into blogger theme. But now I will tell you how can you add code snippet in your post after adding CSS script in your blogger theme. It is also a good method to add code snippet but it can decrease website performance because every CSS script that we use in our theme execute when someone visites our blog. But it is little script and will not cause much problem in loading your website. Be careful when you are adding anything in your theme because incorrect configuration can broke your theme and make your website unstable. Here is the method to add code snippet with this method into your post. Follow the instructions given below.

• Go to your blogger Themes section and then click on Edit HTML. 
• Press CTRL+F button and find </head> in theme HTML.
• Copy the code given below in code snipped and past it above </head>

         <!--... plenty of things here...-->
 <!--CUSTOM STYLES-->
     <style type="text/css" media="screen">
     .didrde-code { 
  background: #ffffff; 
   overflow:auto;
   width:auto;
   border:solid gray;
   border-width:.1em .1em .1em .8em;padding:.2em .6em;
  .didrde-code pre {
   margin: 0; 
   line-height: 125%
     }
     </style>
 <!--END OF CUSTOM STYLES-->

After adding CSS script in your theme above </head> tag, just save your theme.

• Now go to the post in which you want to add code snippet and enter into HTML editor mode of post.
• Go to the place where you want to show code snippet in your post and copy paste the code given below.

       <div class="didrde-code">
  <pre>
    print 'hello world!'
  </pre>
</div>

Features of this snippet code

It has many features and some of them are :

• Customize able
• Short code to remmber
• Easy to use and manage
• You can change text size, background color and much more according to your wish by editing CSS.

There are methods mentioned in this post / article I hope you will enjoy these methods. You can use anyone of these that you like.
If you have any Question, problem or suggestion then comment now. We are always here to help you. Sorry for bad English.
Your suggesions are important for us. Thanks.