Let’s Style Code Snippets Using CSS And Image In Blogger

If you are a web-designer then you have to use a lot of codes (CSS, HTML, PHP, Java-Script etc.) regularly. If you have chosen WordPress as your foundation, then it’s easier for you to highlight codes in your tutorials. But if you are one of them who chooses blogger as his platform then you will surly have a headache to style your codes in order to get visitor’s attraction there. Today we are going to show you a method to Style Code Snippets only Using CSS And Image In Blogger.

We are going to need some CSS to make this work. So let’s learn how.

1st log in to your blogger account and move to “Edit HTML”. Make sure you have backed-up your template before making any change.

Now search for the following code.

]]></b:skin>

Paste the following code just above it.

.post pre {
font-size: 12px;
padding: 0;
margin: 0;
background: #f0f0f0;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_oooya4nRLw9qxRLIdx2TVGlvlNQl7ArngOPY2XvCbPjL7XocDoKzPKpR1aTfkYx1pFMY3-CULWdO8iZyvwXcn6a6F7X-DwquWPd5rTlcdALyRNVZ6B5nA8wNESQYwIp0BHwSThTOEu0/s1600/pre_code_bg_ylw.gif) repeat-y left top; 
line-height : 20px;  
width: 600px;
overflow: auto;
overflow-Y: hidden;
}
.post pre code {
margin: 0 0 0 40px;
display: block;
}

Save your template and you are done.

To use this style , paste your code inside pre code tag. For example.

<pre><code>
Code Snippet Goes Here
</code></pre>

The background image is created by Soh Tanaka