Как добавить в Blogger: эффект вращения миниатюр с зумом в гаджет популярные сообщения с использованием CSS 

Привет друзья! Продолжаем совершенствовать блоги, делая их ещё более привлекательными для ваших посетителей. Сейчас время позднее, глазки закрываются, поэтому я не буду подробно расписывать достоинство такого виджета. Лучше сразу Вам продемонстрирую: наведите мышкой на миниатюру в популярных сообщениях тут. Ну как? Понравилось? Если да, то вперёд. Прежде чем мы приступим колдовать с нашим шаблоном, необходимо сначала добавить гаджет популярных  сообщений на боковую панель Blogger. Настройте его. Теперь нажмите на сохранить шаблон. Если  у Вас уже добавлен этот виджет, переходим Шаблон - Изменить HTLM, ищем эту строчку
]]></b:skin> не забываем пользоваться  клавишей (Ctrl+F) и сразу после неё вставляем код:

<style type='text/css'>
.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) ;}
</style>

Сохраняем шаблон. Бежим проверять,что у нас получилось. Поиграли с красивым эффектом?Пора зазывать друзей и демонстрировать изменения в Вашем блоге. Желаю удачи. Пожалуйста оставляйте комментарии, поделитесь Вашими успехами.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


10 коммент. :

  1. Пожалуйста.Действительно круто.

    ОтветитьУдалить
  2. Изменить HTLM, ищем эту строчку
    ]]> не забываем пользоваться клавишей (Ctrl+F) и сразу после неё вставляем код

    ]]>
    ne moqu nayti Шаблонe .. kak mne zdelat. tam daje mesto netu ctob postavit qalocku... pomoqite

    ОтветитьУдалить
    Ответы
    1. Сделайте так - Шаблон - Изменить HTLM - форматировать шаблон, потом Ctrl+F,в открывшееся окошко вставляем ]]></b:skin> и нажимаем Enter

      Удалить
  3. Здравствуйте, Сергей!
    Сделала все, как Вы написали, а мне пишут: "Фраза не найдена". Проверяю наличие виджета "Популярные сообщения" - есть, в блоге отображается. Вставляю в окошко поиска ]]>, получаю: "Фраза не найдена".

    Где может быть ошибка?

    ОтветитьУдалить
    Ответы
    1. Привет!Тег ]]></b:skin> поищите где то строчка 70-100.Там черная стрелка,нажмите на неё чтобы развернуть и прокрутите вниз.Там найдете искомый тег.Удачи. :)

      Удалить
    2. Спасибо, Сергей за быстрый и подробный ответ,
      "с лупой" прошерстила все строчки от 70 до 130. Нет там такого тега... Что ж, видно - не судьба :(

      Удалить
    3. Привет!Ищите лучше.Ниже 70.У всех шаблоны разные.

      Удалить