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

Cómo Agregar CSS (Cascading Style Sheets) en blogger

 Cómo agregar CSS (Cascading Style Sheets) en blogger / blogspot blog? Amigos en algún momento has deseado agregar código CSS en tu blog, pero te confunde  cómo agregar código CSS en blogger pues podrias  no estar familiarizado con HTML.

Así que amigos les ensenare el super truco dire cómo agregar los codigos de Cascading Style Sheets (CSS) en el blogger de manera fácil.
Chequea Articulo Como Añadir Menu Css a Blog de Blogger

Tienes dos maneras de agregar código CSS en blogger.

1.Primera opcion
Siga a continuación paso para añadir CSS en blogger.

1. Conectarse a su cuenta de blogger

2. Selecciona tu Blog.

3. Haga clic en Plantilla (Ver Imagen de ayuda)

4. Después de 3 º paso Haga Click en opcion de personalizar. (Ver Imagen)

5.Después de hacer clic en la opción de personalizar una nueva página se abrirá. (Ver más abajo la imagen de demostración que la página estará abierta)

6.Ahora haga clic en el botón Opciones avanzadas> después de esto, haga clic en la opción Añadir CSS ya ha pasado su código CSS en el campo de texto en blanco y por último haz clic en el botón Aplicar a blog. (Ver imagen Demo abajo)

 Esta es primera opción para agregar código CSS.


II.Segunda Opcion para aplicar codigos de Css en Plantilla de Blogger.

 Siga a continuación paso para añadir CSS en blogger.

1. Conectarse a su cuenta de blogger

2. Selecciona tu Blog.

3. Haga clic en Plantilla (Ver Imagen de ayuda)
 
4. Después de 3 º paso Haga Click en opcion de personalizar. (Ver Imagen)

5. Proximo paso encuentre el codigo de abajo

]]></b:skin>

6. Ahora añada el codigo CSS antes de la etiqueta  ]]></b:skin>
Ejemplo:

7. Ahora guarde la plantilla y ya habras hecho este super truco y haz finalizado.

Chequea Articulo Como Añadir Badge Con Efecto Css a tu Blog de Blogger

Read More

Efecto Animado De Subida A La Barra Del Lado De Blog De Blogger

Hola! Te mostrare como anadir un efecto de transformacion  de la barra del lado o cualquier otro elemento de tu blog usando CSS3. Una vez tengas configurado el codigo del elemento/barra lateral este se movera hacia arriba saliendo desde la parte inferior y acomodandose en su posision real.o donde por costumbre va situada.

Para chequear este efecto en vivo da click en dibujo demostracion.

En el caso que estuvieras en otra pagina mientras bajabas la pagina que te di, dale refresh para ver el efecto de nuevo,En el ejemplo la unica barra de la derecha se mueve desde abajo hasta acomodarse en su lugar.

Este efecto de transformacion con CSS3 hace lucir tu sitio uno mas atractivo y llamativo. Aqui abao esta el tutorial como pudes anadir este  super truco de diseno a tu blog de blogger.

Configurando este efecto:

Primero entra en Blogger>> Tu Blog → Plantilla → Editar HTML. Presione Ctrl + F. busca el siguiente codigo<b:skin>....</b:skin> [As per the new HTML editor]
Anade el siguiente codigo debajo de  ]]></b:skin>

<style>
    @-webkit-keyframes transform-translate{
      from{-webkit-transform:translate(0px,1000px)}
      to{-webkit-transform:translate(0px,0px)}
    }
    @-moz-keyframes transform-translate{
      from{-moz-transform:translate(0px,1000px)}
      to{-moz-transform:translate(0px,0px)}
    }
    @-ms-keyframes transform-translate{
      from{-ms-transform:translate(0px,1000px)}
      to{-ms-transform:translate(0px,0px)}
    }
    @-o-keyframes transform-translate{
      from{-o-transform:translate(0px,1000px)}
      to{-o-transform:translate(0px,0px)}
    }
    @keyframes transform-translate{
      from{transform:translate(0px,1000px)}
      to{transform:translate(0px,0px)}
    }
    .sidebar {
      -webkit-animation:transform-translate 4s;
      -moz-animation:transform-translate 4s;
      -ms-animation:transform-translate 4s;
      -o-animation:transform-translate 4s;
      animation:transform-translate 4s;
    }
    </style>

