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>
<div id="navidad">
<img alt="Feliz navidad" src="http://www.100pies.net/Gifs/Navidad/Bolas-Cristal/bolas-cristal-05.gif" title="Feliz navidad" /></div>
<div id="navidad">
<img alt="Feliz navidad" src="http://www.caxigalines.net/gifanimados/navidad/guirnaldas/guirnaldas2.gif" title="Feliz navidad" /></div>
<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>
<div id="navidad">
<img alt="Feliz navidad" src="http://www.davinci.edu.co/davincino/davincino2/images/gorro_navidad.png" title="Feliz navidad"/></div>
<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>
<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
- copia el código anterior
- ve a plantilla
- personalizar
- avanzado
- y agregar css
- 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='"loading" + 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
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
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
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
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
Puzzle Bobble
Karate Blazers
Puzzle De Bloques
Magical Cat Adventure