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

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

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

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


Для этого нам потребуется вот такой небольшой код.

.PopularPosts .widget-content ul li{padding:0;position:relative}
.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.PopularPosts img{width:50px;height:50px}

.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:100%}

Копируем его. В админпанели блога заходим во вкладку шаблон-изменитьHTML. С помощью горячих клавиш Ctrl+F находим строку ]]></b:skin>. Прочитайте, пожалуйста этот пост если пока не знаете, как это сделать. И сразу над ней вставляем, код, приведённый выше.

Не забудьте нажать на функцию предварительны просмотр. И если всё правильно сделали, сохраняем шаблон.

Всё. Вот такой интересный виджет популярных сообщений. И глазу приятно, и посетили будут видеть самые читаемые посты. А в этой статье гаджет с кнопкой Гугл+.

И у меня сегодня всё. Спасибо, что читаете мои шпаргалки.  До новых встреч.

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

Введите Ваш email