Красивый анимированный виджет популярные сообщения для блога.


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


Если вам захотелось установить такой же, давайте сразу перейдём от слов к делу. В первую очередь нужно добавить гаджет популярные сообщения, который нам предлагает Blogger. Дизайн-добавить гаджет-популярные сообщения.

Обратите внимание, нужно снять галочку в окне фрагмент. У нас будут отображаться  только изображения в миниатюре и название статьи. Количество сообщений ставьте на своё усмотрение. Не забудьте сохранить и установить на нужное место в сайдбаре.

Дальше идём во вкладку шаблон-изменить HTML.Обязательно сделайте резервную копию. И находим строку ]]></b:skin>. Кто пока не знает , как это сделать советую прочитать эту статью. Теперь, прямо над ней вставляем вот этот код.
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;

box-shadow: 0px 0px 5px #d10202;

источник http://www.bloggertrix.com/
Не забудьте просмотреть блог и если всё в порядке форматировать и сохранить. Вот такой красивый виджет популярных постов обязательно привлечёт внимание ваших читателей. Здесь ещё вариант гаджета с кнопкой Гугл+.

Если возникнут вопросы обращайтесь. Разберёмся.

Удачи всем нам.
Ой, а что это там ниже?  


хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :

8 комментариев:

  1. мммммм! это идея! когда же мои ручки дойдут до оформления, а то столько дел! не успеваю

    ОтветитьУдалить
  2. Аксинья, привет. Это я за тобой не поспею. У тебя уже свой канал на ютубе. Я окунуться пока туда боясь. Вообще-то, скорее нет пока возможности. Пуа не даёт вообще ролики смотреть. Не то что сделать. Кстати,я твоя подписчица и там.

    ОтветитьУдалить
  3. И себе попробую такой установить. Спасибо большое!

    ОтветитьУдалить
  4. Интересный виджет, но у меня почему-то не получились они анимированными(

    ОтветитьУдалить
  5. Попробуй Наташ. Но я так поняла, что не на всех блогах могут работать.всё из-за шаблона.

    ОтветитьУдалить
  6. Марина. дай пожалуйста адрес блога. Посмотрим.М ожет и разберёмся в чём причина. Например у меня он на этот блог не встал. А там запросто. На удивление. Тот более перегружен скриптами. Другие подобные виджеты для него не подходят.

    ОтветитьУдалить
  7. Вика, привет! Виджет замечательно смотрится на блоге! Как будто там всегда и был)))

    ОтветитьУдалить
  8. Привет, Ирина. Давненько не виделись.Я не знаю, почему я его раньше не установила. Всё время всё пробую через себя пока опубликую.

    ОтветитьУдалить

Пользовательский поиск
Foto Saya
My Photo