How to Display Scripts & Codes in Blogger Posts

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-family : "Courier New", "MS Sans Serif", sans-serif, serif;
   
   line-height:1.6;
   
   background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZoVSEPUldUmzsfUm_ufIapPHPDZdo_JqdXbMMCQq7URvIuLIBIVl7T7xiUPAzIB4u55nZZBy5enr9R8xhjTpuQ9YSgIQmLR4Na8U2UdO7S1yL61eT075XrYuqy-MO7dEYrj8EUj-MyAUT/') 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 {
   
   line-height : 24px;
   
   color : #333333;
   
   margin : 0;
   
   padding : 0;
   }
   
   >
   ]
   ]

6. 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. HTML Entities Encoder / Decoder
2. Postable
3. 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/AVvXsEhZoVSEPUldUmzsfUm_ufIapPHPDZdo_JqdXbMMCQq7URvIuLIBIVl7T7xiUPAzIB4u55nZZBy5enr9R8xhjTpuQ9YSgIQmLR4Na8U2UdO7S1yL61eT075XrYuqy-MO7dEYrj8EUj-MyAUT/’) 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;

}

Want any Help Ask me via comments and leave your responses (Source: Way2Blogging.org)