Personalizar gadgets de Blogger

Para personalizar los gadgets podemos hacerlo de dos formas: 1.- Personalización individual 2.- Personalización general Personalización individual Para proceder a personalizar cada uno los gadgets de la sidebar, individualmente, debemos saber identificarlos. 1.- Vamos a Editar HTML: Diseño ► Plantilla ► Editar HTML ► Click dentro del editor ► Ctrl+f ► 2.- Localizamos la sección en donde se encuentran las identificaciones de los gadgets de la sidebar, ubicada al final de la plantilla, y cuyo código es como el siguiente, poniendo una línea del mismo dentro del rectángulo de búsqueda (search): <b:section-contents id='sidebar-right-1'> <b:widget id='BlogArchive1' locked='false' title='Título del gadget' type='BlogArchive'/> <b:widget id='Profile1' locked='false' title='Título del gadget' type='Profile'/> <b:widget id='Image1' locked='false' title='Título del gadget' type='Image'/> <b:widget id='Text1' locked='false' title='Título del gadget' type='Text'/> <b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'/> <b:widget id='NewsBar1' locked='false' title='Título del gadget' type='NewsBar'/> </b:section-contents> El anterior código corresponde a un blog con seis tipos de gadgets. Cada uno de los entrecomillados resaltados en rojo es la identificación de cada uno de los gadgets, y es la que debemos tener en cuenta para personalizarlos. Y los entrecomillados resaltados en amarilo son los tipos de gadgtes. El primer gadget añadido, de cada tipo, tiene en su ID (identificación) el número uno, Ejemplo: HTML1; los demás que agreguemos, dentro de su tipo, sigue el consecutivo, Ejemplo: HTML2, HTML3, HTML4, etc. 3.- Teniendo identificados los gadgets ponemos, antes de la etiqueta   ]]></b:skin> , los códigos con los cuales los vamos a personalizar. Las identificaciones de los gadgets las debemos poner exactamente igual a como están en los códigos correspondientes, teniendo en cuenta mayúsculas y minúsculas, y precedidas del símbolo #. Personalización del título Personalizaremos el titulo del gadget corrrespondiente al archivo del blog, cuya ID es   BlogArchive1  utilizando la etiqueta   h2 , que es la que pone el título, por defecto. Localizamos la etiqueta   ]]></b:skin>  y, antes de la misma, pegamos el siguiente código: #BlogArchive1 h2{   color: #0b3861; /* Color del título */   background: #58acfa; /* Color del fondo */   text-align: center; /* Título en el centro */   font-weight: bold; /* Título en negrilla */   font-family: Verdana; /* Tipo de fuente */   font-size: 12px; /* Tamaño de la fuente */ } Podemos poner un ícono o imagen al título de un gadget, pero tendremos que utilizar el código del mismo. Para ponerle un ícono o imagen a un gadget del tipo HTML, por ejemplo, expandimos plantillas de artilugios y localizamos un código como éste: <b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> Antes de  <data:title/>  pegamos esta línea: <img src="Aquí URL de la imagen o ícono" style="padding-right:5px;"/> Debiendo el código quedar así: <b:widget id='HTML1' locked='false' title='Título del gadget' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><img src="Aquí URL de la imagen o ícono" style="padding-right:5px;"/><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> Así habremos puesto el ícono antes del título. Para que el ícono quede después del título pegamos la línea indicada después de  <data:title/>  y cambiamos  right  por  left . Personalización del contenido Personalizaremos el contenido de un gadget del tipo   Text , cuya ID es   Text1 , utilizando la clase .widget-content . Localizamos la etiqueta   ]]></b:skin>  y, antes de la misma, pegamos el siguiente código: #Text1 .widget-content{   color: #0b3861; /* Color del texto */   background: #58acfa; /* Color del fondo */   font-family: Verdana; /* Tipo de fuente */   font-size: 12px; /* Tamaño la fuente */ } Personalización general Podemos personalizar uniformemente todos los gadgets de la sidebar. Personalizacón general de los títulos Sin expandir plantillas de artilugios localizamos la etiqueta   ]]></b:skin>  y, antes de la misma, pegamos el siguiente código: .sidebar h2 {   color: #0b3861; /* Color del título */   background: #58acfa; /* Color del fondo */   text-align: center; /* Título en el centro */   font-weight: bold; /* Título en negrilla */   font-family: Verdana; /* Tipo de fuente */   font-size: 12px; /* Tamaño de la fuente */ } Personalización general de los contenidos Antes de la etiqueta   ]]></b:skin>  pegamos el siguiente código: .widget-content{   color: #0b3861; /* Color del texto */   background: #58acfa; /* Color del fondo */   font-family: Verdana; /* Tipo de fuente */   font-size: 12px; /* Tamaño de la fuente */ } Personalización individual: Personalización general:

Twittear