Personalizando el gadget de TEXTO blogger

Entre los gadgets que blogger nos ofrece esta el que nos permite añadir un mensaje de texto a nuestro blog. Usando la imaginación este gadget puede servirnos entre otras cosas para presentar anuncios o noticias en nuestro blog.

No obstante los resultados propios del gadget pueden no satisfacer nuestra necesidades en cuanto su diseño o apariencia. Veamos ahora como poder darle más personalidad a este gadget y potenciar su utilidad para nuestro sitio.


Lo primero que haremos es colocar el gadget con el contenido que deseemos. Al hacerlo podemos identificar un código similar al siguiente.

HTML

<b:widget id='Text1' locked='false' title='Titulo del mensaje o anuncio' type='Text'>
<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>

Con CSS podemos mejorar estos resultados. Primero identifiquemos los componentes de este código que afectaremos. Como blogger usa las etiquetas h1, h2, h3, h4, primordialmente nosotros cambiaremos esta etiqueta en el código para no afectar el resto de los encabezados de la Sidebar.

<b:if cond='data:title != &quot;&quot;'>

          <h5 class='title'>

                <data:title/>

          </h5>

</b:if>

El segundo código que afectaremos es el identificado como “Text1”.

CSS

#Text1{
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgttN3FR5OHIDdWZgLlToOy3Qe9sFseMY5HVxMZF8P_6Bi_KddQzroEigpoDXL0KJBWCmX07-ws-P1Zh3DUp0hyjxKHNZQwqT_lZW89MJmVvSuVdhuTYdTzYaCxIC_l61FefrTNrESVZqA/s270/bloc_notas.png) repeat top left;

border-radius: 5px 5px 5px 5px;

-moz-border-radius: 5px 5px 5px 5px;

-webkit-border-radius: 5px 5px 5px 5px;

border: 0px double #53c2ff;
color: #000;
font-size: 11px;
font-weight: bold;
line-height: 2.1em;
padding: 10px 20px;
}

h5{
background: #000;
color: #ff8000;
font-size: 11px;
letter-spacing:0.1em;
line-height: 2em;
margin: -10px -20px 5px;
text-align: center;
text-transform: uppercase;
}

Para lograr el movimiento del títulos añadiremos la etiqueta marqueet de HTML.

<b:if cond='data:title != &quot;&quot;'>
          <h5 class='title'>
                <marquee scrollamount='3' scrolldelay='1'>
                <data:title/>
                </marquee>
          </h5>
</b:if>

El resultado será el mismo que se ve en la Sidebar de este blog y en las siguientes capturas.