Contador de Visitas Personalizado para Blogger

1 Comentario

Muestras Ejemplo:


Contador de visitas

Este widget fue creado en z-kreations espero les guste es un contador para poder ponerselos a sus pagina y hasta personalalizarlo como pueden ver en las imagenes


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{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}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.


Referencia y Aportacion :
Z-Kreations

Entradas similares

1 Comentario