Actualización para la plantilla “Bella Primavera”

Ayer por la noche agregué  algunas características a la plantilla de "Bella primavera", sin alterar el diseño, así que aquí tienen la versión mejorada, espero que les guste y si tienen sugerencias díganme con confianza.

                                                 



Las características que añadí son:

• Agregué una burbuja para contener el link con el número de comentarios.

• Agregué efecto de transparencia (opacidad) para las imágenes que tengas en tus entradas, al poner el puntero del ratón sobre la imagen.

• Le dí estilo al blockquote ó "citas" de tus entradas.

• Coloqué unas imágenes al fondo para que puedas colocar ahí algunas fotos tuyas, imágenes de eventos memorables o cualquier otro tipo de imagen.

Claro que tienes que cambiar las imágenes que yo puse por las propias, pero es fácil, solo haz lo siguiente:



1. Ve a Diseño -----> edición de HTML y sin expandir artilugios, localiza lo siguiente:

<h2> Mis mejores Recuerdos</h2> <div id='imagenes'><ul>

<li>

<a href='#' title=’titulo_imagen'><img alt='texto_alternativo' src=' http://i672.photobucket.com/albums/vv83/karlaenlinea/ForestFlowers.jpg '/></a></li><li>

<a href='#' title='titulo_imagen'><img alt='texto_alternativo' src='http://i672.photobucket.com/albums/vv83/karlaenlinea/FrangipaniFlowers.jpg'/></a></li><li>

<a href='#' title='titulo_imagen'><img alt='texto_alternativo' src='http://i672.photobucket.com/albums/vv83/karlaenlinea/TocoToucan.jpg'/></a></li><li>

<a href='#' title='titulo_imagen'><img alt='texto_alternativo' src='http://i672.photobucket.com/albums/vv83/karlaenlinea/WinterLeaves.jpg'/></a></li>

  </ul>

2. Sustituye los enlaces y textos por los propios, de la siguiente manera:



  Mis mejores Recuerdos --> Este es el encabezado de tus imágenes, cámbialo por el texto que quieres que aparezca.



  #  --> por la URL (enlace) a la que quieras que se dirija, cuando se haga click sobre la imagen, por ejemplo a un post).



  tilulo_imagen --> por el texto que quieres que aparezca cuando pongas el puntero del ratón sobre la imagen.



  texto_alternativo --> Este es el texto alternativo, puedes poner el mismo texto que pusiste en titulo_imagen.



y por último los enlaces de las imagenes, por los propios, son 4 en total, las puse con negritas para que los identifiques, por ejemplo:



http://i672.photobucket.com/albums/vv83/

karlaenlinea/ForestFlowers.jpg



*Nota: ten cuidado de no borrar las comillas que están antes y después de los textos y los enlaces.



Demo | Descargar



Hasta la Próxima.

Fondo ó Background “Bella Primavera” para Blogger.

La primavera esta muy cerca, pronto los árboles retoñaran y las flores dejarán mostrar su inigualable belleza, el sol brillará con mas intensidad y los pájaros nos complacerán con melodías hermosas que nos hacen recordar cuán afortunados somos de tener un planeta lleno de vida y color.



Este domingo pensé hacer una plantilla, con motivos florales, delicada  y femenina, pero al final de cuentas decidí por hacer un fondo (background), ya que de ese modo lo tendría listo mas rápido y además complacería a algunas personas que les gusta este tipo de diseño para sus blogs, sobre todo para los blogs personales donde la sencillez es el elemento principal.

Espero haber cumplido con el propósito. Bienvenidos comentarios y sugerencias.

                 

DEMOSTRACION           







Como Instalar el fondo ó  Background:



Tienes dos Opciones:



Opción 1.Agregar el código a un Gadget.





Paso 1. Asegúrate de tener la plantilla de Blogger "Mínima" instalada en tu blog.



Paso 2. Copia el siguiente código:

<style type="text/css">body {background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-P_kPz6MfnFsW9-LUE0zg-p4SiH5gT2HEy73d1QD3Yn3navffffgH9jkbuwBmnri4xyCOhoLdkJ9U9efudppf7824i5-0dWGhUo8hrdOb400iYHJ3xmceKHe_BxH22FHPi-IESLir2Ww/s1600/florebackground.PNG"); background-position: top; background-repeat: no-repeat; background-attachment: fixed; }</style><div id="tag" style="position:absolute; left:0px; top:30px; z-index:50;width:148px; height:47px;"><a href="http://www.compartidisimo.blogspot.com/"; target="_blank" title="Plantillas para blogger Gratis"><img

border="0"src="http://i672.photobucket.com/albums/vv83/karlaenlinea/bnns.png"/></img

border="0"src="http:></a></div>

Paso 3. Vé a Diseño ► Añadir Gadget, y elige la opción HTML ó Javascript y pega el código anterior, guarda los cambios y listo.



Recomendaciones



Para que tu Blog luzca mas bonito con este fondo, puedes borrar el borde que encierra el título, es muy fácil, para ello ve a...





Diseño ►Edición HTML, Luego, busca donde dice:

#header wrapper{

....

border: 1px solid $bordercolor;

...

}

#header{

...

border: 1px solid $bordercolor;

...

}

...borra lo que puse de color naranja, esa parte hace que aparezca el borde.



Nota: Como puedes ver el borde se encuentra tanto el el header wrapper (envoltura de la cabecera) como en el header(cabecera).



Modifica las fuentes (colores de las letras) para que se adapte al diseño.



Nota: En la  Demostración, le dí un margen adicional en el top, tanto a la columna principal, como a la columna lateral, para que se vea más amplio el espacio entre la cabecera y el contenido y armonice con las flores del diseño, Además eliminé el navbar (barra de navegación de blogger).







Opción 2. Bajar la plantilla e instalarla en tu Blog.





Si quieres bajar la Plantilla con el fondo añadido,  los ajustes hechos y el Navbar de Blogger eliminado, para que se vea igual que la demostración (excepto por el título que personalizé)  bájala en el siguiente enlace, y utiliza las mismas instrucciones de instalación que uso para las otras plantillas.

                     



Descargar

                                                                        

Cualquier duda ó sugerencias son bienvenidas y atendidas.