Cómo está hecho mi blog.

Hola a todos mis amigos lector@s de El Rincón del Sueko. Esta entrada tiene como fin responder a muchas preguntas que me habéis hecho respecto a cómo he configurado el blog para que salga ésto o lo otro, o cómo hago para publicar según qué cosas. Vaya que pedís que os diga mi know-how.

Pues en realidad yo hago como todo el mundo que no sabe sobre una materia particular: investigando por Internet aunque, a veces, encontrar justo aquello que estamos buscando no es tan fácil como parece.

Lo primero que quiero decir es que nadie se piense que un día me senté en el portátil y, después de media hora... ¡tachán! el blog es tal y como se ve ahora mismo. Para nada. Ha sufrido muchísimos cambios en su apariencia gracias a que un día localicé un canal de Youtube que es realmente extraordinario: teodorus maximus.

Este canal de Youtube tiene, a día de hoy, 114 vídeos explicativos de cómo programar nuestro blog para que aparezcan determinadas cosas modificando la plantilla escogida. Evidentemente no he revisado todos, sólo aquellos que, por el título, podían aportar a este blog algo interesante. Desde aquí, mil gracias a esta gran bloggera.

Por otro lado tenemos el tema de las entradas o posts. En realidad un blog no deja de ser una página web y, por tanto, todo bajo programación html. ¡Que nadie se asuste! No es necesario saber prácticamente nada de este lenguaje (aunque en realidad saber cositas viene muy bien). Por Internet podemos encontrar solución a todo. Sólo hace falta encontrarlo :p

Ayudas online para nuestro blog.

De momento sólo estoy usando dos: uno para introducir fórmulas y otro para hacer tablas.

En este sentido publiqué un post muy interesante de cómo introducir fórmulas. Primero se inserta un código html en nuestra plantilla y, posteriormente, usamos Daum Equation Editor para hacer la fórmula que queremos insertar. Es muy, muy fácil. Seguid los pasos del post.

Las tablas son un auténtico quebradero de cabeza para programarlas directamente en html. Así que uso un editor online para hacerlas. Dicho editor online es HTMLEditor, muy facilito también. Lo único que hago es hacer la tabla en el editor y copiar el código html que general. Una vez copiado paso al modo escritura "HTML" y pego directamente el código generado por el editor. Cuando volváis la modo "Redactar" la tabla insertada se verá perfectamente. El color que uso en las casillas de título es el #085563 y para centrar la tabla inserto este otro código: table align="center".

Botón Imprimir.

Para insertarlo modificaremos la plantilla incluyendo un nuevo Gadget HTML/Javascript. En él insertaremos este código:

<div style="text-align: center;"><h1><a href="javascript:print()"><span style="font-size: x-large;"><h1><img border="0" height="65" src="https://3.bp.blogspot.com/-SbeVT26An3w/WCdiP63T45I/AAAAAAAAHoo/rVdT5-wAvKoFRmbE6Uq5cYJxll-F7v7lwCLcB/s400/printer.png" width="65" /></h1></span></a></h1></div>

El efecto es la impresión de la entrada que estemos viendo y la inclusión del icono de la impresora:


Yo lo que hice fue escoger un icono que me gustó, lo subí a mi biblioteca de imágenes del blog y modifiqué su tamaño a mi gusto.

Programación en html de la plantilla.

Como decía antes, la gran mayoría de modificaciones que he hecho en el blog, se deben a los vídeo-tutoriales de  teodorus maximus. Voy a hacer una relación de todos ellos y os pondré el link del vídeo en cuestión.

De esta manera será mucho más didáctico.

  • Botón imprimir. Vídeo. Ahora bien. Justamente en éste hice una modificación personal. Mi código es el siguiente:

<div style="text-align: center;"><h1><a href="javascript:print()"><span style="font-size: x-large;"><h1><img border="0" src="http://www.cgssl.es/MunigexHelp/img/cmImprimir.png" /></h1></span></a></h1></div>

        Con ello os aparece como botón esa pequeña impresora ¿Chulo o no?


  • Flecha de scroll. En este vídeo explica como poner una flecha o un texto que al darles suba el blog hacia la parte de arriba en tu blog de blogger de forma fácil y rápida. Se hace a través de Scrolltotop. Facilísimo.

  • Cómo numerar las paginas de tu blog. Aunque parece lioso no lo es si seguís el vídeo al pie de la letra. Y el efecto es realmente bueno. Recordad primero hacer una copia de seguridad de vuestro blog.


Códigos html interesantes dentro de las entradas.

No uso demasiados. Pondré sólo los más comunes. Para los colores os aconsejo esta págína de consulta: Virtualnauta.

  • Para hacer el recuadro de abajo usar el código:  <fieldset>

  • Spoiler: botón que se usa para esconder un texto. El código es el siguiente:

<DIV ALIGN=center><input type="button" onclick="if(document.getElementById('spoiler1') .style.display=='none') {document.getElementById('spoiler1') .style.display=''; this.value = 'Ocultar'; }else{document.getElementById('spoiler1') .style.display='none';this.value = 'Mostrar'; }" value="Mostrar"/><div id="spoiler1" style="display:none">

...Aquí el contenido que quieres ocultar...

</div></div>

De igual forma deberás cambiar el ID spoiler1 (todas las veces que aparece) cada vez que quieras añadir uno nuevo: spoiler2, spoiler3...


  • El efecto "periódico" Lo uso muchas veces para destacar una idea, definición o conclusión:

<div class="link-dld" style="float: left; margin: 0px 20px 5px 0px; padding: 0px; width: 146px;">
<div class="mod-dld" style="height: 145px; margin: 0px; overflow: hidden; padding: 0px;">
<h3 class="related-link" style="color: #686953; font-size: 15.5px; font-style: italic; font-weight: normal; line-height: 23.3999996185303px; margin: 0px; padding: 0px;">
«Remedio procesal que la ley concede a quien se considera titular de un derecho de crédito que entiende que debe ser satisfecho con preferencia al del acreedor ejecutante.»</h3>
</div> </div>



  • Otro formato bonito es con una raya vertical. Se hace con el comando blockquote:

<blockquote style="border-left-color: rgb(159, 152, 143); border-left-style: solid; border-left-width: 4px;font-family: Cambria, Georgia, 'Times New Roman', Times, serif; font-size: 14.3999996185303px; font-style: italic; line-height: 24px; margin: 24px 50px; padding-left: 12px;">
Espero que este post haya sido de vuestro interés. Me encantaría, más que nunca, ver vuestras valoraciones y leer vuestros comentarios a través de las herramientas que este blog pone a vuestra disposición</blockquote>

Espero que este post haya sido de vuestro interés. Me encantaría, más que nunca, ver vuestras valoraciones y leer vuestros comentarios a través de las herramientas que este blog pone a vuestra disposición
Por último, para hacer la promoción de las entradas, recorto la url con Google URL Shortener.

A medida que vaya haciendo cambios los iré explicando aquí. Así también me servirá a mí de recordatorio.

Click para abrir la ventana emergente

Espero que este post haya sido de vuestro interés. Me encantaría, más que nunca, ver vuestras valoraciones y leer vuestros comentarios a través de las herramientas que este blog pone a vuestra disposición.

Muchísimas gracias a tod@s. ¡Salu2! :-)

#rincondelsueko en Twitter, Facebook y Google+

No hay comentarios:

Publicar un comentario