How to display codes and scripts in your blogger posts

Posted by cryoffalcon on Thursday, October 1, 2009 · Leave a Comment

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 Layout section. Then go to Edit Html subtab.

Step 2
Find this code ]]> 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>

That it. If you have any problem to implement it, feel free to post a comment, I will help you.