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

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

Krasiviy effekt dla illustraziy


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


Предлагаю вам 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.



10 комментариев:

  1. Ой, как интересно! Спасибо большое, Сергей! Непременно воспользуюсь.

    ОтветитьУдалить
  2. Красиво. А для WordPress это подойдёт?

    ОтветитьУдалить
  3. @Сергей Кожанов Не могу Вам ответить :) - я не разбираюсь в тонкостях WP!

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

    ОтветитьУдалить
  5. Как здорово. Воспользуюсь обязательно.

    ОтветитьУдалить
  6. Спасибо за тёплую атмосферу, Вы художественно—волшебный блоггер!

    ОтветитьУдалить
    Ответы
    1. Спасибо! Покраснел от удовольствия!:)

      Удалить
  7. Да, Olena Korol точно подметила, а от себя добавлю, что попав на Ваш блог не хочется уходить.

    ОтветитьУдалить
    Ответы
    1. Спасибо на добром слове! А уходить вовсе не обязательно!:)

      Удалить

Буду очень признателен за Ваши доброжелательные комментарии!
Любые попытки втянуть автора и читателей в дискуссию, а так же ссылки на посторонние ресурсы - будут удалены.
Всем любителям "конструктивной критики" рекомендую прочитать статью http://maxpastukhov.com/critics