Анонсы - бегущая строка HTML.


Бегущая строка рекламных анонсов новостей популярных постов для блога. Заставить работать бегущую строку на экране нам поможет простой код JavaScript, установленный в нужном нам месте,а немного CSS украсит и преобразит унылый вид бегающих по странице рекламируемых заголовков.


Установка кода показа бегущей строки новостей


Бегущие объявления,появляющиеся на табло,конечно же быстрее привлекут к себе внимание посетителя,чем унылая невзрачная ссылка анонса, размещённая на странице.Тем более что сегодня мы узнаем как установить себе на блог автоматический вывод заголовков статей блога. Установка кода для вывода анонсов бегущей строкой осуществляется в два этапа.Первый это добавим стиль нашим анонсам и установим в шаблон блога перед закрывающим тегом ]]></b:skin> убрав теги <style>....<style> код CSS
<style type="text/css">
.jump-link a{background-color:#408080; font-family: 'Verdana', sans-serif; font-size:14px; text-decoration:none; color:#fff; position:relative; padding:5px 20px; padding-right:30px; background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%); border-radius: 30px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 3px 0px 0px #ccc, 0px 10px 5px #408080;opacity:0.7;
</style>
Этот код универсальный и с его помощью можно изменить и приукрасить многое на страницах блога.
Анонсы в новом стиле.
Админ-панель для Blogspot
Меняем read more на кнопку.
Блок для выделения текста.
Оформление подзаголовков поста.
Вторая часть это код JavaScript,который следует установить в нужном вам месте.Это может быть, как гаджет HTML и JavaScript,так и просто отдельно взятая страница,на которой нужно будет показать бегущую строку.
<div class='jump-link'>
<script type="text/javascript">
var blog_url = "http://www.v-gol.ru";/* заменить на адрес своего блога */
var latest_post = 30;  /* Количество анонсов */
var scrolling_speed = "3";/* скорость прокрутки бегущей строки */
var close_button = false;
var info_text =false;
</script>
<script src="http://files.allbloggertricks.com/Scripts/abt-ticker.js"></script>Смотреть ещё
</div>

Настройки кода для показа бегущей строки.


Настройки подписаны и внесены непосредственно в сам код для комфортного визуального восприятия.Воспользовавшись онлайн-редактором HTML и JavaScript установите необходимые вам параметры.А цветовую гамму для оформления бегущей строки анонсов можно подобрать на странице кодов цвета для веб-страниц.

Новости по теме


Отправить комментарий