How to post, XML,HTML,Java Script in Blogger posts

Recently, one my blog readers wanted to know how do I add Java scripts and other HTML codes in my blog posts. To be very frank, even I had this question when I started my blog initially. And when I tried to implement such tricks in my blog, I faced a lot of difficulties with the coding. But nowadays, I find many sites have come up with blogging tips and it has become very simple to customize your blog. Let me straight away tell you, how to implement this trick on your blog posts.

If you just want to show up HTML codes in your blogger post, that is without any customization, then use this site : Simple Code. This method will show the HTML as it is and looks very simple. If you want to customize the way it is displayed, like I do in my blog, then you should follow the next method. In this method, you will have to include some codings and then your job will be done.

Follow these simple steps to include the HTML/Java script codes in your blog post:
1. Navigate to "Layout>>Edit HTML" from your dashboard. Make a back up of your template before you do any changes in the template.

2. Now, do a search using "CTRL+F" for the following line: ]]></b:skin>
(Note: I have used the first method here. Just to show you how it looks)

3. Once you find the code, paste the following piece of code above it:

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://img17.imageshack.us/img17/5162/codeview.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #FFFFFF;
font-weight : normal;
margin : 0;
padding : 0;
}

 

4. Once you do this step, save your template and return to your blog post where you want to insert the HTML code. Place the HTML content in between the following two tags namely, <div class="codeview"> and </div>.

5. You can include the code straight away in the "Compose Mode" of your blog post area. After you complete your post, you can simply click the button "PUBLISH POST" and later, view the result.

If you still find problems with the display of HTML codes, then use Simple Code and get the simplified code from that site. Now, place this simplified code in between the two tags as mentioned in step four. That's all folks. Hope I made it simple and clear. Please post your views below through comments.