Tutoriales Sobre Blogger: Resaltar de forma simple CSS, HTML, Jquery o cualquier código

En este tutorial veremos como resaltar de forma simple códigos CSS, HTML, JQuery o otro código  que necesites. Muchos bloguers usan Blockquote para resaltar
sus códigos, por lo que no podemos diferenciar un código HTML, CSS, JQuery o cualquier otro código, con este tutorial podremos diferenciar dichos códigos.

Antes de Comenzar veremos una demostración: 

Demostración

Comencemos: 

• Paso 1: Vamos a Blogger>>Plantilla>>Edicion HTML.
• Paso 2: Buscamos la siguiente linea (Ctrol + F).

]]></b:skin>

• Paso 3: Justo por encima de ]]></b:skin> pegamos el siguiente código CSS.

pre.code {
    margin:20px 25px;
    border:1px solid;
    border-color:#CDD2D6 #BFC6CB #B3BBC1 #BFC6CB;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px;
    position:relative;
    -webkit-box-shadow:0 1px 1px rgba(0,0,0,.08);
    -moz-box-shadow:0 1px 1px rgba(0,0,0,.08);
    box-shadow:0 1px 1px rgba(0,0,0,.08);
}
pre.code label {
    font-family:sans-serif;
    font-weight:bold;
    font-size:13px;
    color:#4b555c;
    position:absolute;
    left:1px;
    top:16px;
    text-align:center;
    width:60px;
}
pre.code code {
    font-family:"Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
    display:block;
    margin:0 0 0 60px;
    padding:15px 16px 14px;
    border-left:1px #E5EAEE solid;
    overflow-x:auto;
    font-size:13px;
    line-height:19px;
    color:#333;  
}
pre.code-css code {
    color:#D84400;
}
pre.code-html code {
    color:#4576D5;
}
pre.code-jquery code{
   color: #38761d;
}
pre.code-otro code
   color: #7f6000;
}

Nota:- Como ven hay una linea llamada otro podemos cambiarlo por lo queramos, así también jquery, css, html por lo que deseamos

• Paso 4: Guardamos los cambios realizados en la plantilla.

Ahora agregaremos nuestro re-saltador de codigos CSS, HTML, JQuery u otro

• Paso 5: Dentro de una entrada agregaremos el código HTML.

<pre class="code code-html"> <label>HTML</label>
<code>
 Código HTML iría aquí        </code>
</pre>
<pre class="code code-css"> <label>CSS</label>
<code>
Código CSS iría Aquí </code>
</pre>
<pre class="code code-jquery"> <label>Jquery</label>
<code>
Código JQuery iría qui </code>
</pre>
</div>
<pre class="code code-otro"> <label>Otro</label>
<code>
Código Otro iría aquí
</code>
</pre>

Nota:- Si hemos cambiado otro o html, css, jquery en el Paso 3 lo remplazaremos en el Paso 5 

Listo ya podríamos mostrar nuestros códigos de una forma simple