Mostrando las entradas con la etiqueta Gadget. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Gadget. Mostrar todas las entradas

Gadget de Árbol Navideño luminoso

3:01 p.m.

Se trata de un hermoso árbol de Navidad, que tendrá lugar en la parte inferior a la derecha de tu web.

Código:

<div style="text-align: center;"><a style= "@media screen and (max-width: 980px) display: none; right: 3px; height: 167px; width: 100px; position: fixed; bottom: -5px;"><img src="https://i.imgur.com/0TeHWpu.gif" _fcksavedurl="" alt="" /></a></div>

Tienes la posibilidad de cambiar el árbol, solo elige uno en formato GIF de Internet (puede ser de este sitio), copia su URL y pégala dentro del código en (remplazando la de la original): <img src="https://i.imgur.com/0TeHWpu.gif".

También puedes alterar su posición modificando el valor de los atributos “right:” y “bottom:”.

Si te gustó esta entrada deja un comentario ^v^

Botones para ir arriba de tu blog

5:33 p.m.
Hoy les dejo algunos botones, flechas e imágenes que puedes usar para ponerlas en tu blog. Si no sabes como hacerlo ve el tutorial aquí , es muy sencillo y se hace muy rápido.

Les dejo algunos ejemplos de flechas e imágenes que puedes utilizar, recordando siempre dos cosas:

1. Debes subir la foto que quieras a un alojamiento web porque necesitas la URL (por ejemplo, Dropbox)

2. Si quedan grandes o pequeñas para el efecto que quieras dar, sólo tienes que redimensionarlas con cualquier editor y guardarlas con el tamaño deseado.

flechas, botones, arriba, up, blogger, ayuda, gadget, tutorial, html




flechas, botones, arriba, up, blogger, ayuda, gadget, tutorial, html


flechas, botones, arriba, up, blogger, ayuda, gadget, tutorial, html


flechas, botones, arriba, up, blogger, ayuda, gadget, tutorial, html


flechas, botones, arriba, up, blogger, ayuda, gadget, tutorial, html

Más opciones de botones aquí

Si te gustó esta entrada deja un comentario ^v^

Código para colocar Cortinas en tu blog

5:42 p.m.

1.Diseño | Añadir gadget | HTML/javacrips y pegas esto:

<div style=" background-image: url ('URL de la cortina'); top: 0px; left: 0px; width: 100%; height:38px; z-index: 100;position: fixed;"></div>

2.Luego guardas

Si te gustó esta entrada deja un comentario ^v^

11 Cajitas Navideñas para decorar tu Blog

9:14 p.m.
En este post empiezo a poner cositas navideñas para que decoren su blog.

Para ponerlos en su blog es super facil, solo copia el código de la cajita que te guste más y pegalo en un gadget ->  html/javascript.


