This tutorial only show you how to add code or javascript code to blogger post without being executed. You can change the way you show it by using blockquote or your own style.

Step 1. Go to your blog >> Posting >> New Post and write everything you want to show to your reader except your Code or Script. Please make sure you use Edit Html to post your article.

Step 2. Copy the script you want to show to your reader. Let me give you the example :

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Copy that code and convert it using Parse HTML generator tool. you can find it here

1. http://www.blogcrowds.com/resources/parse_html.php

Step 3. Parse the code and copy the result to your edit html editor post. You can use blockquote to make it looks different.

Step 4. Publish your post and done.

Note : You can place any code or script to blogger post by using this tricks.
Enjoy. Make It Simple

If you're bored of the generic templates supplied by Blogger, you can easily upload a customised XML template, such as the Blogger Buster templates found here. Here's a step by step guide.

1. Download your favorite Blogger XML template to your computer. If the template is contained in a zip file, ensure you have extracted the XML template.
2. Log in to your Blogger dashboard and go to Template> Edit HTML
3. Ensure you back up your old template in case you decide to use it again. To do this, click on the "download full template" link and save the file to your hard drive.
4. Look for the section near the top where you can browse for your XML template:
5. Enter the location of your template and press "upload".
6. The HTML of your new template will now appear in the box below. You can preview your template or simply save to start using it!

Blogger Buster.