Ayuda para el Blog®

Este menú desplegable consiste en hacer clic al botón y se muestra una lista de opciones.

1. 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 casi al final (antes de ]]></b:skin>)

.texthidden {
display:inline
}

.shown {
display:block
}

2. Entre ]]></b:skin> y </head> agregar lo siguiente:

- Guardar cambios.

3. Ir a Elementos de la página, clic en Añadir un elemento de página y seleccionar HTML/Javascript. Ahí tendrán que agregar el siguiente código:

<a href="javascript:void(0);" onclick="expandcollapse('musica')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="musica" class="texthidden">
<li><a href="http://www.radioblogclub.com/" target="_blank">Radio Blog</a></li>
<li><a href="http://www.goear.com/index.php" target="_blank">Goear</a></li></ul>

<a href="javascript:void(0);" onclick="expandcollapse('video')"><img border="0" src="http://dirección-de-la-imagen-del-botón"/></a><br/>

<ul id="video" class="texthidden">
<li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li>
<li><a href="http://www.veoh.com/" target="_blank">Veoh</a></li></ul>

**Como punto de partida hemos hecho un menú de música en el que aparece una lista: Radio Blog y Goear. Además, hay un menú de video en el que aparece: You Tube y Veoh

- En esta parte de código puedes repetirla cuantas veces quieras, ustedes tendrán que armarlo a su gusto.
- Solo tendrán que agregar el botón, la dirección de la página con su respectivo nombre.
- Además, puedes añadir una imagen justo antes del texto que aparece la lista.

Explicación:
- Si por ejemplo, a parte de música deseamos poner video entonces al crear otro botón, en expandcollapse('musica') cambiamos en donde dice música por video. Además, el id=”música” lo modificamos por video.
- En <img border="0" src="http://direccion-de-la-imagen"/>, viene hacer la imagen del botón.
- En donde dice Radio Blog, Goear, You Tube, vienen a ser una lista.
- En <a href="http://www.radioblogclub.com/" target="_blank">, viene hacer el enlace de la página enlazada.

Ejemplo:

Crear botones en Buttonator

Vía: A Consuming Experience

[+/-]

Agregar Emoticones en el blog -68-

[+/-]

Cambiar el color de fondo de los comentarios -67-

Consiste en agregar un color de fondo a los comentarios, el cual puedes asignar un color de fondo para el autor del blog (un color de texto también) y otro para el autor de los otros blogs.

1. Ir a diseño de la Plantilla, luego a Edición de HTML y clic en Expandir plantillas de artilugios. Buscar el id ='comments-block'.

* Agregar lo que está de color rojo.

3. Seguimos en la plantilla. Entre <b:skin><![CDATA[ y ]]></b:skin> buscar lo siguiente (estilo del comentario):

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
Sigue más código de estilo
…..
…..
….
.deleted-comment {
font-style:italic;
color:gray;
}

4. El siguiente código lo deje para el último porque se refiere al estilo del comentario (modificado), el cual se podrá realizar cambios utilizando tu criterio. Una vez ubicado el estilo del comentario lo reemplazamos por lo siguiente:

#comments {
margin:0;
}
#comments h4 {
margin:0 0 10px;
padding-top:.5em;
line-height: 1.4em;
font: bold 110% Georgia,Serif;
color:#333;
}
#comments-block {
line-height:1.6em;
}
.comment-author {
background:#e6e6e6 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibGlah3HIk1MEf9iNGfA8hmsULONeqGmmB88b9IrlrEYSz-3XQKqY78k6a8TfjWos2APUo59-wpzq-852lUIC822poQ0GFhYXYIYA_X6QqofwXViWKXUYlxulpoY-k4oAn0B_8iw/s200/page_edit.png") no-repeat 2px .35em;
margin:.5em 0 0;
padding:3px 0 0 18px;
font-weight:bold;
}
.comment-body {
background:#eeeee6;
margin:0;
padding:7px 7px 7px 7px;
}
.comment-body p {
margin:0 0 .5em;
}
.comment-body-author {
background:#e5e5e5;
margin:0;
padding:7px 7px 7px 10px;
}
.comment-body-author p {
font-size:105%;
margin:0 0 .2em 0;
color:#6728B2;
text-decoration:bold;
}
.comment-footer {
background:#e6e6e6;
margin:0 0 .5em;
padding:0 0 .75em 20px;
color:#996;
}
.comment-footer a:link {
color:#996;
}
.deleted-comment {
font-style:italic;
color:gray;
}

