Agregar 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 líneas con ese código, cualquiera sirve.
<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>
Quedara así:
Ahora busca </head> y pega lo siguiente arriba del </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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAPGoW9fuhJHTgUrYbipXLtav44nr7PLKDpwf12BVWULdnm2gdmGfOz71HNNQrZbndMXu51KlbP2REebBsgTN3RB1syB1wm4KFqMqrB6Hfjq_KngeArz33u-FqsOB0AdVduskvoMBdHyI/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Ko5P4DG3onhm3WrQ1yw9ZhMO0nIRLA-evZtb21ku0vm62v_kJueZz91WW7Po4nOCgFexGqQoTWTZvckl_3P3NScHL-9PtN6KaoP2Ptnt6TxGet7-KzeWEnLAb6BEPbxSPL_jsMQ29ZM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnE85UppHZQsArEd2GvM2ZxVT1hP80jdvIbLquJ8qP5qnTHvIx4dlH6WzabmdgcYokP_CU0bH5oJ-TDBJqqlvsCypc0aX8M_FzYRtpXHdyjocauZBBZnt_WmU4QzPNETTT4rVgzrePgOU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtkshm4C3QNBA1EC9GyFimIC83JBHiTU-nLfi24SE16aI8u4NbG39fexGogmv4r6fI3db1_PkJ41YQ_j1IhWSsDSpexemZX_EKPTC-qVr-1MDfCNlxN_VFJ5N5PXalY7U_nF_S7lI5p-A/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>
MODIFICACIONES.
1. Para ponerlo en la Izquierda y que no este en la derecha. En el codigo que pegaste arriba del </head>, cambia lo que esta en rojo:
right por left
Y según tu pagina lo que dice:
20px lo cambias por lo que gustes, en mi caso yo le puse 150px
#Stats10{margin:0;padding:0;line-height:initial}.anime-counter-animated{position:fixed;bottom:0;left:150px;
2. 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.