Nota:1.(Si deseas hacer cambio sino dejalo como esta)Cambia .sidebar al por el nombre de otro elemento si deseas para anadir este efecto al elemento. 
         2.Cambia 4s por cualquier otro numero si desea aumentar o disminuir el tiempo que se toma en subir . Por defecto es de 4 segundos.

Guarde la plantilla. Listo. Usted y su visitantes ahora podran de este efecto effect en la barra del lado de tu blog de blogger.

Read More

Efecto 3D Para Imagenes Con Css3 Para Blog

 Bueno siguiendo con las imagenes y como darle un toque especial y movimiento para hacerlas mas llamativas e atractivas a tu pagina o blog de blogger.En esta ocasion te mostrare como anadirle un efecto con Css3 este es darle una vuelta a la imagen en (180 360 y 90 grados) en su eje.Este truco es una transicion y una trnsformacion en 3D.

Mira el siguiente ejemplo:RotateY

Este es una asombrosa exposicion para explicar la imagen
Cualquier contenido puede ir aqui.

Pongamosle que quieres que la foto o imagen a rotar en su eje 90 grados.También puede girar alrededor de los ejes X y Z, cambiando rotateY a RotateX o RotateZ.

Ejemplo Imagen en RotateX :

Note que he cambiado la sombra para mantenerlo normal.

Pongamosle que quieres que la foto o imagen a rotar en su eje 360 grados.También puede girar alrededor de los ejes X y Z, cambiando rotateY a RotateX o RotateZ.

Ejemplo Imagen en RotateZ :

Este es una asombrosa exposicion para explicar la imagen
Cualquier contenido puede ir aqui.

Comto aplicamos este efecto 3D de Rotacion Con Css3 a tu blog.

1.Entra en tu Blogger.
2.Escoge el Blog  donde vas a poner este efecto y da cliccal al mismo.
3.Busca donde dice Plantilla>>Editar Html
4.Busca el siguiente codigo ]]</b:skin>  copia y pega el siguiente codigo arriba/encima de ]]</b:skin> 
Escoge aquel codigo segun la rotacion que deseas Rotacion Y  y lo pegas  arriba de
]]</b:skin>

Codigo 1 Imagen Rotar en Y.

#f1_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f1_container {
  perspective: 1000;
}
#f1_card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #aaa;
}

 Codigo 2 Imagen Rotar en X

 #f2_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f2_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f2_card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f2_container:hover #f2_card, #f2_container.hover_effect #f2_card {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);

  -webkit-box-shadow: 5px -5px 5px #aaa;
  -moz-box-shadow: 5px -5px 5px #aaa;
  box-shadow: 5px -5px 5px #aaa;
}

Codigo 3 Imagen Rotar en Z

#f2_container {
  position: relative;
  margin: 10px auto;
  width: 450px;
  height: 281px;
  z-index: 1;
}
#f2_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f2_card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f2_container:hover #f2_card, #f2_container.hover_effect #f2_card {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);

  -webkit-box-shadow: 5px -5px 5px #aaa;
  -moz-box-shadow: 5px -5px 5px #aaa;
  box-shadow: 5px -5px 5px #aaa;
}

5.Dan Click a guardar plantilla.
6.Puedes anadir el efecto a una imagen utilizando la sigueinte etiqueta Div de la siguiente forma:

Div a Usarse con Rotate X:

 <div id="f1_container">
<div id="f1_card" class="shadow">
  <div class="front face">
    <img src="http://www.fondosytemas.com/wp-content/uploads/Windows_7_Broken_Glass_Desktop-450x281.jpg"/>
  </div>
  <div class="back face center">
    <p>Este es una asombrosa exposicion para explicar la imagen</p>

<p>Cualquier contenido puede ir aqui.</p>
  
  </div>
</div>
</div>

 Div Ha Usarse con Rotate Y:

<div id="f2_container" class="hover">
  <div id="f2_card" class="shadow">
    <div class="front face">
      <img src="http://www.fondosytemas.com/wp-content/uploads/funny_monkey_business-1280x800-450x281.jpg">
    </div>
    <div class="back face center">
      <p>Note que he cambiado la sombra para mantenerlo normal.</p>
    </div>
    </div>
</div>

Div Ha Usarse con Rotate Z:

