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

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

Перейдите по ссылке и посмотрите, как он работает.
Если вам захотелось установить такой же, давайте сразу перейдём от слов к делу. В первую очередь нужно добавить гаджет популярные сообщения, который нам предлагает 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;

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

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

Удачи всем нам.

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

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