How to display codes and scripts in your blogger posts

Want to show some piece of code in your post to your readers?
Normally when you insert some code with HTML tags in your blogger composer , it will be executed and the result will be shown instead of code.

Step 1
Login to your Blogger account and navigate to Design section. Then go to Edit Html subtab.

Step 2
Find this code ]]></b:skin> in your template code, and above this line add CSS code below and Save your Template now


.codeview {
font-family: Arial, Helvetica, sans-serif;
color: #CC0000;
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
border-top : 2px solid #cccccc;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 2px solid #cccccc;
background-color: #FFFFFF;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}




Step 3
Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this div section .

<div class="codeview">
Insert the Special code here
</div>

Posted in: Blogger Tutorial