Trick Builder: How to Display Scripts and 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

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

Just follow these steps

Login to Blogger dashboard
Go to Design Section
Then select Edit HTML tab
Find ]]> tag
Replace it with Bellow Code of section

.codeview {<br /> margin : 15px 15px 15px 35px;<br /> padding : 10px;<br /> clear : both;<br /> font-family : "Courier New", "MS Sans Serif", sans-serif, serif;<br /> line-height:1.6;<br /> background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDlb-o_jaib93gAP4nuGzv8Rfr6-RZGYpS42HgNudzy1maFnqlaRd7C0fB2mKu1GgmI1rFT6PGLLsQ6KmvT01zEXvTSBAkLkEb7IbFdoKeMOP1RC_wiXgH6U9t4yQKVtTARScCNCocU4p8/s1600/trick+Builder.png') no-repeat scroll bottom right #EFFBF5;<br /> border-top : 1px solid #eeeeee;<br /> border-right : 2px solid #cccccc;<br /> border-bottom : 2px solid #cccccc;<br /> border-left : 1px solid #eeeeee;<br /> }<br /> .codeview li {<br /> line-height : 24px;<br /> color : #333333;<br /> margin : 0;<br /> padding : 0;<br /> }<br /> ]]></b:skin>

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"><br /> <!-- Put Your Special code here --><br /> <br /> </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-family : "Courier New", "MS Sans Serif", sans-serif, serif;
line-height:1.6;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDlb-o_jaib93gAP4nuGzv8Rfr6-RZGYpS42HgNudzy1maFnqlaRd7C0fB2mKu1GgmI1rFT6PGLLsQ6KmvT01zEXvTSBAkLkEb7IbFdoKeMOP1RC_wiXgH6U9t4yQKVtTARScCNCocU4p8/s1600/trick+Builder.png') 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;
}
]]>

Want any Help Ask me comments..

Kindly Bookmark this Post using your favorite Bookmarking service: