[TpB] Personalizando el Gadget de Etiquetas

Este post debí hacerlo el sábado pero bueno dicen que más vale tarde que nunca y como no me gusta enrollarme mucho en las introducciones vamos a empezar..

* Nota: Antes que nada quiero aclarar que este tutorial no ocupa de Photoshop y que no solo sirve para este Gadget sino también puedes crear un botón o personalizar links en tu blog...

Primero Agregamos el Gadget, llegados a este punto quiero creer que ya la mayoría en Blogger sabe hacerlo..

Regularmente para no liarme con la Plantilla creo un Gadget HTML/Javascript donde poner estilos para este tipo de menú así me es más fácil ya que teniendo estos aparte no me meto en códigos de la plantilla que en un inicio pueden resultar complicados.

........ Código .........

#Label1 .widget-content li {
   list-style-type: none;
   background: #e9f7fb;  /*------------- Color del Fondo ------------- */
    width: 120px;   /*------------- Ancho ------------- */
    max-height: 25px;  /*------------- Altura máxima ------------- */
    padding: 2px;  /*------------- Espacios o márgenes interiores del cuadro ------------- */
    text-align: center;  /*------------- Alineación del text | Left =Izquierda Center =centro Right =Derecha |  ------------- */
    text-shadow: 1px 1px 0 #FFFFFF;  /*------------- Sombra en el texto ------------- */
    text-transform: uppercase;   /*------------- Tranformación del texto = Mayúsculas ------------- */
    font: 11px consolas;   /*------------- Tamaño y Fuente ------------- */
    letter-spacing: 1px;  /*------------- Espaciado entre letras ------------- */
    -webkit-box-shadow: inset 0 0 5px #A5DFF0;   /*------------- Sombra, Cambiar solo el color [#A5DFF0] ------------- */
    -moz-box-shadow: inset 0 0 5px #A5DFF0;  /*------------- Sombra, Cambiar solo el color [#A5DFF0] ------------- */
    box-shadow: inset 0 0 5px #A5DFF0;  /*------------- Sombra, Cambiar solo el color [#A5DFF0] ------------- */
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    margin: 1px;  /*------------- Espacios o márgenes entre cuadros ------------- */
    display: inline;
}

Existen algunos factores que pueden modificar el resultado como el tamaño del sitio donde lo vas a poner (como la sidebar o el el pie del Blog), el tamaño de la Fuente o la misma Fuente que usas... por lo que debes tenerlos en cuenta al momento de usar estos estilos.

Ejemplos

Ahora tienes que cambiar el valor al que quieras, trate de especificar todo lo importante a modificar por lo que espero puedas personalizarlo a tu gusto. Lo que esta en verde o entre /* -----   -----*/ lo puedes borrar

Recuerda dejar tu comentario para saber si te ha servido y si te gustan estos tutoriales..