5 красивых эффектов для иллюстраций блога

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

Кроме того,картинки в оформлении статей являются проверенным, надёжным источником поискового трафика.


Предлагаю вам 5 красивых, оригинальных эффектов для иллюстраций, основанных на  технологиях JQuery 5 (источник)

1. При наведении курсора картинка будет увеличиваться в размере, приближаясь к читателю (с появлением тени)
2. Тёмное изображение постепенно станет "просветлённым"
3. Контрастные, ясные участки открываются в случайном порядке
4. Вертикальные полосы просветления от края до края
5. Изображение открывается квадратами - от угла до угла.

Посмотреть эти эффекты в действии можно на испытательном стенде.

Применить такое необычное оформление для иллюстраций своего блога Blogger можно всего за несколько простых шагов.

Добавить эффекты для иллюстраций в Blogger

1. Заходим в свой аккаунт Blogger, выбираем нужный блог. Затем Шаблон

-- Изменить HTML -- Приступить

2. Активизируем "Расширить шаблоны виджета". С помощью комбинации Ctrl + F находим в коде отрывок

</head>

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

3. Находим отрывок

]]></b:skin>

и прямо перед ним вставляем код CSS, который находится здесь

4. Сохраняем шаблон.

Теперь для получения эффекта нужно внести изменения в HTML-код нужного изображения.

Допустим, мы загрузили иллюстрацию с жёсткого диска компьютера с помощью редактора сообщений Blogger.

Перейдя в редакторе на вкладку HTML мы видим загруженное изображение в виде такого кода:

<a href="http://3.bp.blogspot.com/-dYc7-vjDbFA/UA7g5hjM96I/AAAAAAAACkE/Ard0yIZtXRk/s1600/clovelly.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-dYc7-vjDbFA/UA7g5hjM96I/AAAAAAAACkE/Ard0yIZtXRk/s1600/clovelly.jpg" /></a>

Добавим к этому коду класс эффектов class="effect1" сразу после <img , как показано ниже.

<a href="http://3.bp.blogspot.com/-dYc7-vjDbFA/UA7g5hjM96I/AAAAAAAACkE/Ard0yIZtXRk/s1600/clovelly.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="effect1"border="0" src="http://3.bp.blogspot.com/-dYc7-vjDbFA/UA7g5hjM96I/AAAAAAAACkE/Ard0yIZtXRk/s1600/clovelly.jpg" /></a>

Если в добавляемом отрывке будет стоять цифра 1 (как в примере) - мы получим эффект №1. Изменяя цифры от 1 до 5 мы сможем получить требуемый результат для каждой отдельной картинки.

Доброй охоты всем нам!

Ваш Retliff

Сергей Мазураш aka Retliff Блоггер со стажем. Стиль публикаций отличается простотой изложения и весёлым, ироничным подходом к самым серьёзным проблемам. Cпециализируется на создании и продвижении бесплатных блогов на платформе Blogger.

Твитнуть