CPA заработок или Как заработать свои первые 100 000 рублей! БЕСПЛАТНО!


среда, 21 марта 2012 г.

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

Эффект увеличения картинок на 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".

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


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

Хотите получать свежие статьи?

0 коммент.:

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

Посещаемость сайта