Personalizar gidget "Entradas Populares"


Hola, hola!
Bonito y bendecido inicio de semana tengan todos ustedes la entrada de esta semana es cortita, cortita pero muy practica y es en respuesta a todas las solicitudes (En realidad fueron 5), que me hicieron para que les contara como personalizar el gidget "entradas populares".



En mi caso cada miniatura se vuelve opaca.
Como ya te habrás dado cuenta cada miniatura esta redondeada y con efecto hover (El efecto hover es básicamente lo siguiente, cuando pasamos el puntero sobre dicho elemento gráfico, el aspecto de este cambia, ya sea en color o forma según sea el caso). He de confesar que esta modificación me costo trabajo ya que soy medio burris con el HTML, obtuve varios códigos, seguí las instrucciones al pie de la letra y no mas nada, el cambio no me funcionaba. Pero por fin lo he logrado y es muy sencillo simplemente tenia que cambiar de lugar el código, ya que donde me indicaban lo hiciera no me funcionaba y me las tuve que arreglar solita... te voy a proporcionar dos códigos para conseguir dos resultados diferentes. Así que demos paso al tutorial...
Primero que nada es importante te descargues los códigos que hemos preparado en un documento en Word y que dejamos AQUÍ.
En el Ejemplo #1 tenemos:

Color de fondo, así como forma y color del borde el cual cambia al pasar el puntero sobre el.

En el ejemplo #2:

Color y forma del borde, así como tamaño y tipo de letra del titulo de cada entrada, en mi ejemplo instalamos directamente a la plantilla la fuente Homemade Apple desde Google fonts.

Nos dirigimos a Diseño antes de trastear algún aspecto del editor HTML, modificamos las preferencias del gidget de "Entradas populares"

Guardamos disposición y nos vamos a:
Plantilla
Opciones avanzadas
Agregar CSS
y en la cajita pegamos alguno de los dos códigos, la ventaja aquí es que podemos ir visualizando cada cambio que se le haga, pero no en todos los casos funciona.

Si por alguna extrañisima razón, no te funciona el código, nos regresamos a:
Plantilla
Editar HTML
y buscamos b:skin

Se nos desplegaran un titipuchal de codigos justo aqui presionamos Ctrl+f, y en el buscador pegamos:
Widgets
Antes de Posts o despues de una } llavecita como esta damos un par de intros y pegamos el código que deseamos, haciendo las modificaciones correspondientes para adaptarlos a nuestro diseño.

Yo se que puede estar un poco confuso pero si nos guiamos con las imágenes no hay pierde...
Cada linea de código tiene una pequeña descripción, para saber que acción realiza, según los aspectos que cambiemos.
Recuerda que los códigos te los dejo AQUÍ, cualquier cosa ya sabes me dejas un comentario y lo resolvemos juntos.Un besito grande y nos leemos luego...


Fuente: este post proviene de Imagina y crea tu mismo, donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
¿Qué te ha parecido esta idea?

Esta idea proviene de:

Y estas son sus últimas ideas publicadas:

Carteles con frases bonitas

¡Muy buenas a todos!, hoy estoy muy ilusionada con este post ya que marca el regreso de los artículos semanales al blog, que durante tres meses se mantuvo pausado debido a diversos contratiempos que s ...

Mensaje navideño + regalito.

Hola, hola Hace ya un tiempo que no me paso por aquí, pero aunque una quiera es imposible entre la escuela y que esto y que lo otro, no se puede abarcar todo verdad, pero no podía dejar pasar una fech ...

Recomendamos

Relacionado

recursos blog tutoriales

Tutorial: Boton "pin it" personalizado actualizado

