toggle

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 mas personalizable y publicarlo para que todos lo puedan usar.


Instalar en Blogger

Vamos a crear un nuevo section en nuestra plantilla, esta nueva sección en tu blog no se interpondra con tu diseño, simplemente te servirá para agregar algunos widgets de zkreations que mejorarán tu blog internamente, o le agregarán nuevas funciones, en este caso, el contador anime.


Ve a la edición html de tu plantilla, busca </body>. y arriba de eso agrega esto:


<b:section id='Extras'>

</b:section>

Ahora agrega el siguiente widget, copiando y pegando este código dentro del nuevo section:


<b:widget id='Stats9' title='Contador Anime' type='Stats'>
    <b:includable id='main'>
        <!--Anime Counter-->
        <div expr:class='"anime-counter" + (data:title == "Contador Anime small" ? " small" : "")'>
            <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>

El widget ya esta instalado pero necesita el core css para funcionar, Copia el siguiente código y pégalo arriba de </head>


<!-- Extras -->
<style type='text/css'>
/*<![CDATA[*/
/*-- Anime Counter --*/
.anime-counter .counter:after,.anime-counter:before{content:"";position:absolute;z-index:900}.anime-counter{position:fixed;bottom:0;right:20px}.anime-counter *{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.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)}.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;height:274px;width:163px;display:block;bottom:0;right:0;transition:transform .3s}.anime-counter.small:before{display:none}.anime-counter.small .counter{padding-left:80px}.anime-counter .counter:after{width:80px;left:0;bottom:0;top:0;display:block;background-size:150%}.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:flex;-webkit-justify-content:center;-moz-justify-content:center;justify-content:center;-webkit-align-items:flex-start;-moz-align-items:flex-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.5em;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)}
/*Responsive Counter*/
@media screen and (max-width:780px){.anime-counter:before {transform: translateY(20%);}}
@media screen and (max-width:480px){.anime-counter {display: none;}}/*not available for mobile*/
/*Theme Counter*/
/*--add theme--*/
/*]]>*/
</style>

Ahora solo queda agregar el tema de tu preferencia, reemplazando /*--add theme--*/ del codigo anterior por uno de los siguientes estilos, pero solo uno, si agregas mas de uno solo funcionara el que tenga mayor prioridad dentro del codigo:


Anime Girl 1: vista previa
/*Girl1*/
.anime-counter:before, 
.anime-counter.small .counter:after {background-image: url(https://goo.gl/WLBlts);}
.anime-counter:before {height: 274px;width: 205px;}
.anime-counter.small .counter:after {
    background-color: #9e987c;
    background-position: center -10px;
}

Anime Girl 2: vista previa
/*Girl2*/
.anime-counter:before, 
.anime-counter.small .counter:after {background-image: url(https://goo.gl/qV9rKj);}
.anime-counter:before {height: 274px;width: 166px;}
.anime-counter.small .counter:after {
    background-color: #7d88d8;
    background-position: center -20px;
}

Anime Boy 3: vista previa
/*Boy3*/
.anime-counter:before, 
.anime-counter.small .counter:after {background-image: url(https://goo.gl/PCRSvk);}
.anime-counter:before {height: 274px;width: 208px;}
.anime-counter.small .counter:after {
    background-color: #667676;
    background-position: center -10px;
}

Anime Girl 4: vista previa
/*Girl4*/
.anime-counter:before, 
.anime-counter.small .counter:after {background-image: url(https://goo.gl/dS7cAq);}
.anime-counter:before {height: 274px;width: 180px;}
.anime-counter.small .counter:after {
    background-color: #cdb0a4;
    background-position: center -30px;
}

Anime Girl 5: vista previa
/*Girl5*/
.anime-counter:before, 
.anime-counter.small .counter:after {background-image: url(https://goo.gl/jrLrqA);}
.anime-counter:before {height: 274px;width: 163px;}
.anime-counter.small .counter:after {
    background-color: #696f78;
    background-position: center -30px;
}

Si prefieres agregar tu propia imagen y color entonces usa el siguiente codigo y reemplaza los valores necesarios


.anime-counter:before, 
.anime-counter.small .counter:after {background-image: url(img.png);}/*custom-image*/
.anime-counter:before {height: 274px;width: 205px;}/*image-size*/
.anime-counter.small .counter:after {
    background-color: #232323;/*bg-counter-small*/
}

Si eres curioso te facilito el codigo 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

Configurar widget

Versión compacta - Solo tienes que ir a la sección Diseño de tu panel de administración de blogger, y editar el widget Contador Anime, agrega la palabra "small" al titulo del widget. guarda los cambios y ahora el widget será mas pequeño


Estilo del contador - En la misma configuración puedes cambiar entre la version "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, sin embargo, realicé algunas pruebas con el widget sin reestructurar y no he logrado que funcione, quizás este código ya no esta disponible en Blogger o tal vez se requiere de mucho tráfico para notarlo.