How To Add a Code Box On Blogger Post

How To Add a Code Box On Blogger Post

We will discuss how to a code box in your blogger post. If you are a blogger and have a blog about technology then you would need  to share code snippet with your visitors. It would uplift your blogpost as it look stylish, beautiful and neat. It will help visitors to read and copy that code easily.

1. Login to Blogger Dashboard
2. Click  on Theme > Now Click > Customise

3. Find Advanced option on the top left of the screen and hit that button
4. Then click Add CSS
5. Paste  the given code and click the Apply To Blog button.

.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; }
 <style>
   .post blockquote {
    text-align:left;
    font: 16px/24px Arial, sans-serif;
    color: #555;
    padding: 0.5em 10px;
    margin: 1.5em 10px;
    }
    .post blockquote:before {
    content: open-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: left;
    position: relative;
    border-radius: 25px;
    margin-right: 0.5em;
    vertical-align: -0.4em;

    display: block;
     height: 25px;
     width: 25px;
    }
    .post blockquote:after {
    content: close-quote;
    font-size: 24pt;
    text-align: center;
    line-height: 42px;
    color: #fff;
    background: #ddd;
    float: right;
    position: relative;
    border-radius: 25px;
    margin-right: 1em;
    vertical-align: -0.5em;

    display: block;

    height: 25px;

    width: 25px;
    }
    .post blockquote:hover:after, blockquote:hover:before {
    background-color: #555;
    transition: all 350ms;
    -o-transition: all 350ms;
    -moz-transition: all 350ms;
    -webkit-transition: all 350ms;
    }
    </style>

How To Use it in your post

In order to use this follow the below steps.

1. To use this just click on the HTML  of your blog post editor.
2. Now paste the below-given code in your blogger post editor.

3. Replace "Mycode" with the code you want to share, between <div class="code"> ..</div>
4. Publish your post . The code snippet will like this.

This was the post about how to add code box on blogger post. If you Like the post do not hesitate to share with your friends.

Share this post