Contador de visitas anime para Blogger

min Meta Descripción

Demostración

Contador de visitas

Este widget lo hice para una persona que visita frecuentemente mi pagina, como me gusta compartir, decidí mejorarlo, hacerlo más personalizable y publicarlo para que todos lo puedan usar. A diferencia de la versión anterior, en esta ocasión el css ya incorpora todos los skins y elimina la opción "small" ya que nadie la usaba.


Instalar

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


<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 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 */
.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{padding:.2em .3em;display:block;color:#fff;background-color:rgba(0,0,0,.85);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}.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)}.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 widget ya estará funcionando con su skin por defecto.


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

Si eres curioso te facilito el código css sin comprimir. También te facilito el psd con los estilos de la imagen, en caso de que quieras crear mas imagenes con el mismo estilo.


counter-estile.psd counter.css

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.