Add Code Box In Your Blog Posts [Tutorial]

If your blog is about all about coding or tutorials then you need to highlight codes in your blog posts , Right ?
Code Boxes can be used to highlight code lines or commands .It shows the codes in a special box from which users can copy the code easily.

Sample Code Box

Also Check Out - Get Rs100 QwikCliver Amazon Gift Card

Steps to add code box to your Blog Posts

Step 1: Log into your Blogger Account .Go to your Blog Dashboard > Template .

Step 2: Click on Customize

Step 3: Go to Adavanced > Add CSS

Step 4: Copy and Paste the following code

.code { background:#292929 ; background-repeat:no-repeat; border: solid #CC4040 ; border-width: 2px 2px 2px 20px; color: #ffffff; font color:#d3d3d3; 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; }

Note - You can also customise the code box by changing the above CSS code.

Step 5: Now whenever you are composing a new blog post , just go to the HTML section and type the following code where you want the code box to appear.

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

Step 6: Use Preview to view the changes.
- Consider Liking Our Facebook Page - 

>  Voila There You Go Enjoy Your Code Box <

> Made Simple <