How to display the Scripts and Codes in blogger post

---

How to display the Scripts and Codes in blogger post To show codes in blogger post in special section.

Suppose we want to show a simple code like bellow
<h1> Related posts </h1>

but it is HTML Code so it will display like bellow

Related Posts

To avoid this we show codes in special Section amd make it friendly to post 

Just follow these steps 

1. Login to Blogger dashboard
2. Go to Design Section
3. Then select Edit HTML tab
4. Find   ]]</b:skin>  tag
5. Replace it with Bellow Code of section

.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-size:normal;
list-style-type : none;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvnpDSKfzlWdM_vm-B028H_5LSTZfRJukFcUKMOhf1syVfbgQ0ARuWKxH_AWj936iTKB8eo4uTv78WYJqrvaQ2YLXgbC6Sf66k-anH-OKFpVDToSLYUbqL88bNmEyFCuB1JB3S-fl1lx6M/') no-repeat scroll bottom right #EFFBF5; 
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;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
]]></b:skin>

Now save your template.

While creating any Post, If you want to show the special Code in post that CSS code or JavaScript code, what ever may be , Go to Edit HTML tab in Post and create Div section and put your code in Div section like bellow and publish Your Post

<div class="codeview">

<!-- Put Your Special code here -->

</div>

Note:- Before Putting code, Make it Friendly to post Using these tools

1. Postable
2. Centricle Encode / Decode HTML Entities

a sample preview

.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-size:normal;
list-style-type : none;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvnpDSKfzlWdM_vm-B028H_5LSTZfRJukFcUKMOhf1syVfbgQ0ARuWKxH_AWj936iTKB8eo4uTv78WYJqrvaQ2YLXgbC6Sf66k-anH-OKFpVDToSLYUbqL88bNmEyFCuB1JB3S-fl1lx6M/') no-repeat scroll bottom right #EFFBF5; 
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;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

About the Author

I'm AlQadib, the founder of Blog Walker (BW). I'm a freelance writer on topics related to Website Optimization (SEO), blogger customizations and making money online. I'm blogging since 2011 and I'm currently a guest blogger on Blogging With Success.
Follow Me on Facebook [at] Facebook

Subscribe to this Blog via Email:

Click here to Subscribe to FREE email updates from "iBlog Walker", so that you do not miss out anything that can be valuable to you and your blog!!

Blog Tutorial,Display script