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

"Añade un toque adorable: Cómo insertar un Kawaii Gif caminando en tu blog"

7:44 a.m.


Holaqueridísimos bloggers qué tal, cómo están?espero que bien.

En la entrada de hoy les traigo unos lindos gifs q se andarán paseando por tu blog espero sea de su agrado y me dejen un comentario!! .


Aquí la muestra



Para ponerlo en tu blog basta con que copies el código y lo pegues en un gadget html/javascript!



<marquee direction="left" scrolldelay="160" style="bottom: 0px; z-index: 1; left: 0; position: fixed; width: 100%;"><img src="http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%20walking%2038.gif" style="background: none; border: 0; box-shadow: none; padding: 0; width: 90px;" /></marquee>


<marquee direction="left" scrolldelay="160" style="bottom: 0px; z-index: 1; left: 0; position: fixed; width: 100%;"><img src="http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%20walking%2047.gif" style="background: none; border: 0; box-shadow: none; padding: 0; width: 90px;" /></marquee>



<marquee direction="left" scrolldelay="160" style="bottom: 0px; z-index: 1; left: 0; position: fixed; width: 100%;"><img src="http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%20walking%2025.gif" style="background: none; border: 0; box-shadow: none; padding: 0; width: 90px;" /></marquee>

Entendiendo el código:

<marquee direction="left" scrolldelay="160" style="bottom: 0px; z-index: 1; left: 0; position: fixed; width: 100%;"><img src="http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cute%20walking%2025.gif" style="background: none; border: 0; box-shadow: none; padding: 0; width: 90px;" /></marquee>

Color rosa es la dirección en la que quieres que camine tu gif LEFT/IZQUIERDA Y RIGHT/DERECHA.

Color verde es la velocidad con la que se desplaza el gif, si quieres que vaya mas lento o mas rápido entonces cambia su valor por otro numero.

Color morado es la dirección/url del gif.

Aquí les dejo otros gifs q renderize en photoshop..!! para copiar la dirección/url del gif da clic derecho sobre el gif y da la opción que dice "copiar la url de la imagen" 


 
  

   

  

Espero que les hayan gustado mucho, si les gustan y las usan, dímelo en los comentarios para ver como quedan en sus blogs, un beso enorme, bye bye

Puedes tomar cualquier imagen de mi blog, siempre respetando el SELLO DE AGUA o AUTORÍA de las creaciones. Recuerda bajar a tu pc, NO COPIAR Y PEGAR.

Si te gustó esta entrada deja un comentario ^v^
Continue leyendo...
Etiquetas: ,
Continue leyendo...
Seguir leyendo »
Etiquetas: ,

Cómo Integrar un Contador en Tu Blog de Blogger para Medir el Impacto de tu Contenido

8:12 a.m.


Este widget es un contador de visitas, personalizable y se basa en el gadget de estadísticas.

Ve a la edición html de tu plantilla y busca el siguiente código. Aparecerá varias veces pero no te preocupes, todas funcionan así que puedes usar cualquiera:
</b:section>
Arriba de eso pega el siguiente código: 
<b:widget id='Stats10' title='Contador Anime' type='Stats'>
  <b:widget-settings>
    <b:widget-setting name='showGraphicalCounter'>true</b:widget-setting>
    <b:widget-setting name='showAnimatedCounter'>true</b:widget-setting>
    <b:widget-setting name='showSparkline'>false</b:widget-setting>
    <b:widget-setting name='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting>
    <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
  </b:widget-settings>
  <b:includable id='main'>
    <!--Anime Counter-->
    <div expr:class='"anime-counter " + data:title' expr:id='data:widget.instanceId + "_content"'>
      <div class='counter'>
        <span>Total visitas</span>
        <div expr:class='data:showGraphicalCounter ? "graph-counter" : "text-counter"' expr:id='data:widget.instanceId + "_totalCount"'/>
      </div>
    </div>
  </b:includable>
</b:widget>

Ahora solo falta el código css, para ello copia el siguiente código y pégalo arriba de </head>

<!-- Contador Anime -->
<style type='text/css'>/*<![CDATA[*/
/*! Anime Counter v1.0.2 */
#Stats10{margin:0;padding:0;line-height:initial}.anime-counter{position:fixed;bottom:0;right:20px;z-index:901;font-size:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}@-webkit-keyframes count{from{-webkit-transform:translateY(4em);transform:translateY(4em);opacity:0}top{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes count{from{-webkit-transform:translateY(4em);transform:translateY(4em);opacity:0}top{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.anime-counter .counter{position:absolute;bottom:0;right:0;font-family:Arial,helvetica;text-align:center;box-shadow:0 5px 10px rgba(0,0,0,.5);background:rgba(255,255,255,.9);-webkit-animation:.3s .5s count backwards;animation:.3s .5s count backwards}.anime-counter .counter>span:first-child{white-space:nowrap;padding:10px;display:block;font-size:.9em;font-weight:700;color:#555}.anime-counter::before{background:bottom center no-repeat;content:"";display:block;position:absolute;bottom:0;right:0;-webkit-transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-animation:.3s .55s count backwards;animation:.3s .55s count backwards}.text-counter{font-size:1.2em;background:#262626;color:#fff;padding:5px 10px}.graph-counter{padding:0 5px 5px;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:-webkit-box;display:flex;-webkit-justify-content:center;-moz-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;-webkit-align-items:flex-start;-moz-align-items:flex-start;-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.graph-counter>span.digit{padding:.2em .3em;display:block;color:#fff;background:rgba(0,0,0,.85)!important;font-size:1.4em;margin:3px;border-radius:2px;position:relative;border:1px solid rgba(0,0,0,.9);box-shadow:0 60px 60px -30px rgba(255,255,255,.05) inset,0 0 0 2px rgba(0,0,0,.15),0 1px 0 0 rgba(255,255,255,.15) inset;width:auto;height:auto;line-height:initial}.graph-counter>span.digit .blind-plate{position:absolute;width:100%;top:50%;display:block;border-top:1px solid rgba(0,0,0,.7);margin-top:-1px;left:0;border-bottom:1px solid rgba(255,255,255,.15);opacity:1;height:auto}.anime-counter::before{height:274px;width:205px;background-image:url(https://goo.gl/jrLrqA)}.anime-counter.skin1::before{background-image:url(https://goo.gl/WLBlts)}.anime-counter.skin2::before{background-image:url(https://goo.gl/qV9rKj)}.anime-counter.skin3::before{background-image:url(https://goo.gl/PCRSvk)}.anime-counter.skin4::before{background-image:url(https://goo.gl/dS7cAq)}@media screen and (max-width:780px){.anime-counter::before{-webkit-transform:translateY(20%);-ms-transform:translateY(20%);transform:translateY(20%)}.anime-counter{font-size:14px}}@media screen and (max-width:480px){.anime-counter{display:none}}
/*custom theme*/
.anime-counter.custom::before {
  background-image: url(../custom.png);
}   
/*]]>*/</style>

