Custom the Code snippet style in Blogger

To custom the Code snippet style, you should have a little knowledge about CSS (Cascading Style Sheets) and HTML. By using Code snippet style, your post is more clearly and articulately. Now I share the simple way to custom it.

Step 1: Login to Blogger, select the "Template", then choose "Edit HTML" (tick the Expand Widget Template for full source)

Step 2: Insert the code bellow after <b:skin><![CDATA[/* tag and ]]></b:skin> tag:

pre, code {
  font-family:arial;
font-size:12px;
border:0px #CCCCCC;width:99%;
height:auto;overflow:auto;
background:#f0f0f0;
background-image:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmA5IEKXsYmjGdXHWd6U4nx1QoOYo6fx7XVDreyWSrQnGrnIZkpzMBgJ9SdHoA57fljNIEybqONB-wo3DZFJtO6ItFNICkQDKdtx_33o-y8oj89cvk1hL-oChFLoeJXPNHZu_df-40Rhs3/s320/codebg.gif);
padding:0px;color:#000000;
text-align:left;
line-height:20px;
word-wrap:normal;
}

Step 3:  When creating a new post, choose HTML editor, insert the <code> and </code> (or <pre> and </pre>) before and after your code snippet (as my code in step 2).

Other way, you can use the online tool: http://codeformatter.blogspot.com/, by paste your code snippet to it, choose some option, it can create your code immediately.And you can still copy the result and paste to HTML editor when creating the post in Blogger.