Приглянулся мне тут один слайдер ссылок. Называется он Dynamic News и предназначается для показа заголовков любой валидной rss ленты со всплывающим фрагментом текста (то есть статьи).
Ниже я дам готовое решение, а любознательные пользователи могут скачать скрипт со стилями и самостоятельно настроить этот слайдер.
Варианты использования в Blogger: динамический показ заголовков статей (фид определённого ярлыка) где-нибудь в футере или над статьями в html/javascript виджете блогспота. Правда на данный момент у меня лично Blogger отключил RSS, работают только Atom фиды.
Сначала смотрим демку, в которую вставил rss ленту социальной сети ↓
Скриншот:
Живое демо на тестовом блоге.
Установка в Blogger (почти аналогично и для других движков):
- Делаем бекап шаблона.
- Проверяем наличие jQuery, если нет, то ставим.
- В редакторе шаблона перед тегом </head> вставляем ↓
а) google feed API:
<script src="https://www.google.com/jsapi" type="text/javascript"></script>Ключ указывать теперь не требуется.
б) ссылку на скрипт dnews.js:
<script src="http://planeta.omg-linux.ru/docs/dnews/dnews.js" type="text/javascript"></script>
в) ссылку на стили dnews.css:
<link href="http://planeta.omg-linux.ru/docs/dnews/dnews.css" rel="stylesheet" type="text/css"></link>
г) скрипт с настройками слайдера Dnews:
<script type="text/javascript"> google.load("feeds", "1"); $(document).ready(function() { $('#snews').dnews({ feedurl: 'http://blogabloger.ru/rss', showdetail: true, entries:10, controls: false}); }); </script>Где:
google.load("feeds", "1") - это загружаемый модуль
feedurl: 'http://blogabloger.ru/rss' - ссылка на отображаемую rss ленту любого сайта
showdetail: true - всплывающее описание к заголовку поста в rss ленте
entries:10 - количество постов задействованных в слайдере
controls: false - панелька со стрелками прокрутки (false - отключена)
Дополнительно:
switchinterval - настрока пролистывания заголовков постов из rss ленты в милисекундах (по умолчанию - 5000)
controlsalwaysvisible - прятать (false) или не прятать (true) панельку со стрелками прокрутки
И последний момент:
нужно создать html/javascript виджет в админке Blogger'а и засунуть туда следующий html код:
<div id="containeraq"> <div class="demo"> <div class="news-wrapper" id="snews"> <div class="news"> </div> </div> </div> </div>
Настоятельно рекомендую скрипт dnews.js и стили dnews.css переложить на собственный хостинг, например, на Dropbox.
Внешний вид.
Редактируем файл dnews.css
Всплывающее описание.
Редактируем файл dnews.js, где в строке:
if (description.length > 50) description = description.substr(0, 50);
50 означает количество символов в описании. Разумеется, с увеличением числа знаков, придётся увеличить и чёрную область для них.
Источник RSS Driven Dynamic jQuery News Slider Plugin: Dynamic News.
Картинки не отображает?
ОтветитьУдалитьНет, не отображает. Даже чисто внешне ему негде их показывать. Я прописал ограничивающий контейнер.
ОтветитьУдалитьДля картинок нужно нечто другое.