Плавное увеличение изображений на блоге.



Поставить код для плавного увеличения изображения на Блогспот несложно.Да и визуальный эффект от плавного увеличения картинок при наведении курсора мышки может привлечь посетителя и подтолкнуть его к определённым действиям.Для Блогер идею этой занимательной штучки можно реализовать всего лишь вставив небольшой НТМЛ-код,который будет отвечать за увеличение всех картинок на блоге.



Код для плавного увеличения изображений



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

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



<style>.post-body img { -webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;transition: all 0.4s ease;
padding: 8px;
background: #ffffff;
border: 1px solid #d0d0d0;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post-body img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);
background: #ffffff;
border: 1px solid #cccccc;
text-decoration: none;
text-shadow: none;
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}</style>
©www.v-gol.ru
Как установить гаджет для выделения кода?

оформление тегов

гаджет автоанонсов

код для выделения цитат


Самые неразрешимые проблемы порой имеют самое простое решение.


✎Новые сообщения



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