Widget contador de visitas anime para Blogger

Contador anime kawaii Contador anime kawaii

Demostración

Anteriormente ya habia compartido widgets de contador de visitas estilo anime, pero estos eran flotantes y mantenían una posición fija. En esta ocacion les traigo otro contador y esta vez puede ser usado como un widget en el sidebar.


Instalar

Ve a la edición html de tu plantilla y busca </b:section>. Aparecerá varias veces pero cualquiera sirve, solo elige uno. Una vez ubicado 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 animated-->
 <b:if cond='data:title.length != 0'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
    <div class='anime-counter-static' expr:id='data:widget.instanceId + "_content"'>
      <div class='counter'>
        <div expr:class='data:showGraphicalCounter ? "anime-graph-counter-static" : "anime-text-counter-static"' expr:id='data:widget.instanceId + "_totalCount"'/>
      </div>
    </div>
 </div>
  </b:includable>
</b:widget>

Ahora dirígete a Temas, pulsa el botón "Personalizar", luego a opciones avanzadas y en la opción "Añadir CSS Personalizado", en ese campo pega el siguiente código:


/*! Anime Counter (static) v1.0.0 */
.anime-counter-static{font-size:16px;overflow:hidden;border-radius:3px;box-shadow:0 3px 1px -2px rgba(0,0,0,.75)}.anime-counter-static .counter{font-family:arial;text-align:center}.anime-counter-static::before{background-repeat:no-repeat;background-position:center;background-size:cover;background-color:transparent;content:"";display:block}.anime-text-counter-static{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-static{background:#fcfcfc;color:#333}.anime-graph-counter-static{display:-webkit-box;display:-ms-flexbox;display:flex;padding:.25em;border-radius:4px;background:rgba(0,0,0,.8);-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.anime-graph-counter-static>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-static>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-static>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-static>span.digit .blind-plate{box-shadow:0 0 10px 0 rgba(0,0,0,.25);border-top-color:rgba(0,0,0,.3)}@media screen and (max-width:780px){.anime-counter-static{font-size:12px}}
/*Personalizar*/
.anime-counter-static::before {
    background-image: url(https://i.imgur.com/gpjh9Cg.gif); /*imagen*/
    background-color: #050505; /*fondo de la imagen*/
    height: 120px; /*altura de la imagen*/
}
.anime-counter-static .counter {
    padding: .5em;/*relleno*/
    background: #212121;/*color de fondo*/
}

Guarda los cambios y ya tendras el contador funcionando mediantes las opciones por defecto.


Personalizar

Estilos - El código css contiene opciones comentadas que puedes modificar, una de ellas es la imagen para el cover, que por defecto es un gif, puedes cambiar esa imagen por cualquier otra. También puedes ajustar la altura y el color de fondo.


Contador kawaii girl

Version clara - Por defecto el contador es oscuro, pero contiene también una versión alternativa en blanco, si deseas usarla busca el siguiente código en la edicion html:


<div class='anime-counter-static' expr:id='data:widget.instanceId + "_content"'>

Y agrega la class white de la siguiente manera:


<div class='anime-counter-static white' expr:id='data:widget.instanceId + "_content"'>


Configurar widget

Si no deseas usar el contador con estilo gráfico, puedes optar por mostrar la versión de solo texto, para ello ve a la pestaña "Diseño" de tu panel de administración en Blogger y cambiando las opciones del widget "Contador Anime".


Si este aporte te ha sido de ayuda no olvides compartir este articulo, ayudaras a mas personas y tambien me ayudaria mucho. Cualquier duda dejala en los comentarios, respondo a todos.