2 dic. 2013

Decora tu blog para Navidad

Llega la navidad con su alegría y gastadera de plata, y para los bloggers es muy importante que nuestros blogs estén altanto de las festividades por motivos decorativos, y es ese el motivo de esta entrada, te mostrare algunos trucos para que decoremos nuestro bloggers para que tenga ese toque navideño que tanto nos hace sentir en casa.



Imágenes para decorar con motivo navideño



<div id="navidad">
<img alt="Feliz navidad" src="http://3.bp.blogspot.com/_a5mK001oySU/TP1zl6xU57I/AAAAAAAArT8/QWE6ioNpUeI/s1600/2.png" title="Feliz navidad" /></div>

Feliz navidad
<div id="navidad">
<img alt="Feliz navidad" src="http://www.100pies.net/Gifs/Navidad/Bolas-Cristal/bolas-cristal-05.gif" title="Feliz navidad" /></div>

Feliz navidad
<div id="navidad">
<img alt="Feliz navidad" src="http://www.caxigalines.net/gifanimados/navidad/guirnaldas/guirnaldas2.gif" title="Feliz navidad" /></div>

Feliz navidad
<div id="navidad">
<img alt="Feliz navidad" height="320" src="http://www.guauquecosas.com/wp-content/uploads/2013/11/Una-guirnalda-navide%C3%B1a.gif" title="Feliz navidad" width="320" /></div>

Feliz navidad
<div id="navidad">
<img alt="Feliz navidad" src="http://2.bp.blogspot.com/_WvACVGW1iPE/TPBCkxGzFGI/AAAAAAAABaE/m8vcroK2uGk/s1600/navidad-gorro-1.png" title="Feliz navidad"/></div>

Feliz navidad
<div id="navidad">
<img alt="Feliz navidad" height="200" src="http://3.bp.blogspot.com/-Bc3BcdO_PDM/UFyXKVJWmGI/AAAAAAAACZc/EGnx9ER3rfI/s200/Navidad+(34).png" title="Feliz navidad" width="159" /></div>

Feliz navidad
<div id="navidad">
<img alt="Feliz navidad" height="185" src="http://cur.glitter-graphics.net/pub/3203/3203604egxjviugap.png" title="Feliz navidad" width="320" /></div>

Instrucciones para colocarlos en tu blog

si usas blogger: copia el código -> ve a diseño -> añadir un gadget -> elige un HTML/Javascript, pega los códigos que elegiste  y guarda.

si usas wordpress: copia el código -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pegas los códigos que elegiste.

Recuerda que puedes cambiarle el tamaño.
si quieres tener alguna de esas imágenes en un lugar especifico como por ejemplo mi gorro de navidad en mi cabecera tendrás que usar este código:.


#navidad {
float:right;
position:relative;
top:-16px;
right:30px;
}

lo que esta en rojo es el  nombre único, mira que cada imagen tiene el mismo, si usas mas de una imagen entonces a la otra agrégale un numero así: navidad1


  1. copia el código anterior
  2. ve a plantilla
  3. personalizar
  4. avanzado
  5. y agregar css
  6. y pega el codigo

lo de color verde es para mover la imagen de arriba a abajo y lo de azul es para moverla a los lados, si quieres correr la imagen aun mas recuerda que tiene signos negativos puedes quitarlos.

Nieve cayendo en el fondo del blog


este es un truco que vi en ciudad blogger muy bonito, para tenerlo

  • ve a plantilla
  • personalizar
  • avanzado
  • y agregar css
  • y pega este código:

@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

#contenedor-nieve {
background-image: url(http://lh3.googleusercontent.com/-k6mAvDmeu4Q/UMefU6JI32I/AAAAAAAADpM/zdjTclnGDhM/s500/snow.png), url(http://lh6.googleusercontent.com/-8wOkQAdxfgg/UMefVfmte0I/AAAAAAAADpU/aE4HxfiXD88/s400/snow3.png), url(http://lh5.googleusercontent.com/-fhO2tXwKP9M/UMefVCohCOI/AAAAAAAADpQ/nFVnzK1W0xw/s300/snow2.png);
-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}



  • Guarda y luego
  • ve a plantilla
  • editar HTML
  • oprime las teclas CTRL   F  (Mac ⌘F)  para activar el buscador 
  • y busca esta linea

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Y debajo agrega esto:
<div id='contenedor-nieve'>

Por último busca </body> y arriba de ella agrega:
</div>


Iconos sociales estilo navidad


iconos sociales navidad



Para colocar estos iconos en tu blog as lo siguiente:
para cada icono agrega este código

<a href="URL QUE ABRIRA" target="_blank"><img alt="TEXTO ALTERNO" height="64" src="URL ICONO" title="TITULO PARA MOSTRAR" width="64" /></a>


lo verde es la url que abrirá como tu pagina facebook etc
lo rojo es el texto que mostrara si no se puede cargar la imagen
lo azul es el texto que mostrara al pasar el cursor
lo morado es la url que colocaras para el icono, escoja la url del icono que quieres y lo pones

Facebook

http://3.bp.blogspot.com/-f8G35Qiqa-A/UpzIdsyfaXI/AAAAAAAAADc/Ckw6DoitR4U/s1600/facebook.png



Rss

http://3.bp.blogspot.com/-jSIQT8I3tAY/UpzIdx7pM3I/AAAAAAAAADo/hmT224ERpNE/s1600/rss.png



Likedin

http://1.bp.blogspot.com/-W88g8Mxmzhw/UpzIdGi5sQI/AAAAAAAAADQ/UUieaRFFVtA/s1600/Linkdn.png



Google

http://3.bp.blogspot.com/-HXkqKRGUUHg/UpzId5YFn_I/AAAAAAAAAD8/h60xo3W35N0/s1600/google.png



Digg

http://3.bp.blogspot.com/-f7XHL3J6Gkk/UpzIdIYBtUI/AAAAAAAAADU/7aBS7uo1xIw/s1600/digg.png



Delicius

http://3.bp.blogspot.com/-aZbDYCaPdpo/UpzIdAL-WyI/AAAAAAAAADY/dDre-QMjUgo/s1600/Delicious.png



Twitter

http://2.bp.blogspot.com/-oz7klEc2IXg/UpzIeOlrAvI/AAAAAAAAADw/_Z89MPesh2k/s1600/twitter.png



Youtube

http://3.bp.blogspot.com/-8zN5aT5epa0/UpzIeSYngUI/AAAAAAAAAD4/Pa0JUzXY_Jw/s1600/youtube.png



8 comentarios:

  1. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  2. Hallo...Un millón,me encanto.Desde que tengo Blogs siempre los decoro..Hoy ando en eso en los 3 que tengo.saludos desde Venezuela..:-)

    ResponderEliminar
  3. Se me olvidaba....Falta el boton de Pinterest!!!:-) del resto todo fino..:-)

    ResponderEliminar
  4. esta bueno pero quiero el gorro en la esquina izquierda de mi cabecera donde pego el segundo codigo? en head, body , etc exactamente donde se pega
    gracias

    ResponderEliminar
    Respuestas
    1. antes de

      ]]></b:skin>

      y cambias los valores de top y right para ir cambiandolo de pocicion

      Eliminar
  5. Mil gracias no sabes como me ha ayudado tu blog. Muy interesante todo.

    ResponderEliminar
  6. Excelente, gracia me has ayudado bastante.

    ResponderEliminar

2016 © Inovablog