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

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

Krasiviy effekt dla illustraziy

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

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

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

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

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

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

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

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

— Изменить 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



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

  1. Спасибо за интересную информацию. В плане подачи изображений площадка Blogger, пожалуй, уступает WP и подобные улучшения очень даже востребованы.
    Кстати, а известно какое-нибудь решение для Blogger, как организовать показ изображений из галереи превью?

    Ответить

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