Красивый и функциональный блогролл слайдер

Здравствуйте, дорогие читатели!

Люблю Интернет за оперативную реализацию идей, связанных с дизайнерскими и техническими потребностями создания, совершенствования и продвижения блогов.

Например, появилось у меня желание установить на свой блог новый блогролл. И хотелось, что бы он не выглядел, как набор обыкновенных ссылок на самые читаемые сайты.

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

Эти фантазии воплотил молодой, но чрезвычайно талантливый разработчик из Пакистана, автор блога My Blogger Tricks.

Он придумал замечательную галерею слайдов, которая (для облегчения процесса установки) заключена в один общий код. При этом использовались Jquey, JavaScript, CSS и HTML.

Был создан совместимый с Blogger виджет, который я без особого напряжения переделал в блогролл.

Посмотреть готовый действующий слайдер можно в сайдбаре, на Главной странице моего блога, справа:

Кроме внешних достоинств, этот слайдер обладает ещё и богатой функциональностью.

При наведении курсора, в верхней части картинки появляется связанная с ней надпись. Каждый слайд - активная ссылка на определённую страницу. Просматривать можно как в ручном, так и в автоматическом режиме.

Надеюсь, этот красивый виджет порадует моих читателей и принесёт дополнительный трафик на блоги друзей.

Установка слайдера в Blogger

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

2. В окрывшейся форме выбираем "HTML/JavaScript"

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

3. Вносим в код персональные изменения (о которых ниже) и сохраняем

4. Перетягиваем виджет в выбранное место и опять сохраняем

Теперь - о персональных настройках кода. Автор дал своему слайдеру размеры 300 пикселей по ширине и 200 пикселей по высоте (можно изменить). Рекомендую предварительно подготовить фотографии в Фотошопе, ограничив размер параметрами слайдера.

Затем загрузите фото на любой бесплатный хостинг изображений (например Picasa).

а) Вместо "IMAGE LINK" вставляем URL изображения

б) Вместо "#" вносим адрес целевой страницы

в) Вместо "DESKRIPTION" вписываем описание целевой страницы, которое будет видно при наведении курсора

г) Значение 2000 определяет скорость смены картинок (я заменил его на 2500)

* * *

У этого слайдера, благодаря его богатой функциональности, потенциально много областей применения. Наример, можно показать читателям самые удачные статьи, или другие свои проекты.

Учитывая универсальность, стильный вид и простоту установки - считаю эту разработку очень удачной.

Со всеми, кто разделяет мой выбор интересных блогов, могу поделиться готовым кодом (скромно добавив к слайдам и свой скриншот)). Обращайтесь через форму "Контакты" под шапкой блога.

источник

Знаю как сделать слайдер для блога на 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. Имеющие определенное понимание всех этих значков и закарючек, могут даже изменить коды под свои нужды. Я с этим не разбирался, поскольку особого таланта не имею. Все установлено «как есть».