Слайдер-ротатор рубрик для Blogger


слайдер-ротатор v-gol.ru


Наверное это самый оптимальный гаджет вывода популярных сообщений для блогов blogspot на платформе  Blogger.com. Добавлена функция показа постов по категориям или ярлыкам,тем более что ротация анонсов с миниатюрами происходит  в автоматическом режиме. Настройка нового виджета популярные сообщения блоггер блогспот позволяет кардинально изменить представление о стандартных решениях для популярного гаджета анонсов сообщений.





Чем привлекателен этот гаджет так это возможностью самостоятельно задавать список показа нужных постов присвоив данному сообщению необходимый ярлык или категорию.Стандартный вариант оформления гаджета прост и мало чем отличается от многих похожих вариантов вывода показа последних сообщений.Данный вариант с доработками позволяет использовать его как единое целое,так и по раздельности.

Установка слайдера-ротатора постов.


Для работы гаджета необходимо подключение jQuery. Проверив и при необходимости подключив её дальше в шаблон блога перед закрывающим тегом  </head> добавляем ява скрипт с предварительно сделанными настройками и изменениями прописанными в коде.
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript"> // начало секции
makeSlider({
    url: 'http://v-gol.ru',  // заменить урл на свой
speed:1800, // скорость,задержка
    labelName: "Qquery", // категория,как в браузере
    thumbWidth: 200,
    interval: 7000, // задержка кадра
     numPost: 10,  // количество постов
summaryLength: 120,  // размер превью
showNav: "next/prev",
    navText: {
        prev: "&lt;&lt;&lt;", // переход символ
        next: "&gt;&gt;&gt;"

    },

    containerId: "slider-rotator-1"
}); // конец секции
makeSlider({url: 'http://v-gol.ru',
    speed:1800,
    labelName: "Эффекты%20GSS",
    thumbWidth: 200,
    interval: 8000,
     numPost: 10,
summaryLength: 120,
showNav: "next/prev",
    navText: {
        prev: "&lt;&lt;&lt;",
        next: "&gt;&gt;&gt;"

    },
 
    containerId: "slider-rotator-2"
});
makeSlider({url: 'http://v-gol.ru',
speed:1800,
    labelName: "Blogspot",
    thumbWidth: 200,
    interval: 9000,
     numPost: 10,
summaryLength: 120,
showNav: "next/prev",
    navText: {
        prev: "&lt;&lt;&lt;",
        next: "&gt;&gt;&gt;"

    },
 
    containerId: "slider-rotator-3"
});
</script>

CSS-стили копируем первую часть и устанавливаем в шаблон.Эта часть отвечает за настройки показа слайдера-ротатора.Вторая часть это настройки блока для показа расположенного внизу этой страницы и если такой вариант подачи анонсов вас устроит,то и вторую часть следует добавить к первой.Так же здесь добавлен код CSS,который позволяет скрыть все лишние блоки на странице.
<style type="text/css">
/*  Blogger Feed Rotator v-gol.ru plugin */
.slider-rotator{width:200px;height:220px;border:1px solid #ddd;background-color:white;padding:10px;font:normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;color:#000;margin:0 auto;position:relative;overflow:hidden;text-align:left}.slider-rotator.loading{background-image:url('https://2.bp.blogspot.com/-0McskWMCXLM/VtsC9K4YwkI/AAAAAAAAEuA/O_4tgzkMulY/s1600/v-gol.ru%2Brotator.gif');background-position:50% 50%;background-repeat:no-repeat}.slider-rotator .slider-item{position:absolute;padding:0px;background-color:white;top:0;right:0;bottom:auto;left:0;display:none}.slider-rotator .image-wrapper{}.slider-rotator .detail-wrapper{}
.slider-rotator img{display:block;padding:0 20;margin:0 10;max-width:150px;max-height:120px;}.slider-rotator h4{font-weight:bold;font-size:120%;text-transform:none;color:#044;margin:10px 10 0}.slider-rotator h4 a{color:inherit;text-decoration:none}.slider-rotator h4 a:hover{padding:2px 20px;color:#797;text-decoration:none;}.slider-rotator p{ margin:5px 10 0}.slider-rotator-nav{text-align:center}.slider-rotator-nav a{display:inline;background-color:#044;color:white;padding:2px 20px;line-height:2.6em;margin:0 1px;text-decoration:none}.slider-rotator-nav a:hover{background-color:#ccc}.slider-rotator-nav a.current{background-color:#ccc}
</style>


<style type="text/css">/*CSS #v-gol.ru block*/
.slider-rotator-wrapper {
  width:100%;
  padding:10px 5px;
  border:1px solid #ccc;
  background-color:white;
  margin:0 auto;
}
.slider-rotator-wrapper .grid {
  float:left;
  margin: 5px;
}

.clear {clear:both}
</style>

<style>/*CSS для сокрытия гаджетов со страницы*/
#HTML12,
#FeaturedPost1,
#PopularPosts1  {
display: none;}
</style>

НТМЛ-часть кода тоже представлена в полном варианте,но для показа гаджета в сайдбаре блога необходимо просто скопировать один из нужных вариантов такого вида <div id="slider-rotator-1" class="slider-rotator loading"></div>  и установить в гаджет НТМЛ на боковой колонке блога.

Читать дальше

Как заработать на опросахЗаработать уже сегодня
Монетизация мобильного трафика
Партнёрские программы рунета
Тизерная реклама-отзывы
<div id="slider-rotator-wrapper" class="slider-rotator-wrapper">
    <div class="grid">
        <div id="slider-rotator-1" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-2" class="slider-rotator loading"></div>
    </div>
    <div class="grid">
        <div id="slider-rotator-3" class="slider-rotator loading"></div>
    </div>
<div class="grid"> </div>
    <div class="clear"></div>
</div>

Настройка виджета популярные сообщения.




Количество ротаторов добавленных в скрипт может быть любым просто копируем часть скрипта изменяем порядковый номер и название ярлыка и добавляем в код скрипта.Так же добавляем ещё одну секцию для показа.Скрыть показ различных вариантов категорий на странице можно элементарно добавив в конце поста в режиме редактирования небольшой CSS код такого вида,куда можно внести все мешающие гаджеты на странице. Название добавленных гаджетов можно узнать или из шаблона блога или же наведя курсор мышки на соответствующий гаджет.

Можно добавить два слайдера различных ротатора последних сообщений по категориям не мешающих друг другу используя вкладки-табы установка которых так же проста и доступна. Вариантов применения и использования много,было бы желание.


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