<div id="f3_container" class="hover">
  <div id="f3_card" class="shadow">
    <div class="front face">
      <img src="http://www.fondosytemas.com/wp-content/uploads/02377_downtownseattletwilight_1920x1200-450x281.jpg">
    </div>
    <div class="back face center">
      <p>Este es una asombrosa exposicion para explicar la imagen</p>

<p>Cualquier contenido puede ir aqui.</p>
    </div>
    </div>
</div>

Nota:Lo que esta marcado en rojo es la imagen- ahi pondras tu imagen deseada.Lo que esta sobreado en azul -ahi va la informacion que desees poner sobre la imagen.Deberas ajustar el ancho(width) y el alta (height) del contedor  en la hoja style que te mostre primero,de acuerdo al ancho y alto de la imagen que vayas a utilizar para este super truco con Css.

Listo ahora tus visitantes y tu podran apreciar una foto que rota en su eje 180 grados con efecto 3D en simple paso

Read More

Atractivo Badge Con Efecto Css Para Blogger

Siguendo con cosas interesantes para implementar en nuestro blog para darle estilo y hacer la pagina atractiva al lector voy a mostrar como anadir asombroso Badge en forma de circulo. Cuando pones el cursor del mouse sobre el mismo , una transicion de CSS toma lugar y podemos ver un efecto elegante. Estos efectos se pueden ver regularmente con JavaScript y raramente con CSS.

El CSS es un elegante codigo y la transicion trabaja debido a un pseudo elemento ejemplo :despues :antes. Otro truco usado es el navegador . Este badge es extremadamente attractivo y seducirto al usuario a utilizarlo. Puedes anadir este widget en medio de las entradas o en la barra del lado de la plantilla. Una demostracion en vivo de este widget lo puedes ver abajo.

<

CiudadBlogger

Para anadir este badge a la barra del lado/entradas o dondequiera puedas ponerlo en la HTMLanade el codigo de abajo.

