Fomat your blog

How to add CSS to blogger to be available in all pages
Blogger -> Posts -> Layout -> Template Designer -> Advanced -> Add CSS

Add below CSS

.preTagCodeStyle {
font-family:arial;font-size:12px;border:1px dashed #CCCCCC;width:99%;height:auto;overflow:auto;background:#f0f0f0;;
background-image:URL(https://github.com/gubs4u/DownloadSamples/blob/master/codebg.gif);
padding:0px;color:#000000;text-align:left;line-height:20px;
}
.codeTagStyle {
 color:#000000;word-wrap:normal;
}

div.note {
    background-color: #fefaee;
    padding: 10pt;
    margin-top: 0.6em;
    margin-bottom: 0.6em;
    margin-right: 0.6em;
    border: 1px dashed;
    border-radius: 3px;
    border-color: #CCCCCC;
}
div.configuration {
    padding: 1em;
    border: 1px dashed #2f6fab;
    color: black;
    background-color: #f9f9f9;
    line-height: 1.1em;
    font-family: Courier New, Courier, mono;
    font-size: 12px;
    font-style: italic;
    display: block;
} 

To format your code add below:

<pre class="preTagCodeStyle"><code class="codeTagStyle">
Your code here
</code></pre>

To add a note use below:

<div class="note">
Your note here
</div>

To add a configuration use below:

<div class="configuration">
Your configuration here
</div>

Note : Go to HTML tab and add this tag. In 'Compose' have option 'Show HTML Literally'