Personalizar gadget en blogger

Cuando creamos un blog, deseamos que se vea muy bien, llamativo y que sea atractivo a los visitantes. ¿que es mas importante el contenido o el diseño del blog o web?, muy sencillo las dos cosas, pues no podemos descuidar ninguna dado que por una u otra los usuarios se podrían retirar sin consultar nada. En el posicionamiento de seorimícuaro trabajo ambas cosas  y se los voy compartiendo a todos.

Paso 1. Para ilustrar el procedimiento vamos a utilizar el gadget “Ultimas entradas” que actualmente se ve de la siguiente forma.

Paso 2. Nos vamos a la plantilla de blogger y activamos expandir plantilla de artilugios. Buscamos el código asignado al gadget, para ello utilizamos el mimos titulo que le dimos, en este caso “Ultimas entradas”, nos aparecerá algo como lo siguiente.

<b:widget id='HTML4' locked='false' title='Ultimas entradas' 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>

HTML4, es el identificador del gadget y es el que se utiliza para cambiar los atributos con CSS. En este caso no vamos a hacer nada con el. Para mayor detalle ver el CSS utilizado para los últimos comentarios y las ultimas entradas, allí pueden ver como utilizar esta opción.

De <h2 class='title'><data:title/></h2>, nos interesa la etiqueta h2, este atributo es el que me va a determinar las características de los títulos de todos los gadget  utilizados en  la sidebar. Esta es precisamente la parte que vamos a modificar.

Paso 3. Antes de </head> escribimos el siguiente CSS

<style>
.sidebar h2{
margin:1px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 5px;
ont-weight:normal;
text-align:center;
width: 270px;
font-size: 22px;
margin: 2;
height: 22px;
border-radius: 5px 5px 0px 0px;
background:#CDCDCD;
color: #FFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
</style>

El resultado obtenido es el siguiente.


Podemos jugar con los colores, el tipo de letra y su tamaño, el color de relleno, etc. Nos vemos en la próximo seorimícuaro entrada.