<style>
.circle{background:#fff;border-radius:100%;cursor:pointer;position:relative;width:15em;height:15em;overflow:hidden;transform:translateZ(0);margin:0 auto}
.circle h1{color:rgba(189,185,199,0);font-family:Lato, sans-serif;font-weight:900;font-size:1.6em;line-height:8.2em;text-align:center;text-transform:uppercase;-webkit-font-smoothing:antialiased;user-select:none;transition:color .8s ease-in-out}
.circle h1 a{color:rgba(189,185,199,0);text-decoration:none}
.circle:before,.circle:after{border-radius:100%;content:"";position:absolute;top:0;left:0;width:inherit;height:inherit;box-shadow:inset 10.6em 0 0 rgba(30,140,209,0.2), inset 0 10.6em 0 rgba(30,140,209,0.2), inset -10.6em 0 0 rgba(30,140,209,0.2), inset 0 -10.6em 0 rgba(30,140,209,0.2);transition:box-shadow .75s}
.circle:after{transform:rotate(45deg)}
.circle:hover:before,.circle:hover:after{box-shadow:inset .86em 0 0 rgba(255,0,0,0.5), inset 0 .86em 0 rgba(252,150,0,0.5), inset -.86em 0 0 rgba(0,255,0,0.5), inset 0 -.86em 0 rgba(0,150,255,0.5)}
.circle:hover > h1 a,.circle:hover > h1{color:rgba(185,185,185,1)}
</style>
<div class="circle">
  <h1><a href="http://www.ciudadblogger.info">Tu Blog</a></h1>
</div>

Despues de Anadir el codigo cambie el texto/URL que esta en letra oscura  y anade tu texto/URL  que desees.

Todo listo. Ahora los visitantes de tu blog podran ver este Badge con efectos de CSS en tu blogger blog.

Read More

Como Añadir Boton De Entradas aL Azar A Tu Blog

 Hoy te voy a ensenar como puedes añadir el boton de Entradas al Azar a Blogger cuando das click sobre el mismo seras redirigido a culquier pagina de tu blog.El widget trabaja en JavaScript miestras que el boton es hecho utilizando CSS.

Este widget usa simple JavaScript y luce elegante.Dando click en el boton este obtiene una entrada de el feed de el blogs  y redirige al usuario a esa pagina en particular.

Este widget puede ser de ayuda para aumentar las paginas vistas de tu  blog. Por otra parte el boton tiene un efecto 3D, cual podras ver al dar clic en ejemplo de abajo..

Una vez hayas visto el demo puedes anadir este asombroso widget a tu blog existen dos metodos:

1. Instalacion con solo un clic
          2. Manualmente Adiendo el Codigo

Instalacion Con Un Solo Clic

Para Añadir esta barra de buqueda a tu blog solo da clic al siguiente boton.

Despues de dar clic al boton seras redirigido a Blogger.com y tu widget sera añadido automaticamente a tu blog seleccionado.

Añadiendo el Codigo Manualmente

Si piensas que debes hacerle cambios al codigo o el boton de arriba no esta funcionando para ti entonces podrias usar este metodo.

Entra en blogger>>Selecciona el blog → Diseño → Añadir un Widget → HTML/JavaScript. Pega el codigo de Abajo.

<style>
#abt-random{position:relative;color:rgba(255,255,255,1);text-decoration:none;background-color:rgba(219,87,5,1);font-family:'Yanone Kaffeesatz';font-weight:700;font-size:20px;display:block;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);-moz-box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);box-shadow:0 9px 0 rgba(219,31,5,1), 0 9px 25px rgba(0,0,0,.7);margin-bottom:10px;margin-top:10px;width:160px;text-align:center;-webkit-transition:all .1s ease;-moz-transition:all .1s ease;-ms-transition:all .1s ease;-o-transition:all .1s ease;transition:all .1s ease;padding:4px}
#abt-random:active{-webkit-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);-moz-box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 rgba(219,31,5,1), 0 3px 6px rgba(0,0,0,.9);position:relative;top:6px}
#abt-random a{color: #fff;}
</style>

<center><div id="abt-random"></div></center>
<script type="text/javascript">
function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Random Post'; document.getElementById('abt-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
</script>

Despues de añadir el codigo guarda el widget y finalmente guarda la Plantilla. Listo. Ahora tu y tus visitantes pueden ver y usar este boton de Articulos al Azar para Blogger.

Read More

Como Añadir Automaticamente Borde a las Imagenes en Blogger

Hola!El super Truco para Manipular de las imagenes con Css resulta interesante podemos añadir atributos a los elemntos de la pagina y crear otros como por ejemplo el añadir un borde o bordes a las imagenes. Ademas el efecto de cambiar de color de borde al pasar el mouse sobre la imagen.

Te mostrare como hacerlo automaticamente para que asi no tengas que añadirlo manualmente cada vez que subas una imagen.Son sencillos pasos que no tomara nada de tu tiempo.Añadir bordes del ancho que desees le da ese toque especial y llamativo a las fotos particulares que deseas resaltar en la pagina o blog de blogger.Solo siguie los siguientes pasos.

Ejemplo Imagenes con borde:

1.Entra a la Interface de Blogger--> Diseño- -> Editar HTML
2.Busca la siguiente etiqueta </head>
3.Copie y pegue el codigo de abajo justo antes de la siguiente etiqueta </head> .

<style type='text/css'>
 
#outer-borders a img, #outer-borders a  { border: none; float: left; }
#outer-borders a { margin: 3px; }
#outer-borders a:hover { outline: 3px solid #0000ff; }
 
</style>

Nota:Puedes cambiar el color del borde ,tamano,margen,... pero ambos el tamano y el margen adeben tener el mismo valor numerico.
4.Ahora añade tus imagenes como muestra aqui abajo

<div id="outer-borders">
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdOjCmHrHGumnGANzVqXj9CTcdLTkRhCvxA5DyY_DghmF62teVLDAVAdV4vKwUKNLcp4FkVZyJ6ht9KRUBXAPC5CExMqx73epnjQyyRc37FyLiLciRQjhjDwSC6CyuaoviW9amUVsEhgYm/+1+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlbejaphyphenhyphenwmoztaJHL14xGIKAl9-au9IMfcxXiiV4OFPXsHTMJTfk3p_a7MqI8aU-8nhgnTspiNgsjHb79Mf48uDBUTYJhoCBugoWqx8QY-QFMhuYwTOfYeShwq77tJPTXkU-tYzZcNvzF/+2+small.jpg" alt="#" /></a>
   
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW0ono20QpUQDwWGBloFvIbymB0rJyJiwzFWFeUBeEKyypctXNPX43zcUpzI7puSAJV-mtZ92qo3TR9InDdQpa3jZzyLUCscooM-Uco14q2wcl72ZgNSNjso7aia8EEMKeOMWA4t_N37Hn/+3+small.jpg" alt="#" /></a>     
  
</div>

y Listo.

Read More

Añadir Bordes Redondos Con CSS3 A Tu Blog

 
Desea renovar su plantilla de Blogger añadiendo bordes redondos a este con CSS3? Aunque Blogger no es famoso por customizar y optimizar pero podemos hacer una pieza maestra de este.  A la mayoria nos gusta la simplicidad, pero es esencial tener un plantilla nitida que refleje profesionalismo. Añadiendo un borde redondo a la plantilla de blogger,le da un sabor especial al blog. Aun mas, puede aun añadir color de fondo que de seguro sorprendera a los lectores.Sin embargo,despues de recibir pedidos compartire  como anadir borde redondo con CSS3 a blog de Blogger.

Porque Usar la envoltuta de bordes redondos con CSS3:

 Cuantas personas no estan claras  si su sitio tiene las resolucion de los viejos monitores? Diciendo eso,vivimos en la era moderna muchos viven lejos de esta realidad, pues muchas personas utilizan los monitores antiguos para navegar la internet.si una persona tiene un transito descente,entonces las probabilidades estaran del lado alto de que muchos de los que visitan su sitio lo hacen desde monitores pequenos.Pues , su sitio esta disenado para monitores grandes lo cual no fija bien en pequenos monitores.Sin embargo,es esencial anadir un borde alrededor a tu plantilla que automaticamente se acomode tanto a la pantalla chica como a la larga de los monitores.

Como Añadir Una Envoltura De Borde Redondo Con CSS3 a la plantilla de blogger:

Los pasos mencionados abajo van al punto todo lo que necesitas hacer es seguirlos tal cual estan.te tomara ni 5 minutos para instalarlo.Sigue las instrucciones.

• Entra en Blogger.com >> Plantilla.
• Haga una copia de  la plantilla.
• Ahora presione Editar HTML >> Proceda.
• Entonces dentro de tu Plantilla busque por ]]></b:skin> y arriba de esta pegue el siguiente codigo de CSS3 .

