Posting scripts in the blogs is not straightforward. I came across some ways to do so:
Method #1: Simple Approach:

This will display the script as follows:
Method#2: Better Approach:
1. Login to your Blogger account.
2. Goto Design and then Edit HTML. Then you will see the script for your current blog template.
3. Backup your current template by clicking at "Download Full Template". You may skip this step if you are confident that you do not need it afterwards.
4. Find ]]></b:skin> in the code and add the following code just before ]]></b:skin>:
.code {color: #006AB0; border : 1px solpd #DfADADA;padding : 5px 5px;font-family : Consolas, "Courier New", Courier, mono, serif;font-size : 12px;background-color : #fAfAfA; width : 90%;overflow : auto;margin : 10px 0 10px 10px; border-left : 20px solid #DADADA;max-height : 500px;min-height : 16px;line-height : 16px;}
.code:hover {background-color : #f3f3f3;}
5. Save the template.
To post code in the blog just follow this example(NO Spaces within the div tag):

This will display as follows:
Print("This is my code in codebox");
But sometimes you may require to do more things if you want to display symbols like "<" , ">" ,"&", etc. In that case you have to used the following:
for < use & lt; (no spaces between & and lt)
for > use & gt; (no spaces between & and gt)
for & use & amp; (no spaces between & and amp)
for " use & quot; (no spaces between & and quot)
for space use & nbsp; (no spaces between & and nbsp)
for ± use & plusmn; (no spaces between & and plusmn)
[Sources:mainly from http://bit.ly/zpC2RX ]
Method #1: Simple Approach:

This will display the script as follows:
Method#2: Better Approach:
1. Login to your Blogger account.
2. Goto Design and then Edit HTML. Then you will see the script for your current blog template.
3. Backup your current template by clicking at "Download Full Template". You may skip this step if you are confident that you do not need it afterwards.
4. Find ]]></b:skin> in the code and add the following code just before ]]></b:skin>:
.code {color: #006AB0; border : 1px solpd #DfADADA;padding : 5px 5px;font-family : Consolas, "Courier New", Courier, mono, serif;font-size : 12px;background-color : #fAfAfA; width : 90%;overflow : auto;margin : 10px 0 10px 10px; border-left : 20px solid #DADADA;max-height : 500px;min-height : 16px;line-height : 16px;}
.code:hover {background-color : #f3f3f3;}
5. Save the template.
To post code in the blog just follow this example(NO Spaces within the div tag):

This will display as follows:
Print("This is my code in codebox");
But sometimes you may require to do more things if you want to display symbols like "<" , ">" ,"&", etc. In that case you have to used the following:
for < use & lt; (no spaces between & and lt)
for > use & gt; (no spaces between & and gt)
for & use & amp; (no spaces between & and amp)
for " use & quot; (no spaces between & and quot)
for space use & nbsp; (no spaces between & and nbsp)
for ± use & plusmn; (no spaces between & and plusmn)
[Sources:mainly from http://bit.ly/zpC2RX ]
Comments