Atractivo Formulario de Comentarios Para Blogger Usando CSS

En este tutorial te explicare el simple truco como hacer el area de comentarios de tu blogger mas atractivo y bello, solo usando codigos de CSS.Si es tu caso y deseas mejorar la apariencia de el formulario de comentarios simplemente siga los siguientes pasos.

1.Entra en tu cuenta de blogger ve a Plantilla>> Editar HTML
2.Busque la siguiente etiqueta ]]></b:skin> .
3.Copie el codigo de abajo  y pegalo despues de la siguiente etiqueta ]]></b:skin>

#comment-form iframe{
background:#7f9db9 url() no-repeat bottom right;
border:7px solid #eeeeee;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#000000;
width:95%;
height:250px;
}
#comment-form iframe:hover{
background:#7f9db9 url() no-repeat bottom right;
border:7px solid #bababa;
}
#comment-form a{
color:#ffffff;
}

Nota:Puedes escoger el color,ancho,alto,....  tambien puedes anadir imagenes de fondo a tu formulario de comentarios.
Luego que hallas hecho todo guarda la plantilla,ahora podras disfrutar de un atractivo y apelativa area de comentarios a tu blog de bloggeer.

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