Mil Trucos Blogger

Contador de visitas animado estilo anime para Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Esta vez traemos un hermoso efecto para el gadget de contador visitas de Blogger, con el efecto que presentamos hoy, el gadget contador de visitas pasa a ser animado, y lo mejor de todo es que si tienes una web de anime o de películas, este gadget quedará muy bien porque el truco viene con 4 imágenes animadas diferentes.

Contador de visitas animado estilo anime para Blogger

Vista Previa del Truco

Para agregar este gadget a tu sitio web de Blogger, ve a Tema, Editar HTML y busca la siguiente línea:

</b:section>

Encontrarás varias de ellas, cualquiera sirve; ahora justo arriba pega lo siguiente:

<b:widget id='Stats11' 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 animated-->
 <div expr:class='"anime-counter-animated " + data:title' expr:id='data:widget.instanceId + "_content"'>
 <div class='counter'>
 <div expr:class='data:showGraphicalCounter ? "anime-graph-counter" : "anime-text-counter"' expr:id='data:widget.instanceId + "_totalCount"'/>
 </div>
 </div>
 </b:includable>
</b:widget>

Queda solo añadir el CSS que se pone justo antes de </head>

<!-- Contador Anime -->
<style type='text/css'>/*<![CDATA[*/
/* Widget => Anime Counter (animated) */
.anime-counter-animated{line-height:24px;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}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes count{from{-webkit-transform:translateY(4em);transform:translateY(4em);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.anime-counter-animated .counter{position:absolute;bottom:0;right:0;font-family:arial;text-align:center;-webkit-animation:.3s .5s count backwards;animation:.3s .5s count backwards}@-webkit-keyframes sprite-yukine{0%,90%{background-position:0 0}100%{background-position:0 -800px}}@keyframes sprite-yukine{0%,90%{background-position:0 0}100%{background-position:0 -800px}}@-webkit-keyframes sprite-totoro{0%,60%{background-position:0 0}100%{background-position:0 -3000px}}@keyframes sprite-totoro{0%,60%{background-position:0 0}100%{background-position:0 -3000px}}@-webkit-keyframes sprite-mimikyu{0%{background-position:0 0}100%{background-position:0 -1600px}}@keyframes sprite-mimikyu{0%{background-position:0 0}100%{background-position:0 -1600px}}@-webkit-keyframes sprite-mememe{0%{background-position:0 0}100%{background-position:0 -4000px}}@keyframes sprite-mememe{0%{background-position:0 0}100%{background-position:0 -4000px}}.anime-counter-animated::before{background-repeat:no-repeat;background-position:top center;background-color:transparent;content:"";height:200px;display:block;position:absolute;bottom:0;right:0;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-animation-fill-mode:backwards,none;animation-fill-mode:backwards,none;-webkit-animation-duration:.3s,4s;animation-duration:.3s,4s;-webkit-animation-delay:.55s,0s;animation-delay:.55s,0s;-webkit-animation-iteration-count:1,infinite;animation-iteration-count:1,infinite}.anime-text-counter{font-size:1.2em;background:#333;color:#fff;padding:.5rem 1rem;box-shadow:0 4px 8px rgba(0,0,0,.5);font-weight:700;border-left:4px solid #607D8B;min-width:100px}.white .anime-text-counter{background:#fcfcfc;color:#333}.anime-graph-counter{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:.5em}.anime-graph-counter>span{background:#212121;color:#fff;font-size:1.2em;padding:.5em .4em;margin:0 1px;border-radius:2px;position:relative;line-height:1;box-shadow:0 60px 60px -30px rgba(255,255,255,.1) inset,0 1px 1px 0 rgba(0,0,0,.5),0 1px 0 0 rgba(255,255,255,.15) inset;border:1px solid #181818}.anime-graph-counter>span .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);box-shadow:0 0 10px 0 rgba(0,0,0,.5)}.white .anime-graph-counter>span{background:#fff;color:#666;border-color:rgba(0,0,0,.3);box-shadow:0 1px 1px 0 rgba(0,0,0,.5)}.white .anime-graph-counter>span .blind-plate{box-shadow:0 0 10px 0 rgba(0,0,0,.25);border-top-color:rgba(0,0,0,.3)}.anime-counter-animated::before{background-image:url(https://4.bp.blogspot.com/-0e7gmYCfpfM/WPE7CpOg2bI/AAAAAAAADNY/JM8nEtdPiukmfpEPIODYdYT86juX9wrHACLcB/s0/yukine-all-sprites-x200.png);width:147px;-webkit-animation-timing-function:ease,steps(4);animation-timing-function:ease,steps(4);-webkit-animation-name:count,sprite-yukine;animation-name:count,sprite-yukine}.anime-counter-animated.totoro::before{background-image:url(https://2.bp.blogspot.com/-OqN4E-QzNK0/WPFMgJPavCI/AAAAAAAADOA/nVRvW-3ddWAXNE9aoSpF130Iu5WcgV_bACLcB/s0/totoro-all-sprites-x200.png);width:200px;-webkit-animation-timing-function:ease,steps(15);animation-timing-function:ease,steps(15);-webkit-animation-name:count,sprite-totoro;animation-name:count,sprite-totoro}.anime-counter-animated.mimikyu::before{background-image:url(https://1.bp.blogspot.com/-hiGGDWLyfqY/WPFWGfpF4UI/AAAAAAAADOQ/c1PkJOX6vKwg6s9Aiz3dsVw_qCTet_mhACLcB/s0/mimikyu-all-sprites-x200.png);width:153px;-webkit-animation-timing-function:ease,steps(8);animation-timing-function:ease,steps(8);-webkit-animation-name:count,sprite-mimikyu;animation-name:count,sprite-mimikyu;-webkit-animation-duration:.3s,1s;animation-duration:.3s,1s}.anime-counter-animated.mememe::before{background-image:url(https://4.bp.blogspot.com/-uHh_y_PEEEM/WPFle0_UUhI/AAAAAAAADOo/g7u2tJ8IIwECw3zzlywns5aD0uh6MqQmwCLcB/s0/mememe-all-sprites-x200.png);width:156px;-webkit-animation-timing-function:ease,steps(20);animation-timing-function:ease,steps(20);-webkit-animation-name:count,sprite-mememe;animation-name:count,sprite-mememe;-webkit-animation-duration:.3s,1s;animation-duration:.3s,1s}@media screen and (max-width:780px){.anime-counter-animated::before{-webkit-transform:translateY(20%);-ms-transform:translateY(20%);transform:translateY(20%)}.anime-counter-animated{font-size:12px}}@media screen and (max-width:480px){.anime-counter-animated{display:none}}
/*]]>*/</style>

Ahora solo guarda los cambios.

Si quieres modificar el personaje que aparece en el gadget, ve a Diseño y busca el gadget que se llame “Contador Anime”, editas el título añadiendo a la frase anterior y dejando un espacio lo siguiente: : yukine (por defecto), totoro, mimikyu y mememe. El estilo que yo tengo es el de mememe.

Vía: Zkreations

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo