Баннеры статистики бегущей строкой для Blogger

статистика
Привет, друзья. Бегущие счётчики статистики с картинкой, почему бы и нет? Достаточно креативно и весело 😄. Думаю, что кому - то и пригодится такой подход.
При наведении курсора строка с баннерами останавливается.
Недавно я писала пост как скрыть счётчик статистики с глаз долой. Сегодня же всё с точность до наоборот. Пускай себе бегают.

Установка совершенно простая. Предложу 2 варианта - движение влево и вправо. Скопируйте понравившейся вариант и установите его код в подвале блога в гаджет HTML/JavaScript. А пока прошу посмотреть как это будет выглядеть в самом низу блога.


Вам только понадобится заменить коды своих баннеров. Я их отметила другим цветом. Для наглядности взяла счётчик LiveInternet и Майл. Можно добавлять ещё другие если есть в этом необходимость.

Движение баннеров в левую сторону.

<marquee direction="left" onmouseout="start()" onmouseover="stop()">
<img src="http://justclickit.ru/flash/transport/transport%20(502).gif"border="0" alt=""/>

<! -- код счётчика liveinternet -- >
<!--LiveInternet counter--><script type="text/javascript">
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet' "+
"border='0' width='31' height='31'><\/a>")
</script> <!--/LiveInternet-->

<! -- статистика майла -- >
<script type="text/javascript">//<![CDATA[
var a='',js=10;try{a+=';r='+escape(document.referrer);}catch(e){}try{a+=';j='+navigator.javaEnabled();js=11;}catch(e){}
try{s=screen;a+=';s='+s.width+'*'+s.height;a+=';d='+(s.colorDepth?s.colorDepth:s.pixelDepth);js=12;}catch(e){}
try{if(typeof((new Array).push('t'))==="number")js=13;}catch(e){}
try{document.write('<a href="http://top.mail.ru/jump?from=2249124">'+
'<img src="http://d1.c5.b2.a2.top.mail.ru/counter?id=2249124;t=51;js='+js+a+';rand='+Math.random()+
'" alt="Рейтинг@Mail.ru" style="border:0;" height="31" width="88" \/><\/a>');}catch(e){}//]]></script>
<! -- \статистика майла -- >
</!></!></!></marquee>


Движение баннеров в правую сторону.

<marquee direction="right" onmouseout="start()" onmouseover="stop()">

<!--LiveInternet counter--><script type="text/javascript">
document.write("<a href='//www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet' "+
"border='0' width='31' height='31'><\/a>")
</script> </a><!--/LiveInternet-->

<! -- Статистика майла -- >
<script type="text/javascript">//<![CDATA[
var a='',js=10;try{a+=';r='+escape(document.referrer);}catch(e){}try{a+=';j='+navigator.javaEnabled();js=11;}catch(e){}
try{s=screen;a+=';s='+s.width+'*'+s.height;a+=';d='+(s.colorDepth?s.colorDepth:s.pixelDepth);js=12;}catch(e){}
try{if(typeof((new Array).push('t'))==="number")js=13;}catch(e){}
try{document.write('<a href="http://top.mail.ru/jump?from=2249124">'+
'<img src="http://d1.c5.b2.a2.top.mail.ru/counter?id=2249124;t=51;js='+js+a+';rand='+Math.random()+
'" alt="Рейтинг@Mail.ru" style="border:0;" height="31" width="88" \/><\/a>');}catch(e){}//]]></script>
<! -- \Статистика майла -- >
<img src="http://justclickit.ru/flash/mouse/mouse%20(113).gif" border="0" alt=""/>
</marquee>


Бегущие впереди картинки PNG или Gif меняйте на свои - паровозики, самолёты, олени и т.д. Пусть тянут вашу статистику.

Подобным образом можно вывести любую нужную информацию. Ссылки на популярные статьи блога, приветствия, объявления. Я, используя шрифт Font Awesome  сделала пример бегущей строки с социальными иконками там же на тестовом блоге.Тут лишь бы фантазию включить.

Код.

<marquee direction="left" onmouseout="start()" onmouseover="stop()" style="color: #0f9d58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">
<i aria-hidden="true" class="fa fa-user-circle fa-2x"></i>
<i aria-hidden="true" class="fa fa-google-plus  fa-lg"></i>
<a href="#">ГУГЛ</a> <i aria-hidden="true" class="fa fa-facebook  fa-lg"></i>
<a href="#">FACEBOOK</a><i aria-hidden="true" class="fa fa-vk  fa-lg"></i>
<a href="#">ВКОНТАКТЕ</a></marquee>


Синим цветом отметила все стили CSS. Вместо решёток адреса страниц, куда ведёт ссылка и соответственно название.

Если хотите оформить красиво все счётчики статистики в блоге, то этот пост тоже может пригодиться.

Спасибо всем за визит и до встречи. 

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email


9 комментариев:

  1. Мышка с сыром прикольная! Интересно!

    ОтветитьУдалить
  2. Ага, ухватила кусочек тайком. Ты на Васькин блог можешь котика бегущего сделать.

    ОтветитьУдалить
  3. Веселая идея!)))) Я даже поставил себе бота на блог, тоже развлекался))) https://hermesmdm.blogspot.com/p/blog-page_879.html

    ОтветитьУдалить
  4. Вика, спасибо за идею! А что если фантазия не включается, как выйти из положения? У меня почему-то исчезли лучшие комментаторы, что делать? Добавляю новый JavaScript
    работают оба, один удаляю, все исчезает. Спасибо!!!

    ОтветитьУдалить
    Ответы
    1. Алла, с этими гаджетами комментариев постоянно бываю проблемы. Я раньше вообще штук 10 перепробовала и все слетели. Не помню какой у Вас был. Но вот есть ещё 3 варианта, попробуйте вроде кто установил пока работают. http://www.shpargalochki.ru/2016/09/gadzhet-poslednie-komment-3-varianta.html
      Вообще у Вас был гаджет последние комментарии или лучшие комментаторы- это разные вещи.

      Удалить
  5. Вика, у меня лучшие комментаторы.

    ОтветитьУдалить
  6. Алла, я не знаю какой код у Вас был. Я вот свой попробовала на этом блоге в подвале.http://www.dela-domashnie.ru/ Если устраивает дайте адрес вышлю код, попробуете его.

    ОтветитьУдалить
  7. Ответы
    1. Пожалуйста, Семён. Что - то давно в ленте не видела ваших обновлений. Ну ка, пойду посмотрю.

      Удалить

Пользовательский поиск