How To Add Code box in Blogger Post in Easy Steps

How To Add Code box in Blogger Post

How To Add Code box in Blogger Post in Easy Steps

Hello, friends welcome again to my another great Tutorial. In this Article, you will learn How To Add Code Box In Blogger post in easy steps. 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 post?

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

How To Add Code Box in Blogger Post

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

How To Add Code Box in Blogger Post

• how to add your wordpress website to gppgl webmaster tools
• top 2 best domain buying sites
• how to approve google adsense

Step 2: Goto Theme > Edit HTML

How To Add Code Box in Blogger Post

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

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

How To Add Code Box in Blogger Post

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

(i)   HTML code box with scroll &

.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 &

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.

(ii) HTML code box without scroll

.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?

• how to get ahrefs premium account for free
• top 5 free screen recoreder without watermark
• how to get free 12 months on HMA vpn

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 HTML 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 your Blog Post.

For any problems relating implementation of the code snipping drop a comment below we have a tendency to square measure able to assist you.