Mensaje de bienvenida sobre las entradas de tu blog
En esta entrada aprenderemos a crear una nueva sección sobre las entradas que mostrará un elemento de página o gadget html-javascript con un mensaje de bienvenida sólo visible en la página principal o portada del blog.
Puede verse el resultado en la siguiente imagen:
Localizamos este código:
Ahora, justo antes, añadimos el bloque que creará la nueva sección sobre las entradas:
Buscamos la etiqueta ]]></b:skin> y justo antes incluimos el siguiente css:
Puede modificarse el color de fondo (#92DA8B) en background:#92DA8B; haciendo uso de la tabla de colores. También se puede editar el color del texto, reemplazando #333333 o #FFFFFF por el código de otro color.
Ahora, antes de </head> agregamos esta línea:
Guardamos la plantilla.
A continuación accedemos al apartado de Diseño > Elementos de la página y pulsamos sobre el enlace 'Editar' del gadget titulado 'Mensaje de Bienvenida'.
Insertamos este código en su interior:
Debe reemplazarse URL DE TU IMAGEN por la dirección de la miniatura de imagen a mostrar.
En TEXTO PRIMERA LÍNEA introduciremos el primer párrafo del mensaje de bienvenida y así sucesivamente.
En TEXTO CON ENLACE puede incluirse una frase que contenga un enlace de suscripción en su interior. La dirección del enlace (o feed) se insertará en URL PAGINA mientras que el texto que mostrará el link debe escribirse en donde dice ESTE ES EL ENLACE.
La única función de <p> y su cierre </p> es la de crear saltos de línea dejando un espacio en blanco. Para mostrar el texto sin saltos de línea bastará con eliminarlos.
Guarda el gadget para terminar.
Puede verse el resultado en la siguiente imagen:
Diseño>Edición de HTML>expandimos artilugios
Localizamos este código:
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
</b:section>
Ahora, justo antes, añadimos el bloque que creará la nueva sección sobre las entradas:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='Mensajbljposjt' id='Mensajbljposjt' showaddelement='yes'>
<b:widget id='HTML68' locked='false' title='Mensaje de Bienvenida' type='HTML'/>
</b:section>
</b:if>
Buscamos la etiqueta ]]></b:skin> y justo antes incluimos el siguiente css:
/* Mensaje de bienvenida
----------------------------------------------- */
#Mensajbljposjt h3 {
color: #FFFFFF; /* Color del titulo (¡Bienvenid@! */
}
#Mensajbljposjt {
color:#333333; /* Color del texto */
background:#92DA8B; /* Color del fondo */
}
Puede modificarse el color de fondo (#92DA8B) en background:#92DA8B; haciendo uso de la tabla de colores. También se puede editar el color del texto, reemplazando #333333 o #FFFFFF por el código de otro color.
Ahora, antes de </head> agregamos esta línea:
<link href='https://sites.google.com/site/scriptsbalcon/b/Mensajbljjtepos.css' rel='stylesheet' type='text/css'/>
Guardamos la plantilla.
A continuación accedemos al apartado de Diseño > Elementos de la página y pulsamos sobre el enlace 'Editar' del gadget titulado 'Mensaje de Bienvenida'.
Insertamos este código en su interior:
<div id="Mensajbljposjt">
<h3>¡Bienvenid@!</h3>
<img src="URL DE TU IMAGEN"/>
<p>TEXTO PRIMERA LÍNEA</p>
<p>TEXTO SEGUNDA LÍNEA</p>
<p>TEXTO TERCERA LÍNEA</p>
<p>TEXTO CON ENLACE <a href="URL PAGINA">ESTE ES EL ENLACE</a></p>
</div>
Debe reemplazarse URL DE TU IMAGEN por la dirección de la miniatura de imagen a mostrar.
En TEXTO PRIMERA LÍNEA introduciremos el primer párrafo del mensaje de bienvenida y así sucesivamente.
En TEXTO CON ENLACE puede incluirse una frase que contenga un enlace de suscripción en su interior. La dirección del enlace (o feed) se insertará en URL PAGINA mientras que el texto que mostrará el link debe escribirse en donde dice ESTE ES EL ENLACE.
La única función de <p> y su cierre </p> es la de crear saltos de línea dejando un espacio en blanco. Para mostrar el texto sin saltos de línea bastará con eliminarlos.
Guarda el gadget para terminar.
0 comentarios:
Publicar un comentario
¡Gracias por comentar!