Este widget es un contador de visitas, personalizable y se basa en el gadget de estadísticas.
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.
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:
Y listo, el contador ya estará funcionando con su skin por defecto que también es kawaii.
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:
</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.
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.
