Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta HTML. Mostrar todas las entradas

Cómo crear vínculos en el mismo artículo o entrada

Los enlaces no sólo facilitan la navegación al lector sino que también pueden vincular apartados dentro de un artículo extenso en donde se crea un índice con los temas tratados.

Este índice permite acceder a cualquier apartado con un click, sin abandonar la entrada.

Supongamos que nuestro índice se compone por la siguiente estructura:
Primer apartado
Segundo apartado
Tercer apartado

El primer paso constará de crear la tabla de contenido. Para ello utilizamos el atributo href al que atribuímos un nombre único (en lugar de una URL):
<a href="#primero">Primer apartado</a>
<a href="#segundo">Segundo apartado</a>
<a href="#tercero">Tercer apartado</a>
Seguidamente y haciendo uso del atributo name especificamos el área a donde conducirá cada enlace.

Para el primer apartado emplearíamos lo siguiente:
<a name="primero">Primer apartado</a>

Este sería el contenido perteneciente al primer apartado del artículo, como podría ser la introducción.

Haremos lo mismo para los apartados restantes. Debe tenerse en cuenta que el nombre a utilizar en el enlace (primer paso) y posteriormente en el apartado (segundo paso) debe ser único.

Si lo repetimos en otro apartado, el enlace no conducirá al tema apropiado y acudirá al área en donde tenemos el nombre correcto.

Al poner cualquier código en la entrada, conviene hacerlo en la pestaña de 'Edición de HTML' y no en la de 'Redactar'.



En el ejemplo se presenta un artículo 'falso'. El truco ha sido utilizado para crear, por ejemplo, numerosos artículos acerca de los periquitos.

Este tutorial fue escrito por Jaime en el Balcón de Jaime, ¡Visitalo !

Gracias por tu visita al Blogger Magazine, las últimas novedades de los mejores maestros bloggers.

Comparte fragmentos de códigos HTML u otras notas


¿Necesitas compartir cualquier fragmento de código con cualquier otro usuario? SnipSource es una opción para ello, ya que sin necesidad de registros, incluirás el texto perteneciente a tu código junto a tu propio código, obteniendo para ello una URL específica que será la que entregues a otro u otros usuarios según las circunstancias. A la hora de introducir el código, también indicarás a qué lenguaje de programación pertenece, o si por el contrario, entregas texto plano.
Interesante es que además puedas añadir una contraseña o la verificación mediante captcha, que son las opciones extras de las que puedes disponer para añadir seguridad a tu código si no deseas que cualquiera, por puro azar, pueda acceder al mismo.
No hay necesidad de registro de usuario alguno, es fácil de utilizar y enseguida tendrás la URL de dicho código.

Dividir el SideBar en dos

Una cosa que me han preguntado bastante por msn y por email es como dividir la sidebar de nuestro blog en dos. Hoy les voy a enseñar como tener una sidebar doble debajo de la sidebar de nuestro blog. No es muy dificil, pero les recomendaría que presten mucha atención a los siguientes pasos:
4003229623 Sidebar doble debajo de la sidebar en Blogger
[1] Para empezar vamos a Diseño > Edición de html y buscamos #sidebar-wrapper, deberías encontrar algo como esto (lo rojo puede varior según las modificaciones que hayamos hecho antes):
#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
[2] Justo debajo del código presentado anteriormente debemos pegar lo siguiente:
#sidebar-wrapper-nueva {
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#columna-izda {
width: 48%;
float: left;
}
#columna-dcha {
width: 48%;
float: right;
}
[3] Modificamos lo que está en rojo por el ancho de nuestra sidebar. Por ejemplo, si nuestra sidebar tiene un ancho de 200 px, cambiamos lo que está en rojo por el número 200.
[4] Ahora busca en tu plantilla <div id='sidebar-wrapper'> y deberás ecnontrar algo como esto:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
[5] Debajo pegamos lo siguiente:
<div id='sidebar-wrapper-nueva'>
<b:section class='sidebar' id='columna-izda' showaddelement='yes'>
</b:section><b:section class='sidebar' id='columna-dcha' showaddelement='yes'>
</b:section>
<div style='clear: both;'/>
</div>
Con esto ya será suficiente para que tengamos nuestra sidebar doble debajo de la sidebar común de nuestro blog. Un saludo.
Nota: Debemos tener en cuenta que si el espacio de nuestra sidebar es muy pequeño, el diseño de nuestra sidebar dividida en dos será un poco feo.




Vía
Related Posts Plugin for WordPress, Blogger...