Yesterday, When I was write about "Change your Blogger Blog as Dofollow" I face a problem to show Html Css Source Code in my blogger blog post. I got the solution and Now I will show you how to add any source code(for instance Html Css or Javascript Source Code) into you blogger blog  post.

Put Html Css Source Code in my blogger blog post

You May Want To Read Following

• (High Pagerank Dofollow Blogs=More Visitor+More comments)=Change your Blogger Blog as Dofollow

• No Need to Sign in Your AdSence account often-Just Install Adsense Publisher Toolbar for Chrome

• How to Install Free or Premium WordPress Theme

• 10+ Dropdown Menu Css Tutorial & css dropdown menu example

 

 I know, This is not enough to understanding, so read the Explanation Now-

 1. Paste Some Code Into Blogger

1. log in your Blogger account.Go Dashboard. Then Click on Design and then Edit Html 

2. Click the check box to expand Widget.

3.Hit Ctrl+F to find the following code

 ]]></b:skin> 

4. Place the following code before ]]></b:skin> 

 /*--Code View--------------*/
code {
color: #000099;
font: 108% "Courier new",Courier,mono;
padding: 0 2px;
white-space: nowrap;
}
pre code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
clear: both;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;
}
code .comment {
color: #888;
}
code .class, code .rules {
color: #ff00ff;
font-size: 100%;
}
code .value,  code .title, code .string {
color: #0000FF;
}
code .tag {
color: #000099;
}
code .keyword {
color: #000099;
}
.html .attribute {
color: #006600;
}

5. Now Click on Preview button. If you don't face  any error, Click on  Save Template Button. Now your blogspot blog is ready for Showing any Html Css or JavaScript source code.  

 2. Convert your Html/ JavaScript Source code into (escapeable) Special Characters

Now Every time When you want to place any source code in your blogger post you just need to make it readable for browser. For this reason, you need to convert the angular bracket and other special character. If there is a few angular bracket then you can convert it manually , just like that , use &lt;  for <   and use   &gt;  for > .
See the Complete HTML Escape Characters list from W3Schools,

 ASCII Printable Characters

So Use this tool and convert your source code . Now add the converted code into your blog post .But Add  <pre><code> before your source code and add
</pre></code> after your source code.

Though The post is so long, but don't think that is a tough job to show HTML CSS Source Code in your blogger(blogspot) blog posts. Just Read this post carefully and do exactly the same thing I mentioned above. If you have any problems doing that, leave a comment here, I will try to solve your problem.