Google+ Followers

Будь в курсе событий!

12.11.2011

Рейтинг-виджет от Graddit

Leave a Comment
    Инструкция для пользователей Tumblr здесь.

    Graddit представляет рейтинг-виджет, который вы легко сможете добавить на страницы своего сайта. Код виджета можно получить на странице рейтингов. У рейтингов гибкие настройки, но обо всём по порядку.

    На странице выбора виджета для демонстрации возможностей есть несколько рейтингов с предустановленными настройками, код которых вы сможете тут же скопировать и использовать в блоге. Среди них: рейтинги со звёздами в виде картинкок, рейтнги с символьными звёздами и просто с произвольными символами, рейтинги с отзывами, рейтинги вида +/-. Код специально подготовлен для использования в шаблонах Blogger, но есть и код в "сыром" виде:


    Если по какой-то причине вас не устраивает поведение или вид рейтингов по умолчанию, то вы можете по своему вкусу изменить параметры виджета. Вот некоторые из них (на примере общего кода)

{[["☆","★"]]}


Этот элемент div содердит информацию о символах, которые будут использованы при отображении рейтинга: "☆" соответствует незакрашенной звезде, "★" — закрашенной. id элемента важен, он передаётся на сервер (см. ниже).



Этот элемент div будет содержать текст с количеством голосов. Его id также передаётся на сервер, но этот div может и отсутствовать, вместо него можно использовать предыдущий (rate) div.

обязательная часть, которую не стоит менять язык: rus или eng количество звёзд уникальный идентификатор рейтинга id элемента, куда будет помещён рейтинг id элемента, куда будет помещён текст (количество голосов)

Конечно, это не все возможные параметры. О некоторых речь пойдёт ниже, о других читайте следующие посты. Всё это касается внешнего вида и некоторых аспектов поведения виджета, но если вы хотите всё кардинально изменить, то специально для этого есть ещё один параметр: ...&callback=my_function_name

В этом случае после отображения рейтинга будет вызвана ваша JS функция my_function_name со следующими параметрами:
"key"уникальный идентификатор рейтинга
"id"id элемента div, в который будет помещён виджет
"stats"id элемента div, в который будет помещён текст (количество голосов)
"average"средний рейтинг
"amount"количество звёзд
"votes"количество голосов
"data"расшифровка голосов
"views"количество просмотров

Таким образом, вы обладаете полным контролем над виджетом.


Как добавить рейтинг-виджет в Blogger
  1. Выберите виджет, позже вам нужно будет скопировать код из закладки Blogger.
  2. В настройках блога перейдите на закладку Дизайн в старом интерфейсе Blogger; в новом интерфесе это пункт Template. Сохраните старый шаблон (кнопка Backup/Restore). Нажмите "Изменить HTML" и поставьте галочку напротив "Расширить шаблоны виджета":
    Старый интерфейс BloggerНовый интерфейс
  3. Сделать резервную копию шаблона можно и сейчас — просто выделите весь текст шаблона, скопируйте и сохраните в файле. В коде шаблона найдите строку "" и вставьте после неё код виджета. Если строка "" присутствует больше, чем в одном месте, и вы не уверены, куда именно вставить код виджета, то можно поэкспериментировать: вставить, например, "!!!", сохранить шаблон и проверить, угадали вы с местом или нет. Чтобы рейтинг отделить от текста парой пустых строк, вставьте перед ним

    . Получится что-то вроде:
  4. В секцию ... вашей страницы добавьте стили graddit:

  5. Сохраните шаблон и убедитесь, что рейтинг появился под всеми вашими постами. Если вы не хотите, чтобы рейтинг был виден на главной странице блога, а появлялся только при открытии постов, в коде виджета замените
    ""
    на
    ""

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

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

    Ещё немного про поведение виджета. Наведя (и подержав пару секунд) курсор мыши на виджет можно получить расшифровку голосов:

Это можно отключить — удалите параметры ...&info= и ...&info_delay= из кода виджета. Вы можете контролировать время задержки появления расшифровки при помощи параметра info_delay, значение которого — количество секунд, до появления информации. Вы можете полностью контролировать всплывающее окно при помощи стилей, в т.ч. удалять нежелательные элементы. Для этого, правда, придётся где-то разместить аналог файла graddit.css и поддерживать его самостоятельно.



Ниже — наглядный пример, как это будет выглядеть в блоге.
И ещё один пример здесь: http://blogger.omg-linux.ru/2011/11/reitingi-dlya-bloga.html
Рейтинг-виджет от Graddit, 4.72 out of 5 based on 50 ratings

0 коммент. :

© 2012-2017 Cash's from program