Contador de visitas
En esta ocacion les comparto un nuevo contador que desarrolle respondiendo así uno de los pedidos hacia el blog. Este nuevo contador cuenta con una versión blanca y otra oscura, no tiene contornos y como novedad se basa en sprites animados con css3, concretamente con la propiedad timing-function y el valor steps.
Recuerden que en la parte superior de zkreations se encuentra el enlace hacia el formulario de pedidos 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='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>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[*/
/* 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZPjKzsAVfMlBI6kSl5p8xAmzxR142cr5u46FsshUaVsK1CmdsMF83Or3aoYrgzw4XKgdWp0yzYqDHU4y3r6N4DJXNTor-X1Ks3sqKSGAtLzzN2FwiqHlCs6yQsbtoX1S_JdhRBnbDPqI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju3bGpBb0VclhnwKptd_ca31NA0NVU7wtsernUSMhGc-GXkWOp7AgWbk9v0mIaW25lLcAOjTGh3vQ8JNBfNfkrhnI6NoaaIbupHp9Y0i6DInnFX4eH35FjbPk5CxvIZPnW_vPuSDssZ4E/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbWFRtVwUUXtgtn5PWmsDT4ukHrYuGaIgqlyrpE1-nkq406Lk867Z5ZeXbViq0BtKDoJkpCdtPse4SP4CLIYsKLj-jzkory1Z4waa7demChBrJtUd1DlozjPksX8CPWqIF67aZwb17bEI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyA_eLK1PumaO0v65pbsJNbycobiJwrG2KKAiu6hG6WuhW3zXgbB4tBJCYMQ3CjM7aGwI-bieBh6w7qERT9UYDXYJkJRTuDRFu1YgA5s3217HtY71y9F7u076STTBvJCp_1vNcE3a5r-o/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 widget 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.