How To Show HTML/CSS Codes On Coloured Background In Blogger Posts

1.Login to your dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag.

3.Now copy below code and paste it before ]]></b:skin> tag.

.csscode {
margin : 10px 10px 10px 10px;
padding : 5px;
clear : both;
list-style-type : none;
background : #F9F7E8;;
border-top : 2px solid #000000;
border-right : 2px solid #000000;
border-bottom : 2px solid #000000;
border-left : 2px solid #000000;
}

Look at the example below.

.csscode {
margin : 10px 10px 10px 10px;
padding : 5px;
clear : both;
list-style-type : none;
background : #F9F7E8;;
border-top : 2px solid #000000;
border-right : 2px solid #000000;
border-bottom : 2px solid #000000;
border-left : 2px solid #000000;
}

]]></b:skin>

4.Now save your template.

5.Now when you want to insert some codes in your posts always put it between <div class="csscode"> and </div> and publish your post.

<div class="csscode">

YOUR CODE HERE

</div>

Look at the example below.

<div class="csscode">

&lt;form action=&quot;http://www.roundpic.com&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot; target=&quot;blank&quot;&gt;&lt;input value=&quot;1048576&quot; name=&quot;MAX_FILE_SIZE&quot; type=&quot;hidden&quot;&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td class=&quot;title&quot;&gt;&lt;b&gt;Image:&lt;/b&gt;&lt;/td&gt;&lt;td class=&quot;input&quot;&gt;&lt;input name=&quot;file&quot; type=&quot;file&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td class=&quot;title&quot;&gt;or &lt;b&gt;URL:&lt;/b&gt;&lt;/td&gt;&lt;td class=&quot;input&quot;&gt;&lt;input value=&quot;http://&quot; name=&quot;url&quot; type=&quot;text&quot;&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;br /&gt;&lt;td colspan=&quot;2&quot; class=&quot;submit&quot;&gt;&lt;button onclick=&quot;getLoader();&quot; type=&quot;submit&quot;&gt;Round it!&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/form&gt;

</div>

It will look like this.