<!-- Matmau Blog Box 1 --> 
<div style="width: 140px; height: 199px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI1A61nSGBy0g-pX19EkNAehcxScQ5eOcy55w2uQghUS4gxmhqmzm_znZxN7oqCAjRVsre_tx06ZUreNkuoU1a68QKHXkatRO9XDnH2klW59gGb8bhefDQe78-F80x-4iH38TgjP20ygqB/s1600/1.gif); text-align: left;"><center><div style="width: 100px; height: 20px;"></div> <div style="width: 100px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> 
<!-- Matmau Blog Box 1 Finish -->


Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 2 --> <div style="width: 118px; height: 198px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihq87WyvO1EWjZk-TaX3sRTu_4T_XFkwYF6fAb8SRz-FvcSiY-XHWKPMDe0VklJOzKot4MIaJbZ9iYbUSOC4lq6SPszJiQonXLjqHMEO2GYCWGAZXegPnGIn9N2SoIpkituZ7Qn9CECEmZ/s1600/550353_20081110011646367w4.gif); text-align: left;"><center><div style="width: 110px; height: 45px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 2 Finish -->


Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 3 --> <div style="width: 118px; height: 198px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwi-rozF1vq7RQvVZlg-tbOc8mtQUbc_bqQdVDOiclCBaGbNhLl9zILNtlBTD0VzX3JfkdJGmnL5W6uzUY8VJULrRQ3w5YBC4dOXRY9p0m-vsEXr1-iqdjeBvYJPjIHgEioVHECQaB5SAm/s1600/550353_200811100116464VIzb.gif); text-align: left;"><center><div style="width: 110px; height: 45px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 3 Finish -->

Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 4 --> <div style="width: 118px; height: 198px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh80zWvCCt7WZKxfzCNWhmPSQ79LrclbM6uMCbKOBYeJ-zz1qAb3C1nakd7H0jUzPrL7ZqKJJpdh0bEwejeKFWCLUHAjukhp1WaIgEHOsbJYcsgW3-d9Bvdf22AdxhT6L0f7afrQlH37afB/s1600/550353_200811100116044L6Ax.gif3_200811100116044L6Ax.gif); text-align: left;"><center><div style="width: 110px; height: 45px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 4 Finish -->

Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 5 --> <div style="width: 140px; height: 200px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJmvXSQPtNiaUTCPaRDDiOVMVkmqUbwhnq1k5l6QFs54qoxqsiXHPJHuhogNWLvj_pEa3j5yyDh3nW_xTphVj_9508QUYXJ1Q8j-04puZBhA0ZFzCpcC6MSoISmp4erZXaZKz1MNM_-Gfc/s1600/21.gif); text-align: left;"><center><div style="width: 110px; height: 45px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 5 Finish -->

Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 6 --> <div style="width: 140px; height: 199px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMcaZOQ6fe21H0-PtBK-V3XD_3tdtJkSaJk_2p9Gg9TJQ95ExTJuhvQ8g_GoKGC0c01I3oO0RsYj6W7Mbsq8w_472unj2siLDs4Auu2xOdNMMjkGWxlHSgzbqc5WBlhD8hHW-3iMojlO4D/s1600/20.gif); text-align: left;"><center><div style="width: 110px; height: 35px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 6 Finish-->


Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 7 --> <div style="width: 140px; height: 200px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmh5uutzU2x1cMEsNwcKoqD3nYqOltck8IlnNpjGDcMazwOt3LHlSAKj1PnLvk1UdRfH5P6VJNI3PETM6S9RNKPt5oVIfKR7M-oG2SWRE7285zr6GYJptMU_GlQadEftZDRYi1C7_s5XYY/s1600/30.gif); text-align: left;"><center><div style="width: 110px; height: 45px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 7 Finish -->

Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 8 --> <div style="width: 131px; height: 180px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO-IKpgmkKnvixPSzXAgss_sV-x9kiIvReggF6mvOutGerFdW_9LrWBe9VUdtUTdG8JqkNuAEwu-Mt7qejWhnM3uJvsl3WC5AFt628tLrZ40gMqlzpdadzr5TP7T3LKmju2rGUmK8AJGck/s1600/31.gif); text-align: left;"><center><div style="width: 110px; height: 45px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 8 Finish -->

Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 9 --> <div style="width: 140px; height: 196px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhofynmQcGKFFMOmAPZNBzj02_jzseecPSKGJIjIrhOmRuGtaC-kwf4klXcPHb7f6-8Tu42eNvkdVO_D29JguVr493fGjuw_FW6H23mqhqU0oWSz20R1geS2WvaCFbG9OTerYfTb03-jnLZ/s1600/29.gif); text-align: left;"><center><div style="width: 110px; height: 20px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 9 Finish -->

Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 10 --> <div style="width: 141px; height: 152px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFVuydNyHltHAaIdYm5rNQ5N12a4S1dtIMTw6ebhhbDEc3ZP_3tfnVVAAX6BIDlg4xRv43HdvNz3DPYCzCR6hzDb_pFCZnp1W5HvQN0Ea_KMM9YgdqsLfO0MzVfeOw9AC2-42ON5-Reeq/s1600/17.gif); text-align: left;"><center><div style="width: 110px; height: 20px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 10 Finish -->


Gracias por seguir en mi blog....no te olvides de comentar ^v^

