Contador anime de visitas animado para Blogger

min Contador anime animado

Demostración

He desarrollado un nuevo contador kawaii en respuesta a un pedido. Este contador cuenta con una versión blanca y otra oscura, no tiene contornos y se basa en sprites animados con css3, usando la propiedad timing-function y el valor steps.

Al igual que mi aporte anterior, el contador para blogger esta basado en el gadget estadísticas.


Recuerden que en la parte superior de zkreations se encuentra el enlace hacia el formulario en donde pueden dejar todas sus sugerencias para nuevos diseños, videos o entradas.


Instalar

Ve a la edición html de tu plantilla y busca el siguiente código. Aparecerá varias veces pero cualquiera sirve, solo elige uno:


</b:section>

Una vez ubicado, arriba de eso pega el siguiente widget:


<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 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>

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


<!-- Contador Anime -->
<style type='text/css'>/*<![CDATA[*/
/*! Anime Counter (animated) v1.0.2 */
#Stats10{margin:0;padding:0;line-height:initial}.anime-counter-animated{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.digit{background:#212121!important;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;width:auto;height:auto;display:block}.anime-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);box-shadow:0 0 10px 0 rgba(0,0,0,.5);height:auto;opacity:1}.white .anime-graph-counter>span.digit{background:#fff!important;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.digit .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>

Y listo, el contador de visitas kawaii ya estará funcionando usando la configuración por defecto.


Skins

El widget tiene 4 animaciones y 2 estilos, para elegir una animación ve a la sección diseño de tu panel de administración de blogger, busca el widget "Contador Anime" y da clic en editar. En "Título" agrega un espacio y escribe el nombre del tema, puedes escoger entre: yukine (por defecto), totoro, mimikyu y mememe.


Asimismo, la versión oscura del contador se establece por defecto, para cambiar a la versión blanca agrega "white" al título del widget.



Debido a que cada sprite de las animaciones la hice por separado no puedo facilitarles el psd, de hecho, antes de publicar esta entrada iba a publicar otra sobre los sprites y animación de css, pero decidi retrasarla un poco debido a unos pequeños problemas. En todo caso, les dejo un gist con el css sin comprimir.


counter-anime-animated.css

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.


Eso es todo, estaré compartiendo nuevos aportes más seguido, sobre todo agradezco a los que me dan ideas para nuevas entradas o diseños. Si te ha gustado la entrada no olvides compartirla, eso me ayudaria mucho.