Personalizar Widget de Nube de Etiquetas Con Css3 En Blogger

En Bloggers podemos personalizar el widget de Etiquetas usando  CSS3. Este widget estilizado usando el color gradiente de CSS como fondo y las propiedades de caja de sombra.Tambien usamos la seleccion de antes y despues para darle estilo de apariencia asombrosa.

El conocimiento que puedas tener sobre CSS te brindara mas oportunidad de personalizarlo a tu gusto y añadir efectos adicionales.

En este articulo te mostrare 2 estilos diferentes para que puedas personalizar tu widget de etiquetas, importante nota que hayas añadido tu nube de etiquetas a tu blog antes de personalizarlo.

Chequea Articulo Como Habilitar Etiquetas

  Como Añadir Nube de Etiquetas

   1. Entra en cuenta de blogger
   2.Da Click en Diseño > Añadir un Gadget
   3. Selecciona Etiquetas en la lista de opciones y una ventanilla se abrira y configuralo como muestro abajo.

  4.Luego da click en el boton de  Guardar.

Como Personalizar Nube de Etiquetas

   1. Entra en Diseño > Editar HTML (Old blogger interface)
   2. Use ctrl F para encontrar la etiqueta ]]></b:skin> y
   selecciona cualquiera de los estilos de abajo que mejor te parezca y pegalo antes de la etiqueta ]]></b:skin>

Estilo Numero 1

 Codigo estilo 1

.label-size a {
    display: inline-block;
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
    padding: 4px 7px;
    font-family: 'Helvetica Neue', helvetica, sans-serif;
    font-size: 12px;
    line-height: 14px;
    height: 14px;
    vertical-align: middle;
    margin-bottom: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
   
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);
}


.label-size a {
    color: #996633;
    border: 1px solid #DDA13C;
    
    background: rgb(238,177,75);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));
    background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeb14b', endColorstr='#cc912d',GradientType=0 );
}

.label-size a:before  {
    content: '\2022';
    color: #FFFFFF;
    margin-right: 4px;
    font-size: 15px;
    line-height: 13px;
    height: 13px;
    vertical-align: text-top;
    
    text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}

.label-size a:hover {
    text-decoration: none;
    
    background: rgb(240,183,86);
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));
    background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0b756', endColorstr='#d6a044',GradientType=0 );
}

Estlio Numero 2

 Codigo estilo 2

.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0;
 }
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 }

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

• Ahora guarda tu plantilla y observa los cambios asombrosos.

Chequea Articulo Como Añadir Flash Animado a las Etiquetas de Blogger
Espero te haya gustado

Read More

Widget De Nube De Etiquetas Estilizadas Pro Con Css Para Blogger

 En este articulo te explicare como añadir un atractivo widget para las etiquetas/categorias para blogger .Este truco tiene su estilo usando codigo de CSS mira la imagen de abajo como referencia.Se integra en este el efecto hover o de animacion al poner el cursor sobre los mismos,y resemblan la forma de ladrillos.
 Chequea Añadir Etiquetas Estilo Ladrillo a Tu Blogger

Muy sencillo pero muy util a la hora de darle ese toque especial a tus elementos de tu pagina o blog.Para utilizar este estilizado widget en blogger sigue estos siemples pasos.
Ejemplo:

Widget Nube de Etiquetas Estilo Ladrillos Diseñadas Con Css para Blog de Blogger.

1.Entra en tu cuenta de blogger>> Diseño >> Editar HTML

2. Encuentra el siguiente codigo ]]></b:skin> puedes utilizar las teclas  Ctrl+F da click primero en editor despues usas teclas.

3.Pegue el codigo de abajo antes de etiqueta ]]></b:skin>