<!-- Matmau Blog Box 11 --> <div style="width: 141px; height: 152px; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4QOwZJXrKQMSGLtf2pxuWWHq1gTwLtFSy8yZq8nI0BJ4iAncxvW8Td8crCQJIkO2O7iJL-ImjSaWIE8Fc5Awhwcs0fmGUKHsvNU2_XOKTD2GvEIjsTbb1qlLOo4q4wCW6xYBWnUGL3V7M/s1600/22.gif); text-align: left;"><center><div style="width: 110px; height: 30px;"></div> <div style="width: 110px; height: 199px; overflow: auto;"> <span style="color:#000000;font-family:verdana;font-size:110%;"> AQUÍ TU MENSAJE </span></div></center></div> <!-- Matmau Blog Box 11 Finish -->

si te gustó esta entrada deja un comentario  ^v^

4 formas de poner un Marquee de Imágenes en tu blog

9:30 p.m.
Hola! :D y bienvenidos a este post. En esta entrada les traigo el efecto de de las imágenes que se mueven :D Muy facil y rapido :D espero que te sirva ♥ ahora vamos con el código

Para empezar les pondré varios códigos con diferentes efectos para que tomen el que mas les agrade


Primer Marquee



Copia el codigo y pegalo en un gadget html/javascript.

Código:
<marquee behavior="alternate" direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="8" width="100%"> <img height="100" src="DIRECCION DE TU IMAGEN" width="110" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /> <img src="DIRECCION DE TU IMAGEN" /></marquee></center>

Rosa: dirección de la imagen derecha (right) izquierda (left)
Verde: height (altura)  de la imagen
Azul: Widht (ancho) de la imagen

Segundo Marquee

Copia el codigo y pegalo en un gadget html/javascript.


Código:
<marquee behavior="alternate">
<marquee width="200">
<img src="DIRECCION DE TU IMAGEN">
<img src="DIRECCION DE TU IMAGEN">
<img src="DIRECCION DE TU IMAGEN">
<img src="DIRECCION DE TU IMAGEN">
</marquee>
</marquee>
Tercer Marquee con Bordes

Copia el codigo y pegalo en un gadget html/javascript.

  
Código:
<center>
<marquee direction="left">
<img src="DIRECCION DE LA IMAGEN" STYLE="BORDER: dotted 3px #55AE3A">
<img src="DIRECCION DE LA IMAGEN" STYLE="BORDER: dotted 3px #55AE3A">
<img src="DIRECCION DE LA IMAGEN" STYLE="BORDER: dotted 3px #55AE3A">
</MARQUEE>
</center>

morado: Tipo, grosor y color de borde


Cuarto Marquee con opción play y pause



   
PLAYPAUSE

código:
Para este ultimo marque tendremos quer irnos a

Tema >> Personalizar >> Opciones Avanzadas y estando ahí eliges la opción Agregar Css.

