Знаю как сделать слайдер для блога на Blogger

Вы могли видеть на различных блогах такую ​​фишку, как слайдер — блок, где меняются изображения и названия статей. Хочу вам рассказать, как установить такой слайдер в блог на Blogger, ведь именно там я начинал свою блоггерскую деятельность. Увидеть, как выглядит слайдер в действии вы можете .

Этот слайдер стимулирует читателей переходить по ссылкам на другие ваши материалы (не забываем о поведенческих факторах!).

Хочу поблагодарить блоггера , у которого я нашел Nivo Slider, адаптированный под Blogger.

Этот слайдер достаточно «легок» и не перегружает страницу, в отличие от подобных фишек для Вордпресс. Дизайн самого блока достаточно стильный и симпатичный. Слайдер выполняет свою работу с помощью скрипта, нет необходимости добавлять в код ссылки, тексты новых публикаций, ведь последние посты и иллюстрации добавляются автоматически через фид. Слайдер легко устанавливается, весь процесс не займет более 10 минут (проверил).

Устанавливается слайдер следующим образом (напоминаю, это виджет для Blogger!):

1. Заходим в Панель инструментов — Дизайн — Изменить HTML;

2. Обязательно сохраните свой существующий шаблон на компьютере (если вдруг что);

3. Обратите внимание, что на опции «Расширить шаблоны виджета» не должен стоять «флажок»;

4. В шаблоне находите значение:

]]></b:skin>

и перед ним вставляете такой код:

/* START ——————————————————————– Automatic Content Slider for Blogger using Nivo Slider By / ——————————————————————– Nivo Slider */ /*—–START Default Theme —————————————-*/ .theme-default .nivoSlider { position:relative; background:#fff url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/loading.gif) no-repeat 50% 50%; -webkit-box-shadow: 0px 1px 5px 0px #4a4a4a; -moz-box-shadow: 0px 1px 5px 0px #4a4a4a; box-shadow: 0px 1px 5px 0px #4a4a4a; } .theme-default .nivoSlider img { position:absolute;top:0px;left:0px;display:none; } .theme-default .nivoSlider a { border:0;display:block; } .theme-default .nivo-controlNav { position:absolute;left:50%;bottom:-42px; margin-left:-40px; /* Tweak this to center bullets */ } .theme-default .nivo-controlNav a { display:block;width:22px;height:22px; background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/bullets.png) no-repeat; text-indent:-9999px;border:0;margin-right:3px;float:left; } .theme-default .nivo-controlNav a.active { background-position:0 -22px; } .theme-default .nivo-directionNav a { display:block;width:30px;height:30px; background:url(http://i1133.photobucket.com/albums/m596/abu-farhan/nivo-slider/default/arrows.png) no-repeat; text-indent:-9999px;border:0; } .theme-default a.nivo-nextNav { background-position:-30px 0;right:15px; } .theme-default a.nivo-prevNav { left:15px; } .theme-default .nivo-caption { font-family: Helvetica, Arial, sans-serif; } .theme-default .nivo-caption a { color:#fff; border-bottom:1px dotted #fff; } .theme-default .nivo-caption a:hover { color:#fff; } /*—– END Default Theme —————————————-*/ /* The Nivo Slider styles */ .nivoSlider { position:relative; } .nivoSlider img { position:absolute;top:0px;left:0px; } /* If an image is wrapped in a link */ .nivoSlider a.nivo-imageLink { position:absolute;top:0px;left:0px;width:100%;height:100%;border:0; padding:0;margin:0;z-index:6;display:none; } /* The slices and boxes in the Slider */ .nivo-slice { display:block; position:absolute; z-index:5; height:100%; } .nivo-box { display:block; position:absolute; z-index:5; } /* Caption styles */ .nivo-caption { position:absolute; left:0px; bottom:0px; background:#000; color:#fff; opacity:0.8; /* Overridden by captionOpacity setting */ width:100%; z-index:8; } .nivo-caption p { padding:5px; margin:0; } .nivo-caption a { display:inline !important; } .nivo-html-caption { display:none; } /* Direction nav styles (e.g. Next & Prev) */ .nivo-directionNav a { position:absolute; top:45%; z-index:9; cursor:pointer; } .nivo-prevNav { left:0px; } .nivo-nextNav { right:0px; } /* Control nav styles (e.g. 1,2,3…) */ .nivo-controlNav a { position:relative; z-index:9; cursor:pointer; } .nivo-controlNav a.active { font-weight:bold; } .theme-default #slider { margin:7px auto 50px auto; width:500px; /* Make sure your images are the same size */ height:199px; /* Make sure your images are the same size */ } .theme-pascal.slider-wrapper, .theme-orman.slider-wrapper { margin-top:150px; } .clear { clear:both; } /* END ——————————————————————– Automatic Content Slider for Blogger using Nivo Slider By / ——————————————————————– Nivo Slider */

5. Находите в шаблоне значение:

</body>

и перед ним вставляете код:

<!– jQuery –> <script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js’ type=’text/javascript’/> <script src=’http://catur-at-abu-farhan.googlecode.com/svn/trunk/nivo-slider-modified.min.js’ type=’text/javascript’/> <script type=’text/javascript’> $(window).load(function() { $('#slider').nivoSlider(); }); </script>

6. Сохраняете шаблон;

7. Заходите в Панель инструментов — Дизайн — Элементы страницы — Добавить гаджет;

8. Выбираете HTML / JavaScript;

9. Вставляете код:

<div class=”slider-wrapper theme-default”> <div class=”ribbon”> </div> <script style=”text/javascript” src=”http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-nivo-slider.js”></script> <script style=”text/javascript”> var numposts_gal = 6; //number of posts var image_height = 199; //image height var image_width = 500; //image width </script> <script src=”http://ВАШ-САЙТ.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts”></script> </div>

10. Вместо http://ВАШ-САЙТ.blogspot.com вставляете вашу ссылку;

11. Сохраняете;

12. Перетаскиваете гаджет в нужное место;

13. Сохраняете.

Ваш слайдер готов к работе.

Несколько практических советов из опыта:

1. Изменить размеры слайдера можно, вставив нужные значения вместо выделенных красным цветом в кодах.

2. Обязательно вставляйте иллюстрации к постам, иначе в слайдере будет некрасивая серая надпись No image.

3. Желательно, чтобы картинки были примерно такого же размера, как размер слайдера, хотя бы по ширине.

4. Практика «ведущих блоггеров» показывает, что лучшее место для расположения слайдера — под шапкой блога.

5. Имеющие определенное понимание всех этих значков и закарючек, могут даже изменить коды под свои нужды. Я с этим не разбирался, поскольку особого таланта не имею. Все установлено «как есть».