/*-----Widget Nubes de Etiquetas Personalizadas por www.ciudadblogger.info----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;font-size:10px;color:#666;}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}.label-size a:hover {
text-decoration: none;
}

4. Kuego da  Click  Guardar Plantilla.
Chequea Como Personalizar Etiquetas en Blogger


  Ahora tus visitantes podran navegar utilizando las etiquetas estilizadas con css muy atractivas..

Read More

Como Habilitar las Etiquetas Encabezados de Robots Personalizadas en Blogger

Recientemente unos meses atras cambio la interface de blogger por una nueva y incluye nuevos rastreadores y funciones especiales para  SEO para aumentar la popularidad de la plataforma de blogger.

Hay un gran numero mayoritario de blogeros que usan la plataforma de blogger  pero probablemente no saben sobre los nuevas caracteristicas las cuales proveen funciones de indice y herramientas especiales para seo que se llama "Preferencias de Busqueda"estas consisten  de partes  pero aqui podemos habilitar "Etiquetas Encabezados de Robots Personalizadas" cual ayudara hacer nuestro blog mas seo amigable.

Como Añadir Tabla de Contenido en Blog de Blogger


En este articulo te mostrare como habilitar Etiquetas Encabezados de Robots Personalizadas y el cuidado al hacer los cambios podria resultar peligroso para los rastreadores de google, Este podria no poner en indice tus entradas del blog si lo haces o lo implementas algo mal.

Como Habilitar las Etiquetas Encabezados de Robots Personalizadas en Blogger

En ordenpara saber como habilitar esta caracteristica en  blogger vamos a ver las siguientes instrucciones y las descutiremos en detalle:

1.Entra en tu cuenta de blogger:
2.Ve a Configuracion>>>Preferencia de Busqueda>>>Etiquetas Encabezados de Robots Personalizadas:

3.De Click>>>Editar>>>Si:
4.Luego marca los cuatritos que ves en la siguiente ilustracion.

En la ilustracion anterior hemos marcado las opciones necesarias y el resto no son importantes para el blog de blogger . Veras que he marcado las opciones All & Noodp para la pagina principal,la otra opcion que hemos marcado es Noindex & Noodp para la busqueda de las paginas y el archivo de blog. Y la ultima que hemos marcado es All & Noodp para una simple entrada. Ahora discutiremos una a una que significan:

ALL(todas): Este atributo significa no hay restriccion para indezarla por defecto a todas las paginas. Esta rastreara y indezara todo el contenido dentro de las paginas.

Noindex(No indezar): Este atributo significa no mostrar la pagina en los resultados de busqueda en otras palabras le decimos a los robots de busqueda que no indice la pagina completa.

Noffollow:Este atributo indica le dice al robot rastreador a no seguir ningun enlace en esta pagina.

None: Este atributo equivalente a noindex, nofollow y le da una senal al robot no indezar ninguna pagina & enlace.

Noarchive: Este atributo significa no mostrar el enlace de "cached" en resultados de busqueda

Nosnippet: Este atributo significa no mostrar un snippet(Descripcion corta) para esta pagina en los resultados.

Noodp: Este atributo significa no usar metadata del proyecto de directorio abierto (dmoz) y no mostrar titulo o descripcion para esta pagina.

Notranslate: Este atributo significa no mostrar la opcion de traduccion en otros lenguajes en los resultados de busqueda de esta pagina.

Noimageindex: Este atributo significa no indizar imagen en resultado de busqueda para esta pagina.

Unavailable_after: Este atributo ordena al robot de busqueda no mostar esta pagina en los resultados de busqueda despues de una fecha o tiempo especifico.

Chequea Articulo Como Habilitar las Etiquetas en Blog de Blogger

Asi hemos discutido cada atributo en detalle y marque todas aquellas necesarias como la ilustracion. Piense que es lo que mejor le conviene a tu  blog/website como bregar con tu contenido en tu blog. Por defecto te sugeriria a usar el metodo de arriba si deseas aumentar el trafico de tu blog pero si hay algo personal o no para indezar en los resultados de busqueda ntonces puede usar los siguientes atributos.

Noindex si deseas esconder cualquier pagina de los resultados de los motores de busqueda. Noemageindex si no desea mostrar fotos personales o secretas en resultados de busqueda. Unavailable_after puede ser usado para tiempo especifico y no despues de este tiempo especifico y fecha.

Analiza tus pensamientos: Ahora depende que es lo mejor para tu blog Para SEO para aumentar el trafico a tu blog  entonces solamente marque  las opciones necesarias que aparecen en imagen de arriba .

Read More

Añade Estilo Ladrillo A Tus Etiquetas De Blogger

En esta ocasion les mostrare el truco como añadir el gadget de estilo de ladrillo o cuadrado a las etiquetas en blogger este gadget le da un estilo y forma especial a tu blog, se que a la mayoria de tus visitantes les encantara y veran mas categorias de tus articulos.

Este gadget lo puedes aplicar a tu plantilla de tu blog en simples pasos a continuacion.

1. Entra en tu cuenta de blogger & Ir a  Diseño >> Editar HTML

2. Encuentra  usando Ctrl+F  el siguiente codigo ]]></b:skin>

3.Pegue el codigo de abajo antes de  ]]></b:skin>

#Label1 a{
color:#333;
padding:2px 8px;
line-height:24px;
margin:0 2px;
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHIytbrVwDwlRxsJEPqVnxlxMyOd3udI7UIrxye7TWknukEflpbZvkW0ZcmTFC3TGouTawatXsRmVp2wUlRq2h6JWK1LQixbky4NZqu267-zFEDp_WjRb5hP72AZ1r6IPp0f3MBsiteAw/s1600/bricks.png) center center repeat-x;
border:1px solid #ddd;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
font-size:10px !important;
text-decoration:none;}
#Label1 a:hover{
color:#666;
background:none #fff;
text-decoration:none;}

4.Ahora da Clic en Guardar Plantilla..

  Listo...

Read More

Los Elementos que Componen El Html de Tu Pagina Web

Hoy hablare de los Elementos de Html en foma simple y comprensible para todos.Empezamos con la definicion de Html.
HTML, siglas de HyperText Markup Language («lenguaje de marcado hipertextual»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto, así como para complementar el texto con objetos tales como imágenes.

 El HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>). HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo, JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML

Los Encabezados Html (Head Html)
Los encabezados HTML son definidos con las etiquetas  <h1> a <h6>

<h1>Este es un encabezado</h1>
<h2>Este es un encabezado</h2>
<h3>Este es un encabezado</h3> 

Las letras apareceran asi:

Este es un encabezado

Este es un encabezado

Este es un encabezado

 Si notas la etiqueta <h1> la letra es la mayor o mas grande y va bajando el tamano cuando llegues a la <h6> es la letra menor.

Parrafos en HTML

Los parrafos en Html son definidos con la etiqueta   <p>
.Ejemplo:
 <p>Este es un parrafo.</p> cuando lo pones dentro del Html lo veras sin la etiqueta <p>

Ejemplo:
Este es un parrafo.


Nota: toda etiqueta de comienzo debe ser cerrada usando (/)

Enlaces HTML

Los Enlaces HTML son definidos con la etiqueta <a> .

Ejemplo:

<a href="http://www.ciudadblogger.info">Esto es un enlace</a> si lo pones en tu Html se vera asi:

Esto es un enlace

ESte enlace te llevara a www.ciudadblogger.info

Imagenes HTML

Las Imagenes en HTML estan definidos con la etiqueta <img> .

Ejemplo

<img src="http://s2.glbimg.com/x0zg74yEDNRa71IXi8-eRf1crJY=/top/s.glbimg.com/jo/eg/f/original/2012/12/25/perola.jpg" width="104" height="142">

Cuando pongas la etiqueta de img en html la veras en navegador asi:

Elementos HTML 

Un elemento html es todo desde la etiqueta de comienzo hasta la etiqueta final :

Etiqueta Incio  *	Elemento de contenido	Etqueta Cierre  *
<p>	Este es un parrafo	</p>
<a href="default.htm">	Este es un enlace	</a>
<br>

* La Etiqueta de Inicio  es frecuente llamada Etiqueta de Apertura. La etqueta final es llamada frecuentemente la etiqueta de cierre..

Read More

Flash Animated Label Widget Para Blogger

Las Etiquetas describen palabras claves sobre los distintos articulos creados en tu blog.De lo que se trata cada post y hace mas facilmente para los lectores escoger aquella etiqueta que sea de su interes y esta lo redigira o llevara al articulo con el tema de la etiqueta.

Hay una o varias formas de aplicar este gadget en blogger pero les mostrare una forma peculiar de ponerlas a mover o en buen ingles Anadir Flash Animated Label.
Ver ejemplo Flash Animated Labels.

Al implementar este gadget hara que los vsitantes encuentren estas interesante resaltando a la vista de los mismo.Es una manera de promover a la ves los post o entradas que hayas creado y una invitacion a quedarse a leer mas sobre el mismo.

Que integrantes tiene este nuevo gadget de etiquetas animadas flash.

1. Nuevo codigo SWFobject
2. Usa el API de Blogger y Expone las Etiquetas
3. No hay necesidad de editar la plantilla.
4. Puede poner este widget en cualquier parte del articulo o pagina.

Como instalar este nuevo widget de nube de etiquetas animadas ?

Da Click : "Widget Generator para producir el codigo"

Luego Cambia los Settings segun desee

De Click en el boton de Generate para andirlo a tu blog

Luego de generado aparece este boton para anadirlo automaticamente a tu blog de blogger.

Read More

Super Truco De Diseno De Etiquetas En Tu Blog

Tal vez hayas pensado muchas veces como cambiar el simple texto de las etiquetas , y anadir un toque unico y profesional para el disfrute de tus lectores o visitantes de tu blog , es una forma de mostrar las etiquetascon un diseño mas perfecto y detallado.

Te mostrare una manera sencilla o super truco de cambiar el diseno de estas y hacerlas llamativas a los lectores.

Dentro de tu plantilla en Editor de Html el codigo de las etiquetas es el siguiente:buca este codigo en tu plantilla :

<span class='post-labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop>
</b:if>
</span>

Luego eliminaremos esta linea en este código:

<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

Luego buscamos el siguiente codigo en tu html </b:skin>

Colocamos el siguiente codigo de abajo antes de </b:skin>

.post-labels {
margin: 0;
padding: 0;
}
.post-labels a {
float: left;
position: relative;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9M-dKIkw2BvSBWDIaetcUtPKEJA6uFYNoD_kPzPF4xDvEIkns1pA0J__yKlkQMkY7ihbs1-fN9vFOKER4f-dzvQiVNRP5CYl3PMXflFRk9HDNPmjhacrdP7QE5V7tCE4bEZPSormZvH4/s400/tag-taringa-ajmrdesign.com.png") no-repeat bottom right;
height: 24px;
line-height: 24px;
padding:0 10px 0 8px;
margin: 0 0 0 25px;
color: #333;
font-size:13px;
font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
text-decoration: none;
}
.post-labels a:before {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9M-dKIkw2BvSBWDIaetcUtPKEJA6uFYNoD_kPzPF4xDvEIkns1pA0J__yKlkQMkY7ihbs1-fN9vFOKER4f-dzvQiVNRP5CYl3PMXflFRk9HDNPmjhacrdP7QE5V7tCE4bEZPSormZvH4/s400/tag-taringa-ajmrdesign.com.png") no-repeat;
content: "";
width:15px;
height: 24px;
float: left;
position: absolute;
top: 0;
left: -15px;
}
.post-labels a:hover {
text-decoration: underline;
}

Damos guardar y ya se implementara los cambios al estilo de tus etiquetas.

Read More