Новое в блоге
Loading...
24 мая 2012 г.

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

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

Как добавить в Blogge r- Эффект вращения картинок с зумом в популярных сообщениях,
с использованием CSS

Как, как-да очень просто (что то у меня сегодня отличное настроение). Идём -- Шаблон- Изменить HTLM, ищем эту строчку ]]></b:skin> и сразу перед ней вставляем небольшой код:
<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>
Сохраняем шаблон.Теперь можете полюбоваться на свою работу. Да, кто случайно заглянул ко мне в гости прошу присоединяйтесь к моему супер блогу и не забываем про мою страницу на Google плюс. Вот вроде и всё. Удачи. Жду комментариев.

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

17 коммент. :

  1. Классный виджет, на стандартном шаблоне блоггера все работает ! )

    ОтветитьУдалить
  2. Да,виджет супер.Он на всех шаблонах работает.Тут много интересного можно найти.Добавляйтесь в ПЧ.

    ОтветитьУдалить
  3. Немного напрягает стрелочка слева в верхнем углу блога) у вас тоже наблюдается))) Вам то нормально, а у меня тёмный фон сайта(( Может от этого можно избавиться?) 

    ОтветитьУдалить
  4. Да я тоже недавно заметил,сам ещё не пойму что это такое.Может позже займусь этим.

    ОтветитьУдалить
  5. Немного напрягает стрелочка слева в верхнем углу блога) Ты код под ]]>  вставь а не над ним!  

    ОтветитьУдалить
  6. У меня это виджет не хочет работать ((( почему ?

    ОтветитьУдалить
  7. Автору и Всем.
    Стрелочку убрать элементарно.
    В коде выкидываем первую и последнюю строку и заключаем в и
    И все стрелки нет!

    ОтветитьУдалить
  8. А можно тоже самое только в последних сообщениях?

    ОтветитьУдалить
  9. Виджет классный, установил себе, нравится!
    Единственное, что хочу заметить, при создании статьи не грузите картинку по URL, только с компа! Иначе в виджете картинки не будет...

    ОтветитьУдалить
  10. Да виджет супер.Картинки точно загруружайте с компа.

    ОтветитьУдалить
  11. ура!!!! получилось.. спасибо.

    ОтветитьУдалить
  12. Пожалуйста! Если делать всё правильно,конечно получится.

    ОтветитьУдалить
  13. Можно-ли как-нибудь улучшить качество изображения на миниатюрах популярных сообщений.

    ОтветитьУдалить
    Ответы
    1. Илья,я думаю если вставлять в сообщения качественные картинки,то и в популярных статьях эскизы будут выглядеть хорошо. :)

      Удалить

 
Footer