Adblock Detectado

Nuestro sitio se mantiene gracias a la publicidad, por favor Desactiva Adblock para seguir navegando

He desactivado Adblock
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: 


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

- - 2 Comentarios
Tag

Comentarios (2)

:))
:((
:D
:(
:)
:-)
;)
=))
:p
=.=
==
^_^
/=he
:*
/=r
/=l
:v
/=ok
/=clap
(y)
(yy)
/=hi
/=j
/=hup
/=hd
/=hl
/=hr
/=s
<3

Instrucciones Para omentar

Incertar Enlace

Utilice el codigo <a href='LINK'> EJEMPLO </a>

Cargar Imagen

[img] LINK_ANH [/img] -Use el codigo para cargar una imagen.

Formato Word

<b> negrita </b>
<i> cursiva </i>
<u> texto subrayado </u>
<strike> texto tachado </strike>

Insertar un Fragmento de codigo

Primero use esta herramienta para codificar el codigo que quiera agregar.
Luego utilice el codigo [code] CODIGO HTML [/code]

Cerrar