How To Add Code Box In Blogger Post

Hello, friends welcome again to my another great Tutorial. In this tutorial, you will learn How To Add Code Box In Blogger. In my previous tutorial, I showed you How to add a pure HTML code box. In this tutorial, we will step above to an advanced level and learn How to add a code box in blogger post equipped with HTML+CSS. So without wasting time let's get started.

◆ What is Code Box in Blogger?

Code Box is a Text Area used to put specific elements like HTML, CSS, Javascript (.js) etc. to insert codes in blogger post.

◆ What is the use of Code Box in Blogger Post?

Code Box is used to differentiate between codes and texts in blogger post. Also, the code box in blogger post enhances visitors user experience since they can copy the codes directly from the code box. Also, when we share codes like javascript(.js) into the blogger post editor it mixes up the codes creates an error. So, to a defined, a separate place HTML codes a textbox is necessary.

◆ How To Add Code Box?

Step 1: Login to your blogger dashboard and select your blog.

Step 2: Goto Theme > Edit HTML

Step 3: Click anywhere inside the code area and press [CTRL+F]

Step 4: Insert ]]</b:skin> inside search box and hit enter

Step 5: Above ]]</b:skin> paste the code given below:

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }.code:hover { background-repeat:no-repeat; }

Step 6: Click "Save Template". Enjoy (y) you are done!

◆ Customization

Now, there were two different styles of HTML code box available to display codes in blogger post. They were 

(i)   HTML code box with scroll &

(ii) HTML code box without scroll.

Code which is provided above i.e., in "Step 5" that code is for HTML code box with scroll effect.

If you wanted to add HTML code box without scroll effect just remove max-height: 200px; from "Step 5" or you can simply paste the code for HTML code Box without scroll effect.

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }.code:hover { background-repeat:no-repeat; }

◆ How to Use Code Box in Blogger Post?

To add code box in blogger post follow the above steps:

Step 1: Login to your blogger dashboard and select your blog.

Step 2: Goto Posts > New Posts > HTML

Step 3: Paste this code wherever you want to display code box in your blogger post

<div class="code">Your Code Here</div>

Step 4: Change " YOUR CODE HERE" with your code
Step 5: Click "Publish". Enjoy you are done!
◆ Last WordHope you are benefitted by this article and learned something new. Let me know how this tutorial helped you to display Code snippet In you Blog Post. For any issues relating implementation of the code snippet drop a comment below we are ready to help you.