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

Огромный плюс блог-платформы Blogger — возможность адаптировать скучные стандартные виджеты под оригинальный дизайн вашего блога.

Nastroit widget popularniye statyi

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

Главное достоинство данного способа — отсутствие тяжеловесных посторонних сценариев и простота настройки внешнего вида. В основе нашего виджета будет лежать официальная разработка команды Blogger и стиль CSS, что естественно, положительно скажется на общем времени загрузки страницы.

Вот так выглядит этот виджет у меня:

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

Посмотреть его в действии можно справа, в сайдбаре.

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

1. Заходим в Панель инструментов — Дизайн — Элементы страницы — Добавить гаджет

2. Выбираем из списка «Популярные сообщения»

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

3. Настраиваем виджет таким образом:

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

4. Сохраняем

5. Перетягиваем в нужное место и опять сохраняем.

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

1. Заходим в Панель инструментов — Дизайн — Изменить HTML

2. Сохраняем, как обычно, резервную копию шаблона на жёсткий диск

3. Активируем флажок «Расширить шаблоны виджета»

4. С помощью комбинации Ctrl + F находим строчку:

 ]]></b:skin>

и прямо перед ней вставляем такой код:

 .popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.popular-posts ul li:hover {
border:1px solid #FF9900;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

5. В этом коде основные параметры прописаны под дизайн моего блога. Если вы хотите адаптировать стиль виджета под свой блог, то в предложенном коде можно исправить:
а) Цвет границы

б) Радиус закругления

в) Цвет границы при наведении курсора

г) Толщину линий (в двух местах)

Нужный цвет легко подобрать на этой странице.

6. Сохраняем шаблон

7. Вытерев пот со лба, с чувством выполненного долга принимаем внутрь организма заслуженную чашку кофе (стакан чая, бокал пива и т.д. — на ваше усмотрение))

Надеюсь, информация этой статьи поможет вам сделать дизайн своего блога ещё совершенней!

Ваш Retliff



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

  1. спасибо большое за пост, у меня как раз вопросик по популярным постам — знаете ли вы как можно увеличить число отображаемых постов в этом гаджете? То есть, чтобы было более 10.

    Ответить

Оставьте комментарий