Y listo, el contador ya estará funcionando con su skin por defecto que también es kawaii.

Skins

Para poder cambiar la skin por defecto solo tienes que ir a la sección "diseño" de tu panel de administración de blogger, busca el widget "Contador Anime" y en "Título" agrega skin# en donde el "#" se reemplaza por un número del 1 al 4 tal y como se muestra en la siguiente captura.

captura-contador-anime
Custom Skins

Si decidiste crear tu propio skin, en lugar de escribir lo anterior (para seleccionar el estilo del contador) escribe "custom" y en el css del contador busca esto:

/*custom theme*/
.anime-counter.custom::before {
  background-image: url(../custom.png);
}

Y reemplaza ../custom.png por la url de tu propia imagen.

Configurar widget

Estilo del contador - Puedes cambiar entre la versión "texto" o "Graph", seleccionando el respectivo contador. En el caso de seleccionar el segundo, puedes marcar la casilla de animación, lo que actualiza el contador en vivo.
Continue leyendo...
Etiquetas: , , , ,

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^
Continue leyendo...
Etiquetas: , , , ,

Scroll Bar Efecto Bisel

8:05 p.m.

Hola queridísimos bloggers qué tal, cómo están? espero que fenomenal
En la entrada de hoy les traigo un tutorial para poner un scroll Bar

  • Scroll Bar efecto kawaii   


Se puede colocar de dos formas

Forma 1:En un gadget

  • Diseño
  • Añadir gadget javascrip

<style>
::-webkit-scrollbar{ width:7px;height:7px;} /* Largura da barra */
::-webkit-scrollbar-track-piece{background-color:#fff;} /* Fondo de la barra larga */
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#6b8bba; /* Estilos da barra vertical */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#6b8bba; /* Estilos de la barra horizontal */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
</style>

Forma 2:Incrustada en el código HTLM

  •  Plantilla
  • Editar HTLM 
  • Crtlr+F & buscar & colocar antes de ]]></b:skin> 

::-webkit-scrollbar{ width:7px;height:7px;} /* Largura da barra */
::-webkit-scrollbar-track-piece{background-color:#fff;} /* Fondo de la barra larga */
::-webkit-scrollbar-thumb:vertical{height:50px; background-color:#6b8bba; /* Estilos da barra vertical */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
::-webkit-scrollbar-thumb:horizontal{width:50px; background-color:#6b8bba; /* Estilos de la barra horizontal */
box-shadow: inset 1px 1px 0px #fff;
border: 1px solid #6b8bba; /* Borde de la barra */
}
Esas son las dos formas de colocarlo 

Espero que este tutorial les haya gustado, es un tutorial muy fácil que deja bonitos resultados un beso enorme desde aquí :D y que pases una gran semana 

Si te gustó esta entrada deja un comentario 
Continue leyendo...
Etiquetas: ,
Continue leyendo...
Seguir leyendo »
Etiquetas: , ,

Como poner Corazones que caen por tu blog.

10:34 a.m.

Hola a todos, hoy les traigo la forma de poner corazones que caen dentro de su block.

✿◠‿◠

En diseño agregan un gadget y rn html/java script colocan el código en la ventana emergente que les aparece , luego le dan a guardar y listo.
Continue leyendo...
Seguir leyendo »
Etiquetas: , ,

Efecto Sticker en imágenes y texto con Power Point

2:46 p.m.
Les dejo un tutorial de nivel básico para los que empiezan con el PowerPoint.

¿Cómo hacer efecto sticker en las imágenes con PowerPoint?
Es decir, como pasar de una imagen a otra.


O de un texto a otro.

Abrimos una imagen PNG con fondo transparente

Seleccionamos insertar forma y escogemos Curva.

Vamos poco a poco rodeando la imagen PNG hasta hacerla entera.
Una vez hecha seleccionamos el relleno (para un sticker lo mejor es el blanco) y quitamos el contorno o lo ponemos del mismo color que el resto de la forma. Seleccionamos en efectos de imagen una sombra (yo cojo Desplazamiento Centro).
Se nos quedará encima de la imagen por lo que deberemos seleccionar Enviar al Fondo (lo podemos hacer desde la barra del menú o con el botón derecho).
Y nos quedará así (con un poquito de paciencia puedes hacer los bordes mejor).

Si quieres también puedes darle un contorno negro.
Aprovecha los efectos que te ofrece Powerpoint.

Si te gustó esta entrada deja un comentario ^v^
Continue leyendo...
Etiquetas: ,