суббота, 22 июля 2017 г.

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

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

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

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

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

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

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

slider


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

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

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

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

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


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

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

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

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

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

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

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

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

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


* * *

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

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

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

Комментариев нет:

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

coinpayu
.......
seosprint.net
   
scarlet-clicks.info

Друзья! Вы можете поддержать сайт материально!

Друзья! Вы можете поддержать сайт материально!

Яндекс.Метрика Генератор ТИЦ