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 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

Como Añadir Efecto De Opaco a Imagenes en Blogger

En este Super Truco de blogger te ensenare como añadir el efecto opaco a una foto de tu blog la cual deseas aplicarlo.Solo anadiendo un simple codigo de Css a la plantilla de tu blog.
Como Añadir Efectos de Oscuridad a las Imagenes de Tu Blog

1.Entre a la Interface de tu blogger--> Diseño- -> Edite HTML
2.Busque la siguiente etiqueta </head>
3.Copie el codigo de abajo y peguelo despues de la siguiente etiqueta </head>

<style type='text/css'>
a.opacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.opacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

5.Guarde la Plantilla

6.Ahora vaya a la interface de blogger >> Diseño>>Elementos de Pagina

7.Da Click en 'Añadir un Gadget' en la barra del lado.

8.Selecciona 'HTML/Javascript' y anade el codigo de abajo

<a class="opacity" href="http://www.ciudadblogger.info/"><img src="Anade la de la URL Imagen aqui" /></a>

Note: Replace Anade la de la URL Imagen aqui with your image url.

Ahora guarda  HTMLJava Script y Listo

Read More