Баннеры статистики бегущей строкой для 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