How to Add Code Box Area in Blogger Posts

People want to add the HTML code in blogger in different box so that one can easily locate the html code in the post and also easily copy and paste the code to us it.


See the step by step guide to enable this function in your blog for each post

Step1: Log in to your blogger Dashboard >>> Template >>

Step2: Then Click on the Customize

Step3: Now a window will open their click on Advanced >>> then >>> Add CSS

Step4:  After this a box will open. Add the following code in the box and click on apply to blog button to enable this in to your blog.

.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; }

Step5:  Now in order to apply this to blogger post, when you're composing your post goes to HTML and then put code between the following tags

<div class="code">
Paste your code
</div>

Now your code will look like below box

Paste your code

Share on Google Plus

If you have any useful information or tips then please share with us at xpertsinfotech@gmail.com.