#mblwrap {
  background: #Ffffff;
  width: 960px;
  margin: 10px auto 5px auto;
  padding: 0;
  position: relative;
  border-right: 15px solid #333;
  border-left: 15px solid #333;
  border-top: 10px solid #333;
  border-bottom: 15px solid #333;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  border-radius:10px;
  box-shadow: #333 0px 1px 3px;
}

• Una vez mas busque en la Plantilla la siguiente etiqueta <body>  y debajo de esta pegue el siguiente codigo de HTML.

<div id='mblwrap'>

• Por ultimo pero no menos importante busca la siguiente etiqueta </body> y antes de esta pegue el siguiente codigo de  HTML.

</div>

Chequea Como Añadir Estilo a Etiquetas

Todo Listo:Eso es guarda tu plantilla,y la envoltura de borde redondo con CSS3 esta listo para tu blog. Ahora disfruta de como se ve. 

Nota:Este plugin es hecho por desarrolladores de MBL, no lo copies sin permiso del administrador.

Read More

Como Añadir Efecto De Nieve al Cursor del Mouse

Hola Amigos como estan? He aqui un efecto de nieve para el area del cursor de tu mouse ,muchos efectos de nieve usan imagenes pero este gadget no, este gadget no usa imagenes haciendolo mas rapido al ejecutarse. Lo he probado en el internet explorer, mozzilla firefox y otros navegadores,trabaja excelentemente. Espero lo disfrute y deje sus comentarios por favor.
He aqui los pasos a seguir para instalarlo en tu blog

1.Entre a la interface de blogger >>>Diseño --> Elementos de pagina.

2.De Click en Anadir un  Gadget' en la barra del lado.

3.Seleciona'HTML/Javascript' y anade el codigo de abajo

 

