Inicio  Contacto  Privacidad   Enlaces  Mapa del sitio  Videos

Caja para códigos con blockquote

Tutorial Optical Photo
Después de algunos años dentro de este mundillo de la red, donde continuo con la mala costumbre de continuar aprendiendo cada día ( y es que esto no termina nunca ) nuevos estándares, recursos, programación, sin limite si lo enfocamos de cara a un futuro que ya estamos viviendo. Como diseñador, webmaster o como queramos llamarlo y con varias paginas Web en mis espaldas me inicio en esta nueva aventura de los blogs.
Siempre fui bastante reacio a utilizarlos, quizás eran otros tiempos, otras formas y gracias a esto creo tener unos conocimientos mínimos sobre HTML y me defiendo bastante bien entre las lineas de código.
Bueno pues a lo que vamos. Insertar códigos dentro de una caja, tabla para mostrarlos y poder permitir al visitante utilizarlos en sus sitios, compartiendo el conocimiento adquirido y después de días indagando como poder hacer esto, leyendo blogs y mas blogs, comparando, probando y destrozando plantillas, al fin salio y lo he adaptado y modificado un poco y como comento anteriormente lo comparto.
Caja para códigos con las nuevas plantillas de Blogger. ( Actualizado 2012 ) como en esta plantilla Fantastico S.A (Awesome Inc.) Comencemos:
Vamos a utilizar una función que muchas plantillas ya tienen instaladas por defecto blockquote o lo que es lo mismo mas sencillamente dicho y conocido entre comillas, bloques entrecomillados, una función que dentro de los nuevos editores viene con un botón de esta forma
Comillas
En mi caso no venia instalado por defecto el código dentro de la plantilla así que vamos a aprender a hacerlo, implantándolo y utilizarlo para el propósito que describo en este post. Para los que si les funcione verán como poder modificarlo al gusto y sacarle partido.
Como Funciona: Muy fácil cuando escribimos un texto en una entrada solo es necesario seleccionarlo ( del mismo modo que cuando quieres copiar para luego pegar ) y estando seleccionado darle al botón de las comillas.


El resultado es que podrías tener algo como esto si esta configurado, implantado correctamente en tu plantilla. Instalar el código o en su caso sustituirlo por el nuevo. Lo primero sera ir a Edición, Plantilla, HTML 


( IMPORTANTE Recuerda hacer primero una copia de seguridad de tu plantilla )
Edicion en HTML Blogger


Una vez dentro de la edición Html tendremos que buscar si tenemos instalado, agregado algún código blockquote en la misma.
Podrían estar así  blockquote { o de esta otra forma .post blockquote { 
Como localizar los códigos dentro de la plantilla. Es muy sencillo simplemente en tu teclado pulsa Ctrl + F y veras que te sale un recuadro, en la parte superior derecha, es un buscador. 
Teclado buscar Ctrl+F
Dentro del mismo ponemos en código texto que queremos localizar dentro de toda la estructura de la plantilla y nos mostrara donde se encuentra el mismo enmarcándolo según resultados y nos dirá también cuantas veces esta si fuese el caso. 
Por norma nuestro código lo tenemos que tener o en este caso implantar dentro de este código o sección de la estructura de Post, algo así  /* Post.............. Como método de busca tan solo con poner Post obtendrás los resultados, fíjate en la imagen, vale mas que mil palabras mas,,,, 

buscar codigos Blogger
Una vez localizado continuamos bajando hasta la próxima linea de nuevos elementos, podríamos implantarlo en cualquier parte dentro de este apartado pero para no complicarnos la vida y tenerlo facilmente localizado lo pondremos como ultimo atributo dentro de los elementos de Post.
Como puedes ver en la siguiente imagen el final de cada apartado de un código, elemento orden,,, se cierra siempre con este carácter   } 
Elementos de la plantilla

Es muy IMPORTANTE también que estés atento a lo que haces dentro de esta parte de la edición en la plantilla, todo  tiene su sentido y significado, un simple punto . ; } cualquier carácter que modifiques borres sin darte cuenta podría desestabilizar el correcto funcionamiento de tu Blog. 
Donde poner el nuevo codigo
Vamos a indicarte un poco mejor donde implantar tu nuevo código, fíjate llave del final del anterior  } un espacio y la nueva entrada de otro apartado  /*  pues justo antes de esta ultima o después del carácter de cierre del anterior.





Bueno, pues ya terminamos y aquí tienes el código y el resultado es esta misma cajita dichosa de donde puedes obtenerlo. copy paste ( copiar y pegar ) 

 .post-body blockquote {line-height:1.3em;}.post-body blockquote {background: #C62CCE;margin: 10px 25px 15px;padding: 10px 20px 10px 15px;border: solid 1px #FFFFFF;-o-transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;}.post-body blockquote:hover {background: #141414;-o-transition:all .4s linear;-moz-transition:all .4s linear;-webkit-transition:all .4s linear;}.post-body blockquote p {margin: 0;padding: 0 0 15px;word-wrap: break-word;}
Recuerda: Como hacer que salga texto aquí dentro.  Pon lo que quieras en un post  selecciona el texto que quieres que salga y dale al botón de comillas de tu editor y voila que quiere decir he aquí.
No terminamos, no IMPORTANTE para poner código primero tienes que transformarlo a texto plano, no puedes ponerlo tal cual ya que podría crear conflictos con el propio código del sitio al interpretarlo y te dirás como hacerlo ? Existen infinidad de sitios gratuitos para esta tarea aquí te dejo uno blogcrowds tan fácil como poner el código HTML que quieres transformar y darle al botoncito PARSE parchear, lo copias y listo ya puedes incluirlo en la caja para ofrecer tu código al Mundo. 
Que lo disfruten


Personalizarlo, colores Códigos de colores HTML 


Este tutorial ha sido posible gracias a la información de sitios como 
Ciudad Blogger   CSS hazunaweb   Vagabundia  entre otros.

0 comentarios:

Comentarios

Entradas recientes Entradas antiguas Inicio
Licencia Creative Commons
Optical Photo por Josep Carmona se encuentra bajo una Licencia Creative Commons Reconocimiento-CompartirIgual 3.0 Unported.
Permisos que vayan más allá de lo cubierto por esta licencia pueden solicitarlos en nuestro apartado de Contacto