Настройка виджета от Outbrain.com (памятка)

outbrain com logo

В этом блоге я использую виджет "Читателям также нравится" от очень известного сервиса Outbrain.
Разработчиками этот виджет предусмотрен в двух вариациях:
  • в виде полосы с картинками
  • в виде вертикального списка

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

Виджеты настраиваются с помощью CSS согласно этим классам ↓

Виджет с картинками:


Виджет-список ссылок с рекомендациями:


Тоже самое в pdf документе.

Простой пример ↓

Нужно убрать точки-маркеры (у тега li) и сделать все ссылки красного цвета (по умолчанию ссылки наследуют свойства тега a, прописанные в вашем шаблоне).

Реализация:
<style>
.outbrain_rec_li {list-style-type: none;} /* убираем маркер */
.rec-link {color: red;} /* меняем цвет ссылки */
</style>

Получается в итоге такой блок:

outbrain recommendation widget blogger

Остальное зависит от вашей фантазии, все опции css берутся из htmlbook.ru.
Как вариант: раскрасить наподобие моего виджета архивов.

5 комментариев:

  1. Эх, надо мне написать инструкцию, как пользоваться рекомендациями и топами в graddit, а то улучшаю-улучшаю, а об этом никто и не знает :)

    ОтветитьУдалить
  2. Давай, давай. Хотя бы в кратце расскажи, что нового появилось/допилилось.

    ОтветитьУдалить
  3. Вот, про рекомендации и топы: http://fruitfulbookmarks-ru.blogspot.com/2012/04/graddit.html. А то, говорят, outbrain отбрил всех, убрав виджет рейтингов, а я тут прохлаждаюсь...

    ОтветитьУдалить
  4. Нихрена себе, сколько сделано уже...)
    Я как раз замыслил сделать хабро-виджет "Похожие посты ↓ ".

    Рейтинги от outbrain я сразу убрал после установки, это какой-то кошмар.

    ОтветитьУдалить
  5. @aldous
    а виджет Outbrain сразу появляется на сайте, или надо подождать какое-то время?

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