2 Best Method To Display Code on Blogger Post

Trying to display Code on a blog post? but unable to do? Don’t worry because I am here to help you.

Today I am going to show you how to display code on blogger post. If you share the Codes into a code box it would look stylish, beautiful and it will help visitors to read and copy that code easily. Without further delay let’s get into the ttutorial.

How To Display Code on Blogger Post

Display Code on Blogger Post

There are two different ways to add code box on blogger.

In the first method we need to edit blogger template and in the second method we can add box without editing template. We just need to add some code on additional CSS page. I will show you both methods.

However, the second method is very simple, easy and recommended for beginners.

First Method:

    1. Login to Blogger Dashboard
    2. Then click on Theme >> Edit HTML
    3. Click anywhere on the code area and press Ctrl + F. Search box will open.
    4. Now search for ]]<b/:skin>
    5. Just above the ]]<b/:skin> paste the below-given code.

You need to paste only one of them if you will add both the given codes you will get an error.

Code 1. If you want to add code with scroll add the following code.

.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. If you want to add code without scroll add the following code.

.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; }
  1. Now Save the template and that’s all you are done.

Second Method (Recommended For Beginners):

  1. Login to Blogger Dashboard
  2. Click on Theme >> Customize
  3. Now click on Advanced
  4. Then click Add CSS
  5. Paste one of the above-given codes and click the Apply To Blog Button.
  6. Now you are done.

Read: Stylish Demo and Download Button for Blogger and WordPress

How To Use Code Block in Blog Posts:

In order to use this just follow the below steps.

  1. To use this just click on the HTML Mode of your Blog Post Editor.
  2. Now write or paste the below-given code in your Blogger Post Editor.
<div class="code">
Enter Your Code Here
</div>

 

code box blogger

  1. Replace “Enter Your Code Here” with the code you want to share.
  2. Then Publish your post.

Note: If you want to share HTML Codes using the methods above, you will need to encode the HTML Code with the HTML encoder. You can use the website link given below to encode HTML Codes easily.

Benefits of Code Box

  • You easily display HTML, CSS, Javascript, PHP, etc codes on your blog posts.
  • The code box will make your blogger posts look nice and clean.
  • Anyone can easily copy the code.
  • Code box highlights the shared code. So, it looks neat and clean also helps your visitors to easily understand the code.
  • If you want to display code on Blogger Post, code box is the best way to do that.

So, friends, this was the post about how to display code on blogger post. I hope you like the post. If you have any issue please comment below or you can contact me using either Contact Us page or you can message me on my Facebook Page.

Read More:

Leave a Reply

Back to top button