Как настроить виджет «Популярные сообщения» в Blogger

Хотите изменить виджет «Популярные сообщения» на своем блоге Blogger, чтобы сделать его более заметным и привлекательным для ваших посетителей? Наличие виджета популярных сообщений в боковой панели имеет бесчисленные преимущества. Это помогает новым посетителям выбрать те статьи, которые наиболее актуальны в вашем блоге. Но вот стандартный виджет популярных сообщений не так привлекателен с точки зрения его настройки и отображения.

Популярные сообщения в Blogger

Поэтому, если вы хотите преобразовать свой виджет «Популярные сообщения» в нечто элегантное и красивое, то положиться вы должны на каскадную таблицу стилей (CSS). Итак, В этой статье я покажу, как с помощью CSS стилей настроить виджет «Популярные сообщения» в Blogger.

Добавление виджета популярных сообщений в свой Blogger блог:


Установка очень проста, вы легко сможете настроить свой виджет, и не столкнетесь ни с одной проблемой, с которыми обычно сталкиваются люди. Просто следуйте следующим инструкциям.

  • Перейти в Blogger >> Ваш блог >> Дизайн.
  • Добавить гаджет >> В списке виджетов найдите «Популярные сообщения» и выберите его.
  • Теперь настройте свой гаджет как на рисунке ниже.

Настройка популярных сообщений

  • Выберите «За последние 7 дней» (еженедельно).
  • Убедитесь, что вы поставили галочки напротив «уменьшенное изображение» и «фрагмент», так как нам нужно будет отображать небольшие изображения вдоль популярных статей, это сделает ваш блог более привлекательным.
  • Отображать можно до 10 популярных статей, но я рекомендуем вам из выпадающего списка выбрать 7.
  • Теперь сохраните виджет. Все мы успешно добавили и настроили виджет популярных постов.

Настройка и стилизация виджета популярных сообщений в Blogger:

  • Еще раз перейдите в Blogger >> Шаблон >> Резервное копирование и восстановление (Создайте на всякий пожарный резервную копию, если что-то пойдет не так он вам понадобиться).
  • Выберите Изменить HTML >>.
  • В шаблоне найдите тег ]]></b:skin> (CTRL + F для быстрого поиска), и прямо над ним вставьте следующий CSS код.

/*--- tiduncss — */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url (http://4.bp.blogspot.com/-oOVUW06ghgo/UHwuqL9TltI/AAAAAAAAGKU/Nj4DQnvft8k/s1600/1.gif)  no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
— moz-border-radius:10px;
— webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
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);
}

  • И, наконец, нажмите кнопку «Сохранить шаблон».

Итак, вы успешно настроили виджета популярных постов. Теперь прейдите на свой блог и насладитесь результатом.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>