How To Add Code Box Area in Blogger Posts to show scripts

It is quite common for Blog Designers which is there Blog about blogger tutorials and this post will deal with any kind of Blog Costomization. It will become more easier for anybody to located the html code and easily copy and past the code for  using it. It will also give a well organized look to your blog post. Now follow with the step below:

Step1: Log in to your blogger account. Go to Dashboard > Template.

Step2: Click on the Customize.

Step3: GO to Advanced > Add CSS.

Step4: Copy and Paste the following code in the Add CSS section.

.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 whenever you are composing new post , just select HTML section and paste the following code. 

<div class="code">
Paste your code

</div>

Step6: Go to Compose mode. Replace Paste your code with your code. Complete your post and publish it.

Now you are done!

Enjoyed this post?
Be sure to subscribe to get regular updates delivered to your email inbox, for free.