<script type='text/javascript'>
// <![CDATA[
var colour="black";
var sparkles=100;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}

}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {


tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>

</script>

4. Ahora da Click En Guardar 'JavaScript' y listo..

Read More

Añadir Menu Desplegable A tu Blog

El Menú desplegable es una herramienta o widget esencial para cualquier blog o pagina web. Le da buen sentido o vista a tu plantilla por ende a tu blog. El menu desplegable le permite navegar facilmente a las diferentes partes de tu blog.

En este tutorial te enseñare añadir un sencillo menu desplegable a tu blog. Lo interesante de este widgetno requiere jquery y es codificado en  Html y CSS. Asi es mas rapido en ejecutarse. Empecemos!.

Como Añadir el Menu Desplegable  ?

1.Entra a la interface de blogger y da click en Diseño.
2. Entonces da Click en Añadir Gadget (Debajo de la Cabecera no en la bara del lado) y escoja el widget Html/Javascript .
3.Ahora pega el siguiente codigo

<div id='mbwnavbar'>
      <ul id='mbwnav'>
        <li>
          <a href='#'>Home</a>
        </li>
        <li>
          <a href='#'>About</a>
       </li>
        <li>
          <a href='#'>Contact</a>
        </li>
         <li>
           <a href='#'>Sitemap</a>
            <ul>
                <li><a href='#'>Sub Category #1</a></li>
                <li><a href='#'>Sub Category#2</a></li>
            </ul>
        </li>
      </ul>
    </div>

4. Ahora cambie el texto en Bold(ejemplo:Home,About,Contact,Sitemap) con la etiqueta apropiada  tambien reemplace la Url sombreada en color rojo (#).
5.Para anadir otra Etiqueta al menu desplegable entonces anada el codigo antes de </ul>. o si desea borar alguna etiqueta  solo borre la que no desea mostrar en el menu desplegable. ejemplo de etiqueta abajo.Aqui ves la etiqueta de Contact puedes reemplazar por otro nombre en ve de Contact o borrarla eliminando el codigo que empieza con <li> y termina con </li>.

 <li>
       <a href='#'>Contact</a>
 </li> 

6.Ahora anadiremos el CSS, Entre a la interface de blogger y de click en Plantilla luego busque Edite Html. Haga una copia de tu plantilla .


7. Luego busque el siguiente codigo en tu plantilla.

]]></b:skin>

8.Pegue el siguiente codigo encima o arriba de codigo del Paso 7.

/**MBW Navgation bar**/
#mbwnavbar {
    background: #464849;
    width: 960px;
    color: #FFF;
    margin: 0px;
    padding: 0;
    position: relative;
    border-top:0px solid #960100;
    height:35px;
}
#mbwnav {
    margin: 0;
    padding: 0;
}
#mbwnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#mbwnav li {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left:1px solid #333;
    border-right:1px solid #333;
    height:35px;
}
#mbwnav li a, #mbwnav li a:link, #mbwnav li a:visited {
   color: #FFF;
   display: block;
   font:normal 12px Helvetica, sans-serif;    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
     
}
#mbwnav li a:hover, #mbwnav li a:active {
    background: #028490;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 9px 12px 10px 12px;
             
}
#mbwnav li {
    float: left;
    padding: 0;
}
#mbwnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#mbwnav li ul a {
    width: 140px;
}
#mbwnav li ul ul {
    margin: -25px 0 0 161px;
}
#mbwnav li:hover ul ul, #mbwnav li:hover ul ul ul, #mbwnav li.sfhover ul ul, #mbwnav li.sfhover ul ul ul {
    left: -999em;
}
#mbwnav li:hover ul, #mbwnav li li:hover ul, #mbwnav li li li:hover ul, #mbwnav li.sfhover ul, #mbwnav li li.sfhover ul, #mbwnav li li li.sfhover ul {
    left: auto;
}
#mbwnav li:hover, #mbwnav li.sfhover {
    position: static;
}
#mbwnav li li a, #mbwnav li li a:link, #mbwnav li li a:visited {
    background: #028490;
    width: 120px;
    color: #FFF;
    display: block;
    font:normal 12px Helvetica, sans-serif;
    margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
    z-index:9999;
    border-bottom:1px dotted #333;
 
}
#mbwnav li li a:hover, #mbwnavli li a:active {
    background: #70b6bd;
    color: #FFF;
    display: block;     margin: 0;
    padding: 9px 12px 10px 12px;
    text-decoration: none;
}

 9.Guarde la plantilla y tendras anadido el menu desplegable a tu blog.

Read More