Esta vez traemos un hermoso efecto para el gadget de contador visitas de Blogger, con el efecto que presentamos hoy, el gadget contador de visitas pasa a ser animado, y lo mejor de todo es que si tienes una web de anime o de películas, este gadget quedará muy bien porque el truco viene con 4 imágenes animadas diferentes.
Contador de visitas animado estilo anime para Blogger
Para agregar este gadget a tu sitio web de Blogger, ve a Tema, Editar HTML y busca la siguiente línea:
</b:section>
Encontrarás varias de ellas, cualquiera sirve; ahora justo arriba pega lo siguiente:
<b:widget id='Stats11' 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--> <div expr:class='"anime-counter-animated " + data:title' expr:id='data:widget.instanceId + "_content"'> <div class='counter'> <div expr:class='data:showGraphicalCounter ? "anime-graph-counter" : "anime-text-counter"' expr:id='data:widget.instanceId + "_totalCount"'/> </div> </div> </b:includable> </b:widget>
Queda solo añadir el CSS que se pone justo antes de </head>
<!-- Contador Anime -->
<style type='text/css'>/*<![CDATA[*/
/* Widget => Anime Counter (animated) */
.anime-counter-animated{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}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes count{from{-webkit-transform:translateY(4em);transform:translateY(4em);opacity:0}to{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.anime-counter-animated .counter{position:absolute;bottom:0;right:0;font-family:arial;text-align:center;-webkit-animation:.3s .5s count backwards;animation:.3s .5s count backwards}@-webkit-keyframes sprite-yukine{0%,90%{background-position:0 0}100%{background-position:0 -800px}}@keyframes sprite-yukine{0%,90%{background-position:0 0}100%{background-position:0 -800px}}@-webkit-keyframes sprite-totoro{0%,60%{background-position:0 0}100%{background-position:0 -3000px}}@keyframes sprite-totoro{0%,60%{background-position:0 0}100%{background-position:0 -3000px}}@-webkit-keyframes sprite-mimikyu{0%{background-position:0 0}100%{background-position:0 -1600px}}@keyframes sprite-mimikyu{0%{background-position:0 0}100%{background-position:0 -1600px}}@-webkit-keyframes sprite-mememe{0%{background-position:0 0}100%{background-position:0 -4000px}}@keyframes sprite-mememe{0%{background-position:0 0}100%{background-position:0 -4000px}}.anime-counter-animated::before{background-repeat:no-repeat;background-position:top center;background-color:transparent;content:"";height:200px;display:block;position:absolute;bottom:0;right:0;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-animation-fill-mode:backwards,none;animation-fill-mode:backwards,none;-webkit-animation-duration:.3s,4s;animation-duration:.3s,4s;-webkit-animation-delay:.55s,0s;animation-delay:.55s,0s;-webkit-animation-iteration-count:1,infinite;animation-iteration-count:1,infinite}.anime-text-counter{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{background:#fcfcfc;color:#333}.anime-graph-counter{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-bottom:.5em}.anime-graph-counter>span{background:#212121;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}.anime-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);box-shadow:0 0 10px 0 rgba(0,0,0,.5)}.white .anime-graph-counter>span{background:#fff;color:#666;border-color:rgba(0,0,0,.3);box-shadow:0 1px 1px 0 rgba(0,0,0,.5)}.white .anime-graph-counter>span .blind-plate{box-shadow:0 0 10px 0 rgba(0,0,0,.25);border-top-color:rgba(0,0,0,.3)}.anime-counter-animated::before{background-image:url(https://4.bp.blogspot.com/-0e7gmYCfpfM/WPE7CpOg2bI/AAAAAAAADNY/JM8nEtdPiukmfpEPIODYdYT86juX9wrHACLcB/s0/yukine-all-sprites-x200.png);width:147px;-webkit-animation-timing-function:ease,steps(4);animation-timing-function:ease,steps(4);-webkit-animation-name:count,sprite-yukine;animation-name:count,sprite-yukine}.anime-counter-animated.totoro::before{background-image:url(https://2.bp.blogspot.com/-OqN4E-QzNK0/WPFMgJPavCI/AAAAAAAADOA/nVRvW-3ddWAXNE9aoSpF130Iu5WcgV_bACLcB/s0/totoro-all-sprites-x200.png);width:200px;-webkit-animation-timing-function:ease,steps(15);animation-timing-function:ease,steps(15);-webkit-animation-name:count,sprite-totoro;animation-name:count,sprite-totoro}.anime-counter-animated.mimikyu::before{background-image:url(https://1.bp.blogspot.com/-hiGGDWLyfqY/WPFWGfpF4UI/AAAAAAAADOQ/c1PkJOX6vKwg6s9Aiz3dsVw_qCTet_mhACLcB/s0/mimikyu-all-sprites-x200.png);width:153px;-webkit-animation-timing-function:ease,steps(8);animation-timing-function:ease,steps(8);-webkit-animation-name:count,sprite-mimikyu;animation-name:count,sprite-mimikyu;-webkit-animation-duration:.3s,1s;animation-duration:.3s,1s}.anime-counter-animated.mememe::before{background-image:url(https://4.bp.blogspot.com/-uHh_y_PEEEM/WPFle0_UUhI/AAAAAAAADOo/g7u2tJ8IIwECw3zzlywns5aD0uh6MqQmwCLcB/s0/mememe-all-sprites-x200.png);width:156px;-webkit-animation-timing-function:ease,steps(20);animation-timing-function:ease,steps(20);-webkit-animation-name:count,sprite-mememe;animation-name:count,sprite-mememe;-webkit-animation-duration:.3s,1s;animation-duration:.3s,1s}@media screen and (max-width:780px){.anime-counter-animated::before{-webkit-transform:translateY(20%);-ms-transform:translateY(20%);transform:translateY(20%)}.anime-counter-animated{font-size:12px}}@media screen and (max-width:480px){.anime-counter-animated{display:none}}
/*]]>*/</style>
Ahora solo guarda los cambios.
Si quieres modificar el personaje que aparece en el gadget, ve a Diseño y busca el gadget que se llame «Contador Anime», editas el título añadiendo a la frase anterior y dejando un espacio lo siguiente: : yukine (por defecto), totoro, mimikyu y mememe. El estilo que yo tengo es el de mememe.
Vía: Zkreations
0 comentarios