Viajar por Europa

diciembre 31, 2011

Cambiar la apariencia del widget

Puedes acceder a la plantilla de tu blogger y modificar el fondo de un widget en particular o el tipo de letra, fuente, dimensión, dandole una aparicencia distinta a la que trae de diseño.

No te voy a proponer como va a quedar el widget en cuestión, solo voy a darte las claves para que tú puedas acceder a él y dejar la apariencia que desees sobre algún widget de tu blog. Ya sea en plantilla antigüa o en la plantilla de blogger nueva el camino es el mismo.


¿Como acceder al widget que quieres modificar?

Antes de nada, ya sabes los pasos que son siempre los mismos, primero de todo copia de seguridad de tu plantilla y despues acceder a la plantilla de HTML, yo siempre le doy "extender artilugios" aunque en éste caso no es necesario.

Ya estas dentro del HTML de la plantilla blogger,  cuyo widget quieres mejorar. Busca el widget, para acceder mejor le puedes dar un nombre, aunque una vez terminado de tunear el widget elegido lo borres.

A continuación buscas el widget (CTRL y F y pones el nombre del widget): busca la linea en la que se relaciona los widgets:

Plantilla antigüa:


<div id='sidebar-wrapper'>

        <b:section class='sidebar' id='sidebar' preferred='yes'>

<b:widget id='HTML1' locked='false' title='TITULO' type='HTML'/>

<b:widget id='HTML2' locked='false' title='TITULO' type='HTML'/>

</b:section>

      </div>


PLANTILLA NUEVA BLOGGER: Busca el nombre del widget en mi caso de ejemplo : CTRL y F y pongo en la casilla widget css y aparece la siguiente línea:

<b:widget id='HTML8' locked='false' title='widget css' type='HTML'/>

Esta línea nos indica el nombre del widget en cuestión: HTML8 y el título que le pusistes para localizarlo mejor: widget css. Hasta aquí todo fácil ¿no?.

Bueno pues localizado el widget del blog que quieres modificar ahora tendrás que ver donde colocar la modificación:

Buscas en el HTML de la plantilla de blogger: ]]></b:skin>  por encima de éste verás que se definen todos los CSS de la plantilla,, los posts, los header, footer, y como no los widget, entonces bajo el título de widget colocas #HTML8 y despues lo que desees, si quieres cambiar la apariencia cambiando el color del fondo del widget pues background :#000000  si quieres puedes definir separación entre líneas de lo que escribas dentro del widget, o el tamaño de la letra, la posición, padding, margin,  etc. Es cuestión de que vayas buscando lo que desees y vayas probando, lo mejor debajo de   /* Posts. La mejor chuleta para probar distintas opciones la tienes en la misma plantilla de blogger en las distintas líneas que hay por encima de ]]></b:skin todo es cuestión de que hagas distintas pruebas o si no acudes a pátinas de CSS y HTML:

Un ejemplo simple de lo que quedaria:


/* Widgets

----------------------------------------------- */

.widget .zippy {

  color: $(widget.alternate.text.color);

  text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);

}



.widget .popular-posts ul {

  list-style: none;

}



#HTML8 {

font-size: 140%;

  line-height: 1.4;

  position: relative;

background:#dedede;

}



Como verás es muy simple, no he utilizado padding, margin, etc. etc. ya depende de como quieras la apariencia del widget que estás cambiando. Puedes ir cambiando en plantilla y dar "vista previa".

2 comentarios:

Si haces un comentario procura que no sea anónimo y si estás solicitando algo al menos espero que votes en Google Plus. Saludos.