Cambiar los iconos de los gadgets en las Vistas Dinámicas

16 de septiembre de 2014 3 comentarios ,
Pese a que las plantillas de Vistas Dinámicas no son 100% personalizables hay quienes prefieren usarlas por la forma como se muestran las entradas. Y aunque no se puedan personalizar del todo hay ciertas cosas que sí podemos modificar, en este caso veremos cómo cambiar los iconos de los gadgets de la sidebar.

Los iconos originales de estas plantillas son blancos, y muy sobrios. No hay nada de malo en ello, pero quizá muchos quieran añadir unos iconos mas acorde a la temática del blog, o al gusto del autor. Así que vamos a ver cómo cambiarlos.


¿Recuerdas la entrada para poner iconos en el gadget de Páginas? Pues el método es el mismo, usaremos el selector :nth-of-type para encontrar el gadget de la sidebar y reemplazar su imagen.

Lo único que tienes que hacer es ingresar a Plantilla | Personalizar | Avanzado | Añadir CSS, ahí agrega lo siguiente:

.ss, #gadget-dock > div:nth-of-type(1) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(2) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(3) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(4) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(5) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(6) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(7) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(8) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(9) .gadget-icons img,
.ss, #gadget-dock > div:nth-of-type(10) .gadget-icons img {
display: none !important;
}

#gadget-dock > div:nth-of-type(1) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(2) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(3) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

#gadget-dock > div:nth-of-type(4) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ya sólo deberás poner la URL de las imágenes donde se indica. La primera URL corresponde a la imagen del primer gadget, la segunda al del segundo gadget y así sucesivamente.

El código está preparado para los cuatro primero gadgets de tu sidebar, si tuvieras más sólo añade un fragmento como este por cada gadget extra que tengas:

#gadget-dock > div:nth-of-type(5) .gadget-icons {
background: url(URL de la imagen) no-repeat center !important;
}

Ese será para el quinto gadget, si tuvieras un sexto agrega otro fragmento igual y cambia el 5 por 6, etc.


TRUCO EXTRA

Si quieres mantener siempre visible la sidebar agrega este código:
#gadget-dock {
right: 0!important;
}


Como puedes ver no es nada difícil cambiar los iconos de las Vistas Dinámicas y lo mejor es que no tenemos que meternos con el HTML si no que lo hacemos todo únicamente con CSS.
Cambiar los iconos de los gadgets nos da la posibilidad de tener un blog más personalizado y único, ¿no crees?




Ticker automático para mostrar las últimas entradas del blog

6 de septiembre de 2014 92 comentarios ,

Un ticker viene siendo como una barra de noticias donde pasan los titulares tipo marquesina. Su uso básicamente es para mostrarle a los lectores cuáles son las entradas más destacadas, aunque en nuestro caso lo usaremos para mostrar las últimas entradas del blog, eso sí, de forma automática para no tener que estar agregando entradas a cada rato ni tener que estar editando nada.

Nuestro ticker de noticias lo haremos con jQuery, y sé que algunos dirán ¡pero por qué, si podemos hacerlo con la etiqueta MARQUEE!.
Ciertamente podemos hacerlo con MARQUEE, pero ese elemento no es un estándar además que su desplazamiento suele ser muy tosco con lo que muchas veces el texto se vuelve difícil de leer. También podríamos hacerlo con animaciones CSS pero en los navegadores antiguos no funcionaría, así que por eso usaremos jQuery para crear el efecto de marquesina, además podremos elegir la velocidad y dirección de desplazamiento

El demo puedes verlo aquí mismo, si pasas el cursor sobre un título el ticker se detendrá:


Y ya que lo hemos hecho automático para no batallar editando también lo haremos de un solo paso, así que su instalación es únicamente copiar y pegar. Para ello copia el siguiente código, y entra en Diseño | Añadir un gadget | HTML/Javascript y ahí pégalo.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.marquee/1.3.1/jquery.marquee.min.js" type="text/javascript"></script>
<style>
#headlines {
overflow:hidden;
position:relative;
line-height:25px;
background:#34495e; /* Color de fondo */
height:45px;
padding:0 0 0 135px;
}
#headlines h3 {
color:#fff;
font-family:Oswald, sans-serif;
font-size:17px;
font-weight:400;
text-transform:uppercase;
margin-left:-115px;
margin-top:10px;
position:absolute;
}
#headlines .right_arrow {
padding:0 38px 0 110px;
display:block;
background:url(//lh6.googleusercontent.com/--o4encAx1Tc/VApRPFfbQFI/AAAAAAAALd4/kf0T7CNSvY0/s41/arrow.png) no-repeat right center;
height:46px;
line-height:46px;
position:absolute;
left:0;
top:0;
}
#ticker_post {
position:relative;
margin:0;
margin-left:20px;
height:50px;
width:auto;
}
.marquee {
width: 980px; /* Ancho del área donde se muestran las entradas */
overflow: hidden;
line-height: 45px;
}
.js-marquee a {
font-family:Oswald, sans-serif;
font-size:15px; /* Tamaño de los textos */
color: #FFF; /* Color de los textos */
padding-bottom: 20px;
text-decoration: none;
}
.ticker_separator {
color:#FFF; color: #FFF; /* Color del separador de las entradas */
margin:0 10px;
}
</style>
<div id='headlines'>
<h3>Lo Último</h3>
<div class='right_arrow'></div>
<script>
var blog_url = "http://nombre-de-mi-blog.blogspot.com";
var numero_post = 10; // Número de entradas a mostrar
</script>
<script type="text/javascript" src="http://yourjavascript.com/946415552/ticker.js"></script></div>
<div style='clear:both;'></div>
<script>
$(window).load(function() {
$('.marquee').marquee({
direction: 'left', // Dirección de la marquesina, usar left o right
duration: 25000, // Velocidad
pauseOnHover: true,
duplicated: true
});
});
</script>

En donde se indica en color rojo deberás poner el nombre de tu blog, en color verde verás dónde cambiar el color de fondo así como el número de entradas a mostrar, velocidad, y dirección de desplazamiento.
No olvides cambiar el /* Ancho del área donde se muestran las entradas */ ajústalo a la medida que necesites.
Recuerda que estamos usando jQuery así que si ya lo tuvieras elimina la primera línea del código.

Este gadget utiliza dos scripts para funcionar, ambos ya están alojados pero si lo deseas puedes descargarlos y subirlos a tu propio alojamiento para no depender de otros.

No olvides que el ticker muestra las últimas entradas del blog sin distinción de etiqueta, si quieres que muestra las últimas entradas de una etiqueta en particular tendrás que editar el archivo ticker.js y añadir lo que se muestra en color rojo:
var entries;var feed;var feed_url=blog_url.match(/\/$/)?blog_url:blog_url+"/";feed_url+="feeds/posts/default/-/Nombre-de-la-etiqueta";

¿En dónde se ve mejor? Eso depende del gusto de cada quién y del diseño de cada plantilla, usualmente los tickers de noticias se ponen arriba o de bajo de la cabecera, o arriba de las entradas, pero como dije, eso depende del gusto de cada quién.

Descargar archivos
 
Ir Arriba Ir Abajo
I Ciudad Blogger