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

Огромный плюс блог-платформы 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

Сергей Мазураш aka Retliff Блоггер со стажем. Стиль публикаций отличается простотой изложения и весёлым, ироничным подходом к самым серьёзным проблемам. Cпециализируется на создании и продвижении бесплатных блогов на платформе Blogger.



4 комментария:

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

    ОтветитьУдалить
  2. Анонимный14 мая 2013 г., 14:20

    как сделать с картинками?

    ОтветитьУдалить
  3. раздражала пунктирная черта от стандартного стиля=) теперь все норм Спасибо!

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

Буду очень признателен за Ваши доброжелательные комментарии!
Любые попытки втянуть автора и читателей в дискуссию, а так же ссылки на посторонние ресурсы - будут удалены.
Всем любителям "конструктивной критики" рекомендую прочитать статью http://maxpastukhov.com/critics