Ayuda para el Blog®

Icono para la lista de Etiqueta (Categoría o Sección)
» Ir a diseño de la plantilla. Después clic en Edición de HTML (no Expandir plantillas de artilugios) y agregas el siguiente código entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

#Label1 li {
list-style:none;
padding-left: 18px;
background: transparent url(http://Aquí-la-dirección-del-icono) no-repeat center left;
}

Explicación:
- La lista de etiquetas están definidas con la clase Label1.
- La propiedad list-style, especifica el tipo de marcador de artículos de lista.
- La propiedad padding-left, describe cuanto espacio colocamos entre el borde izquierdo y el contenido.
- En el background, la url correspondiente al icono.
** Estos iconos tienen que ser: 16px por 16px.
** Terminando de leer este post, te proporciono 2 páginas de iconos.

Icono para los Comentarios
Es el mismo paso cuando agregas un icono a la lista de Etiqueta. En este caso he puesto dos códigos: en el primero el icono aparece al costado de la palabra comentario y el segundo un icono al lado del nombre del autor.

.post-comment-link {
padding-left:20px;
padding-top:5px;
background: url(http://Aqui-la-direccíón-del-icono) center left no-repeat;
}

#comments dl dt {
font-weight: bold;
font-style: italic;
margin-top: 35px;
padding: 1px 0 0 18px;
background: transparent url(http://Aquí-la-dirección-del-icono) top left no-repeat;
}

Icono para el Autor (Publicado por)
Es el mismo paso cuando agregas un icono a la lista de Etiqueta.

.post-author {
padding-left:20px;
padding-top:5px;
background: url(http://Aquí-la-dirección-del-icono) center left no-repeat;
}

Icono al costado de la palabra Etiqueta
Es el mismo paso cuando agregas un icono a la lista de Etiqueta.

.post-labels {
padding-left:20px;
padding-top:5px;
background: url(http://Aquí-la dirección-del-icono) center left no-repeat;
}

Páginas de Iconos
famfamfam
FreeIconsWeb

[+/-]

Vista de post en Etiquetas/Páginas de archivos -53-

Esto consiste en mostrar sólo los títulos de los post cuando seleccionas una Etiqueta (Categoría o Sección), el cual está provisto de un [+/-] para poder expandir/reducir y leer el post.
Por ejemplo, cuando le das clic en Blogger (nuevo) se mostrará todos los post con su respectivo título pero no la información y al hacer clic en [+/-] recién podrás leer el artículo completo.

1. Ir a plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Después agregas el siguiente código entre <head> y </head>. Preferible que lo pegues al final (antes de </head>), porque puede ser que en algún momento, no quieras esto y se te va hacer más fácil poder ubicarlo para borrarlo.

2. Luego buscas lo siguiente:

<b:includable id='main' var='top'>

<div class='blog-posts'>
<b:include data='top' name='status-message'/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

<b:include data='post' name='post'/>

<b:if cond='data:blog.pageType == "item"'>
<b:include data='post' name='comments'/>
</b:if>
</b:loop>
</div>

3. Agregas lo siguiente antes de <b:includable id='main' var='top'>

<b:includable id='PeekABooPost' var='post'>
<div class='post uncustomized-post-template'>
<table><tr>
<td width='40px'>
<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>
</td>
<td>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
</td>
</tr></table>
<div class='post-body' expr:id='data:post.id' style='display:none'>
<p><data:post.body/></p>
<div style='clear: both;'/> 
</div>
</div>
</b:includable>

4. Seguimos en la Plantilla. Una vez que han pegado el código anterior, ahora pegas lo siguiente (lo que está con color azul) después de:

5. Finalmente, guardarmos los cambios.

[+/-]

Generador de Botones -52-

[+/-]

¿Cómo poner una imagen de fondo en el blog? -51-

[+/-]

Cambiar la cabecera por una imagen (Plantillas Nº 867 y Nº 865) -51-

Cabecera de página.- Visualiza el título y la descripción de tu blog.

Para insertar una imagen en la cabecera necesitamos agregar simplemente un código. Esto prácticamente resulta para la plantillas Nº 867 y Nº 865.
Te recomiendo que no te arriesgues hacer esto con las otras plantillas porque la modificación no va hacer igual para las demás. Quizás esto te puede servir simplemente para guiarte.

Para poner una imagen en la cabecera de las plantillas Nº 867 y Nº 865 tendremos que hacer lo siguiente:
1. Ir a Plantilla, después a Edición de HTML y clic en Expandir plantillas de artilugios. Entonces, ahora buscamos el div con el id header-wrapper.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='PruebaBlog (cabecera)' type='Header'>
<b:includable id='main'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

2. Una vez ubicado <div id='header-wrapper'>, tendrás que reemplazar todo el código anterior por lo siguiente (lo que esta en azul agregas):

<div id='header-wrapper'>
<div id='header'>
<a href="http://aquí-la-dirección-de-tu-blog">
<img src="http://aquí-la-dirección-de-tu-imagen" /></a>
</div>
</div>

* Al reemplazar todo esto, te saldrá un mensaje diciendo:
Están a punto de suprimirse los artilugios
Por favor, confirma que los siguientes artilugios deben borrarse. Se borrará toda la información de configuración de los artilugios.

Header1

Le das un clic en: Confirmar y Guardar

- La imagen que vas a colocar en la cabecera tiene que tener un ancho de 744 px y un alto de 130 px. Estos valores son simplemente un aproximado.
- Si deseas agregarle un ancho y un alto a tu imagen tendrás que hacer lo siguiente:

**Por ejemplo he subido una imagen en Photobucket y he pegado lo siguiente:

Y he añadido al último esto: /

Cambiar el título por una imagen
Cambiar la descripción por una imagen

[+/-]