Sunday , 16 June 2019

TUTORIAL: How to Add Code Snippet to Posts in Blogger

CodeSnippetSometimes it is necessary to add code in our posts which should look different from simple text so that users can easily understand the difference between programming code and the text/instructions in your posts. Adding a code snippet is not difficult in Blogger all you need is to add few lines of code to your Blogger template and its done. One of the main purposes of adding a code snippet to posts is to give users the ability to understand quickly from your articles.

How to Add CSS of Code Snippet to Blogger Template

As mentioned above it is very easy to add a code snippet to Blogger, so read and follow the steps below and if you have any questions just comment on this post.

1. Go to Blogger > Template > Edit HTML > Proceed.

2. Now press Ctrl+f to search for:


3. Right above it paste the following code:

/* Start - Code Snippet for Blogger Provided by */
.code {
background: grey;
border: solid black;
border-width: 10px 10px 10px 10px;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
color: white;
/* End - Code Snippet for Blogger Provided by */
  • Change grey to any color for background color in code snippet.
  • Change solid black to any color of your choice for border color.
  • Change 10px 10px 10px 10px to any size for top, right, bottom and left borders’ width.
  • Change white to any color for text color in code snippet.

4. Now after adding this code just click on Save template.

How to Show Code Snippet in Posts

Whenever you write any post or article just click on the HTML button in the top left corner then add the following div tag around any code you write in the post.

<div class='code'>
Your code should be pasted here in this div tag.
Add Code Snippet to Posts in Blogger

Need Any Help?

If you have any problems in adding code into the Blogger template or any other problems just share them below.

Leave a Reply