Эффект вращения картинок в популярных статьях

Просмотров: 267

effektДоброго дня, дорогие читатели моего блога! Сегодня я покажу Вам, как добавить к виджету популярные сообщения, очень красивый эффект вращения картинок с зумом. Работает виджет так, при наведении курсора мышки на изображение в популярных статьях, картинка начинает вращаться и увеличиваться в размерах. Посмотреть такой эффект, можно здесь Всё для Blogger (к сожалению сменил шаблон). Понравилось? Будем продолжать совершенствовать блоги, делая их ещё более привлекательными для читателей и дорогих гостей.

Прежде чем мы приступим колдовать с нашим шаблоном, вам необходимо сначала добавить гаджет популярных  сообщений на боковую панель блога.

Эффект вращения картинок с зумом в популярных статьях

Заходим в панель инструментов Blogger. Далее шаблон - изменить HTLM, ищем (при помощи сочетаний клавиш (Ctrl + F) в новом редакторе появится окошко) эту строчку ]]></b:skin>  и сразу перед ней вставляем небольшой код.

Код для вставки:

<style type='text/css'><br>.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}<br>.PopularPosts ul li img {padding:0;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;height: 80px;width: 80px;}<br>.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}<br></style>

Сохраняем шаблон. Готово. Всем пока. Всего доброго.

С уважением, Сергей


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