se te abrira una ventanita en blanco ... copias este codigo y lo pegas ahi
@font-face {font-family: "04b03"; src: url('http://static.tumblr.com/icz5xqv/ZUmlobzpk/bonjourlindas.blgspt_upload_pxl.ttf'); format("truetype"); }
play {font-family: '04b03'; font-size: 8px;color: #FF80BF; text-tranform: underline;}
luego das en la esquina derecha la opción "aplicar al blog"

Ahora copia este codigo y pegalo donde quieres que aparezcan las imagenes.. puede ser en un gadget html/javascript.
<center>
<marquee behavior="alternate" direction="right" height="100" id="marquee" onmouseout="javascript:marquee.start()" onmouseover="javascript:marquee.stop()" scrolldelay="90" style="background-image: url(DIRECCION DE TU BACKGROUND);" width="500">
<img src="DIRECCION DE LA IMAGEN" width="100px" />
<img src="DIRECCION DE LA IMAGEN" width="100px" />
<img src="DIRECCION DE LA IMAGEN" width="100px" />
<img src="DIRECCION DE LA IMAGEN" width="100px" />
</marquee></center>
<center><a href="javascript:void(0)" onclick="javascript:marquee.start()"><play>PLAY</play></a><img src="http://i205.photobucket.com/albums/bb186/mhilkas/Currently/sentindo-3.gif" style="margin-bottom: -2px;" /><a href="javascript:void(0)" onclick="javascript:marquee.stop()"><play>PAUSE</play></a></center>
Y listo .. si te gustó esta entrada deja un comentario  ^v^

Como ponerle a tu block DESTELLOS que salgan del cursor

8:10 a.m.

Hola! :D y bienvenidos a este post. En esta entrada les traigo el efecto de poner destellos de un solo color que salen del cursor  :D Muy facil y rapido, es un código que se coloca en el HTML del blog :D espero que te sirva ♥ ahora vamos con el código

1. Vamos a Tema y Editar HTML:



2. Buscamos: </head>   

ANTES de ese codigo pegamos el siguiente:

<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=40;

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

En la parte inicial del código esta la opcion de cambiarle el color a los destellitos que saldrán de tu puntero, ahi lo cambias por otro color.

Página para ver código de colores


3. Luego solo das clic en el botón de guardar y LISTO :D


También funciona si vamos a :
  1. Diseño 
  2. Agregar un gadget
  3. HTML/JavaScript
  4. Pegamos el código anterior
  5. Guardamos
Si te gustó esta entrada deja un comentario  ^v^

3 formas de colocar una Imagen para ir Arriba de tu Blog ♥

6:33 p.m.


Hola *-* y bienvenidos a este Post C: .

Como tod@s debes haber  visto ya en muchos blogs, a veces ponemos un botoncito en la parte inferior de la pantalla para que al apretarlo vuelva a subir directamente arriba, al inicio del blog.

En esta entrada les comparto el código que pondremos para poner una imágen estática en la parte inferior derecha de su blog que los acompaña durante la visita del blog... y sirve también para subir hasta arriba dandole click en la imagen.
Bueno les pongo estos 3 pequeños tutoriales de las formas en las que puedes hacerlo.!!
Tú escoge la que más te interese.

La primera forma:
  1. Vamos a ir a: DISEÑO
  2. AÑADIR UN GADGET 
  3. HTML/Javascript 
  4. Dentro pegamos el siguiente código:
<a href="#"><img src="http://i58.photobucket.com/albums/g280/matmau/BOTON%20SUBIR%20by%20Patt%201_zpsf9wm9b6p.png"  href="#wrap" title="Subir" class="go-to-top"  style="position: fixed; bottom: 10px; right: 1%;" width='15' height='15'/></a>

Cambiamos el Link por nuestra Imagen
Modificamos las dimensiones de la imagen

La segunda forma:

Para poner la flecha o la imagen tendremos que irnos a Diseño<Añadir Gadget<HTML. En el gadget tendremos que copiar el siguiente código:

1. Si queremos que la flecha o imagen quede a la izquierda:

<a href='#' style='display croll;position:fixed;bottom:0px;left:0px;' title='ARRIBA'><img src="La URL de tu imagen" /></a>

2. Si queremos que la flecha o imagen quede a la derecha:

<a href='#' style='display croll;position:fixed;bottom:0px;right:0px;' title='ARRIBA'><img src="La URL de tu imagen" /></a>

3. Si queremos que quede en el centro:

<a href='#' style='display croll;position:fixed;bottom:0px;center:0px;' title='ARRIBA'><img src="La URL de tu imagen" /></a>

ROJO: altura en la que quieres que esté la imagen ( en 5px queda en la esquina

MORADO: es la dirección en la que quieres que esté puesta tu imagen.

VERDE: dirección de tu imagen

La tercera forma:
  1. Ingresar a tu blog y buscas Tema
  2. Colocar la opción Editar HTML
  3. Pulsa Control F para buscar
  4. Buscas </body>; que se encuentra al final de toda la plantilla.
  5. Arriba de ese código ingresas esto: <a href='#'><img alt='ir arriba' border='0' src='dirección de la imagen' style='position:fixed; bottom:0; right:0;'/></a>
  6. Colocar guardar plantilla y saldrá tu imagen 
Y listo!