Эффект увеличения картинок на Blogspot

Друзья всeм привет. Рад вaс видеть на блоге bloguspeh.ru. Сегoдня, я хочу показать вaм, как сделать классный эффект увеличения картинок на Blogspot, при наведении курсора. И чтобы посмотреть его в действии, перейдите на мой Демо блог и наведите курсор на картинку.

Ну как вам, по-моему выглядит очень даже не плохо. Такой эффект отлично подойдёт тем блогам, на которых присутствует большое количество картинок большого размера. Ведь с таким эффектом можно вставить гораздо больше уменьшенных изображений в рамках одного поста, а при наведении курсора на них, посетители смогут увидеть картинки с исходным размером. Так же вес маленьких картинок меньше чем у больших и поэтому страница вашего блога будет загружаться намного быстрее, что благотворно будет влиять на поведенческие факторы. Кстати, здесь вы можете посмотреть как добавить логотип перед названием сообщения.

Ну а сейчас друзья, давайте приступим к созданию эффекта увеличения картинок на Blogspot. Для этого заходим в Панель управления => нажимаем кнопку Дизайн => нажимаем Изменить HTML, и для того чтобы перестраховаться делаем резервное копирование шаблона. Далее, выполняем всё по пунктам:

1) При помoщи Ctrl+F, находим этoт код: ]]>
2) Прямо над ним вставляем следующий код:

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:45%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

Внимание! Если вы хотите сместить увеличенное изображение вправо или влево, то можете изменить выделенную часть кода left:45% ( цифровое значение больше или меньше).

3) Теперь, опять при помощи кнопок Ctrl+F ищем код:
4) И над ним вставляем код который находится ниже:

5) Всё готово, теперь сохраняем шаблон.

Теперь, когда вы пишите новую статью и вставляете изображение, и хотите чтобы ваша картинка увеличивалась при наведении на неё курсора, вам нужно добавить в код рисунка это значение: class="zoom".

Пример:

class="zoom" href="https://yachtingstar.at.ua/avatar/88/001.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">

Для большей наглядности и понимания, я записал для видео инструкцию всего процесса установки данного эффекта на блог. Запись без звука, что-то случилось с микрофоном, но думаю и так всё будет понятно:

Ну вот дрyзья и всё. Сегодня мы с вами узнали как сделать эффект увеличения картинок на Blogspot. Надеюсь, что моя статья оказалaсь для вас полезной и интересной. Если так, то не забудьте поделиться нею в социальных сетях со своими друзьями, так же буду рад вашим комментариям. Ещё можете почитать статьи о том, как установить слайдер на главной странице Блоггера и как сделать отгибающийся уголок на Blogspot. Ну что ж, желаю вам удачи и до скорой встречи.