Wednesday, 21 March 2018


              Blogger is the best free and trustworthy platform for blogging. Blogger is a reliable and easy way to launch your blogging passion. it is difficult to customise blogger blog as compared to other platforms like Wordpress, Wix, Joomla etc but there are some tricks that let you customise your blog by editing Html. 

   Here, in this blog post, I will show you how to add code box in blogger posts. Code box creates a separate text box with different colour and font and separates it from other text on the blog. Thus lets visitors easily find the code they want. let us start with step 1.

Also Read: Top 5 Free Blogger Templates To Create A Beautiful Blog 2020

blogger code box, how to add codebox in blogger, codebox

    Step 1: Go to Blogger Template and click the customise button present at the left, below the preview of your template.

customise blogger template,

Step 2: Go to advance and then Add Custom CSS or add CSS. Paste the code given below in the code box.

add custom css in blogger

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

In some cases, you would not be able to add custom CSS. You can do it by editing your template HTML.

1. Goto your blog template and click edit template.

edit html in blogger template

2. Search custom CSS by using "Ctrl+f" function

custom css in blogger blog

3. Place the above code from step 2 below "Custom CSS here".

Step 3: Go to your post in which you want to add code box and put the given below code in the HTML area. For adding Html, click the HTML button at the top of the post. Now replace here is your code with the code you want to put in your blog post. 

<div class="code">
here is your all code

how to add code box in blogger

   This tutorial was a little bit of blog customisation, in the next tutorials, I will discuss some other customisation that will take your blog to the next level. If you face any problem while doing the operations, ask me in the comments box below. I will try to help you as soon as possible.


No comments:

Post a comment

Do Not Add HTML links to your comment. Otherwise, your comment won't be approved.