Hola! hola!!! Hoy vengo a enseñarte un tutorial para personalizar tu blog, se trata del código html para poner el boton "pin it" pero personalizado. Si tu ya lo tenias puesto en el blog te habrás dado cuenta que desde hace tiempo ya no funciona, ya no te aparece la imagen que tenias puesta y no te deja pinear las fotos :( y eso se debe a que el javascript dejo de funcionar. Por lo visto ...

CSS: Nivel B1

Personalizar un formulario de suscripción

Tener una lista de suscripción es muy importante para captar seguidores más fieles que los que captaríamos en cualquier red social como Twitter o Facebook, sin embargo muchos piensan que una vez hecha la lista vale con pegar el código que nos da nuestro proveedor de e-mail marketing y ya nos lloverán los suscriptores, por lo que nos encontramos páginas con campos de formulario que se presentan con ...

diy manualidades blogger ...

¿Como centrar los widgets en blogger?

Hola, hola! Bonita y bendecida semana, este mes me propuse hacerle un cambio de look al blog,básicamente tunearlo pero yo sólita, nuevas tipografías, paletas , fondos y mas... Pero me tope con un inconveniente y al parecer no soy la única, anteriormente me proporcionaron un codigo CSS para centrar los Widgets, yo supuse que todos, toditos los widgets se centrarían, así como el titulo de cada uno ...

Cupones descuentos ofertas ...

ALERTAS DE CUPONES PARA TARGET, FOREVER 21, MUSEO GRATIS Y MAS...

Tu dosis semanal de cupones ya está aquí. Cada semana voy a compartir con usted cupones y ofertas que encuentro a través de la web. Yo voy a hacer el trabajo sucio para que tu no tengas de nada que preocuparte, sólo ven por aquí cada semana y encuentra cupones y oferta para comenzar a ahorrar. OBTEN HASTA UN 205 DE DESCUENTO EN CUPONES Y OFERTAS EN TARGET También asegúrese de revisar la sección d ...

diseño freebies gratis ...

Los mejores Recursos Premium para diseñadores

¡Holaaa! Pues el día de hoy traigo una entrada cortita con el tema del diseño. Realmente yo no soy diseñadora pero aprender me encantaría, es un objetivo para mí estudiar la carrera de diseño, peor bueno eso será a futuro, y como una apasionada me declaro también adicta a los recursos de diseño, los gráficos, la ilustraciones, las tipografías, y todo todo. Y desde que empecé con esto del diseño ...

Diseño Web WordPress WordPress cosas de wordpress

WordPress 4.9: Mejoras noviembre 2017

Bienvenid@ a un nuevo post de Coach2Coach. WordPress 4.9: Mejoras noviembre 2017 WordPress 4.9 salió el viernes de la semana pasada y, si habitualmente entras en tu sitio web, supongo que ya te habrás dado cuenta de que tu sitio WordPress está listo para actualizarse. WordPress 4.9 es la segunda gran actualización de 2017. Tras la actualización anterior, la nueva versión tiene mejoras para desarro ...

Tutoriales Blogging Estilos

Como poner una biografía debajo de las entradas.

Feliz miércoles ! Se siente bien estar de regreso después de varios días de tener completamente abandonado el blog. Mi familia y yo estuvimos de paseo y pudimos conocer algunos lugares que nos encantaron y nos dejaron con deseos de quedarnos más días, pero nimodo, teníamos que regresar. Me muero de ganas de compartir con ustedes todas las imágenes que tome por donde andaba. Pero hoy vengo a otra c ...

como hacer un blog

Bloquear boton derecho del raton en mi blog

Hola gente linda, Hoy vamos aprender a bloquear el botón derecho del ratón, para que nadie nos copie nuestros articulos o si deciden hacerlo que se les convierta en lidioso ese proceso, bueno empezamos para hacer esta operación vamos a ir a editar plantilla y buscamos </body> y antes de body pegamos el siguiente código: <script> // Inhabilitar el botón derech ...

blogger tutoriales variados

Como poner brillantina en el cursor o destellos

Hola, os voy a enseñar a poner destellos en el cursor que va saliendo cuando lo movéis...Es muy sencillo y queda muy bonito... Lo 1 que tenemos que hacer es una copia de nuestro blog, (por si algo sale mal) Bueno os dejo los pasos en imágenes, aunq también haré el vídeo. 1 nos vamos a diseño 2 le damos a crear o restablecer copia de seguridad 3 baja ...

SEO JaviLazaroSEO redireccion ...

Las redirecciones o cómo guiar a Google.

Otra semana más estamos aquí para hablarte sobre la redirecciones, aparte de avisarte de que estamos con una cosa entre manos bastante grande y que lleva su tiempo pero que cuando te lo enseñe vas a flipar. ¿Qué son las redirecciones? Bueno pues la redirección que (como bien sabes aquí te habla la gente como si viniera de la parte de alta de Wisconsin) también lo llaman redirect y son esas codifi ...