Explicación:
- En .comment-author, aparece el nombre del autor y puedes cambiar el color de fondo y la url que viene a ser el icono
- .comment-body, ahí se visualiza el color de fondo para los que dejan comentarios.
- .comment-body-author, ahí se visualiza el color de fondo para el autor del blog.
- .comment-body-author p, puedes cambiar el color de texto del autor del blog.
- .comment-footer, aparece la fecha y puedes cambiar el color de fondo.

Vía: Stubborn Fanatic

[+/-]

¿Cómo poner un texto en movimiento en la barra de estado y título? -63-

La barra de título, está en la parte superior y nos indica la página web en la que el navegador está situado.

La barra de estado, nos aparece en los exploradores por lo general abajo y suele mostrar información sobre la página.

Para agregar el siguiente código tienes dos formas de agregarlo:
- Ir a diseño de la plantilla, clic en Añadir un elemento de página y seleccionas HTML/Javascript.
- Ir a diseño de la plantilla, luego Edición de HTML y lo agregas antes de </head>

Para la barra de título

** setTimeout("titlemove()",140), esta línea se refiere al movimiento del texto, si deseas le cambias el valor de 140 por otro valor.
Probablemente el texto lo veas muy junto o no se aprecie bien, entonces en Opciones, Básico y en el Título le agregas guiones o puntos. Pero acuérdate que cambiaria el titulo de tu blog, es decir estaría con puntos o guiones.

Para la barra de estado

- En var MessageText, escribes tu mensaje.
- var DisplayLength, viene a ser la longitud de tu mensaje.
- setTimeout("ScrollInStatusBar()",100), esta línea se refiere al movimiento del texto, si deseas le cambias el valor de 100 por otro valor.

[+/-]

Personalizar la fecha de los post (entradas) -62-

Blogger coloca por defecto la fecha de los post en una sola línea, asi que en esta oportunidad vamos a cambiar la apariencia de la fecha en un estilo diferente, el cual podrás personalizarla a tu gusto.

1. Ir a Configuración. Después a Formato. De ahí, en donde dice: Formato de cabecera de fecha, escogemos la siguiente opción:

Clic en la imagen para agrandarla

* No te olvides que tienes que Guardar valores.

2. 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.

3. Después buscas lo siguiente:

4. Una vez ubicado, reemplazas <data:post.dateHeader/> por lo siguiente:

<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>

5. Seguimos en la Plantilla. El siguiente código lo deje para el último, porque se refiere al estilo de la fecha, el cual se podrá realizar cambios, utilizando tu criterio.
El código lo tendrás que pegar entre <b:skin><![CDATA[ y ]]></b:skin>. Preferible que lo pegues casi al final (antes de ]]></b:skin>), porque puede ser que en algún momento, no quieras esto y se te va hacer mas fácil poder ubicarlo para borrarlo.

#fecha {
display: block;
margin: 0px 1px;
float: right;
padding: 5px;
color: #464646;
background: #cccccc;
border: #cccccc 1px solid;
text-transform: capitalize;
}

.fecha_dia {
display: block;
font-size: 16px;
font-weight:bold;
}

.fecha_mes {
display: block;
font-size: 10px;
}

.fecha_anio {
display: block;
font-size: 10px;
}

Explicación:
#fecha {
En margin, ver aquí.
float, puedes cambiarlo de posición, sea left o right.
padding, puedes aumentar o disminuir el formato de la fecha.
color y background, puedes modificar los colores del texto como el fondo.
border, cambiar el color y en 1px por otro valor, sea 2 ó 3 (aumenta mas el borde).

.fecha_dia, .fecha_mes y .fecha_anio {
En font-size, puedes cambiar el tamaño de la letra.

Vía: Recursos Blog & Web

[+/-]

¿Cómo utilizar un bloque entrecomillado? (blockquote) -61-

[+/-]

Últimos Comentarios (2) -60-

[+/-]

¿Cómo cambiar la cabecera por una imagen? -59-

[+/-]

Encuesta para el Blog: Free Website Polls -58-

[+/-]

Ocultar/Eliminar el mensaje: Mostrando entradas... -57-

[+/-]

Imágenes aleatorias en la cabecera -56-

[+/-]

Cambiar la Plantilla (Template) del Blog (2) -55-

[+/-]

Poner un icono en la lista de Etiquetas (Categoría o Sección), Comentarios, Autor... -54-

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.

[+/-]