Сегодня шпаргалка о том, как с помощью небольшого кода CSS сделать эффект вращения миниатюр в гаджете популярные сообщения.
Этот гаджет присутствует на многих блогах. И если вы обратили внимание, он особой индивидуальностью не отличается. Картинка, анонс и выбранное количество постов. Это то, что предлагает нам сам Блоггер. Есть, конечно, альтернативные варианты. В основном за основу берётся родной гаджет и с помощью небольших дополнений в стилях CSS получается оригинальное решение и индивидуальность. Пример такого решения можно увидеть здесь. Или вот этот.
Сегодня ещё один вариант. Сделаем вращение миниатюр в гаджете самых читаемых сообщений. Заставим их покрутиться и, если кому угодно, изменим их форму.
Смотрим, что должно в итоге получиться.
![](https://2.bp.blogspot.com/-BR1DGqWH4fk/VX-ghaZulTI/AAAAAAAAEcM/o4CUt5WDXYkdj8t9Q7_HjnDK2-lbu2_Vw/s1600/%25D0%25B3%25D0%25B8%25D1%2584%2B%25D0%25BF%25D0%25BE%25D0%25BF%25D1%2583%25D0%25BB%25D1%258F%25D1%2580%25D0%25BD%25D1%258B%25D1%2585%2B%25D1%2581%25D0%25BE%25D0%25BE%25D0%25B1%25D1%2589%25D0%25B5%25D0%25BD%25D0%25B8%25D0%25B9.gif)
Как я уже выше писала нам нужно просто установить, предложенный Блоггером гаджет. Заходим в панель управления-дизайн-гаджет популярные сообщения. Делаем соответствующие настройки и сохраняем.
![](http://s017.radikal.ru/i420/1506/65/b2ca5c5a042b.jpg)
Далее идём во вкладку шаблон. Находим строку ]]></b:skin> (прочитайте, пожалуйста это сообщение, если пока не знаете, как это сделать правильно). И сразу над ней устанавливаем следующий код.
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}.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;}.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) ;}
А сейчас изменим некоторые значения стилей в коде (я их выделила цветом). Сделаем миниатюру круглой формы и поменяем цвет и толщину рамки. Имеем примерно следующее.
![](https://3.bp.blogspot.com/--S7r3NbVEWo/VX-l0FquKaI/AAAAAAAAEcM/s2PoGE8tL6Ea5EcBQMMvAgTpkQFoaJs1w/s1600/%25D0%25B3%25D0%25B8%25D1%2584%2B%25D0%25BF%25D0%25BE%25D0%25BF%25D1%2583%25D0%25BB%25D1%258F%25D1%2580%25D0%25BD%25D1%258B%25D0%25B5%2B%25D1%2581%25D0%25BE%25D0%25BE%25D0%25B1%25D1%2589%25D0%25B5%25D0%25BD%25D0%25B8%25D1%258F%2B1..gif)
В коде в 3-х местах меняем значение border-radius: 5px на 50 .
border: 2px solid #CCC;height: 80px;width: 80px- ширина рамки, цвет, высота и ширина миниатюры. То же самое во второй строке (при наведении курсора), выделенной красным.
Выбирайте для себя нужный вариант. Подбирайте соответствующие цветовые решения. Можно воспользоваться генератором цвета. И будет у вас свой уникальный виджет популярных сообщений.
Гаджет популярные сообщения с кнопкой Гугл+.
На этом заканчиваю. Спасибо, что заглядываете в мои шпаргалки. Всем удачи.
Мне будет очень приятно, если вы поделитесь этим с друзьями.
здесь можно оформить подписку на новые шпаргалки
Я бы воспользовался этим, но я перешёл на wordpress.
ОтветитьУдалитьРамазан, что подтолкнуло на переезд. Или новый блог там сделал.
УдалитьПросто решил попробовать и там. Понравился, и решил остался там. Оказывается там даже проще чем в blogger.
ОтветитьУдалитьНу что ж Рамазан. В добрый путь. Ссылочку потом киньте, ладно.
УдалитьСпасибо, ссылка тот же bloxpot.ru
ОтветитьУдалить