Автоматически меняющейся текст в Blogger

Всем, привет. С помощью небольшого скрипта можно красиво отобразить цитаты, афоризмы или  важные объявления. Вывести их можно непосредственно в теле поста или гаджете HTML/JavaScript над сообщениями блога. Появляться они будут автоматически сменяя друг друга с заданным интервалом.

И красиво оформленный блог, где мудрые или нужные мысли, будут отображаться, привлекут внимание пользователей. Если подумать, существует масса вариантов применения.

Я сама встречала на многих сайтах, что - то подобное. Для блогов учителей, которые часто публикуют всякого рода высказывания, вариант просто отличный. Посмотрите ниже, как это будет выглядеть.

Код.

<style type="text/css">#HUquotes{background:#ccc url(http://beloweb.ru/wp-content/uploads/2016/04/654654654-115.jpg)no-repeat;background-size:cover;min-height:25px;padding:20px;font-family:times new roman;font-size:16pt;text-shadow:1px 1px black;letter-spacing:2px;text-transform:uppercase;text-align:center;vertical-align:middle;color:#ffffff}</style>

<script type="text/javascript">//<![CDATA[
var quote=new Array();
quote[0]=' "Хватит париться, живи как нравится!!!." ';
quote[1]=' "Золотое правило: у кого золото, у того и правила." ';
quote[2]=' "Счастье - это хорошее здоровье и плохая память" ';
quote[3]=' " Если не знаешь с какой стороны зайти, иди напролом!" ';
quote[4]=' "Умные – это те, кто зарабатывает своим умом, а мудрые – те, на кого эти умные работают." ';
quote[5]=' "Способный человек страдает от желания стать еще более способным." ';
quote[6]=' "Быть щедрым – значит давать больше, чем можешь; быть гордым – значит брать меньше, чем нужно." ';
quote[7]=' "Брак — это чудо превращения поцелуя из удовольствия в обязанность." ';
quote[8]=' "Светит солнце в пол-накала, это осень прискакала..." ';
quote[9]=' "Раньше выходили «вон», теперь выходят в «off»…" ';
var speed=2000;var q=0;function showQuote(){document.getElementById("HUquotes").innerHTML=quote[q]; q++;if(q==quote.length){q=0;}}setInterval('showQuote()',speed); //]]></script><br />
<div id="HUquotes">
</div>

В первом коде  CSS можно настроить стили на своё усмотрение. В качестве фона блока установлена картинка (её адрес), поменяйте на свою при желании. В строки, отмеченные синим цветом, пишите свой текст.

Можно добавлять дополнительные строки, соответственно добавляя порядковый номер, как -то так.

quote[10]=' "Раньше выходили «вон», теперь выходят в «off»…" ';

Обращу ваше внимание на соблюдение всех символов в коде. А именно, в строках с текстом присутствуют 3 символа ( ' ).

quote[0]=' "Хватит париться, живи как нравится!!!." ';

2 кавычки в которые заключён сам текст цитаты и одиночная кавычка кода. Внимательнее.

Скорость прокрутки var speed=2000 ставьте на своё усмотрение.

Возможно, вам пригодится и простой ротатор текста.

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

Введите Ваш email