TECHGRIDLE : How To Add Code Box In Blogger Posts

How To Add Code Box In Blogger Posts

You have noticed that some educational website or blog displays programming codes in a specific manner, that is in a box. Which make it more attractive and looks pretty good. In this post we are going to tell you how you can do that. Just follow these simple steps : -

Step 1 : Adding CSS code to Blogger

1. Login to your blogger blog Dashboard.
2. Then go to " Theme " > " Edit HTML ".
3. Click anywhere inside the code area and press Ctrl + F keys to open the search box.
4. Write or paste " ]]" code in search box and press Enter.

5. Just above " ]] " paste the code box CSS code given below:

Code 1: For Style 1 Copy This Code [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; }

Code 2: For Style 2 Copy This Code [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; }

6. Now click on " Save Template " and you completed.

NOTE : If you facing problem in pasting this CSS code in you blogger than try another simple method. Click below :

How to add CSS code in Blogger Post (click here)

Step 2: How To Use This

To use this in your post just follow the following steps:

1. To use this just click on HTML tab in your blogger post editor.

2. Now write or paste the code given below in your blogger post editor as shown in the image below: