Graddit представляет рейтинг-виджет, который вы легко сможете добавить на страницы своего сайта. Код виджета можно получить на странице рейтингов. У рейтингов гибкие настройки, но обо всём по порядку.
На странице выбора виджета для демонстрации возможностей есть несколько рейтингов с предустановленными настройками, код которых вы сможете тут же скопировать и использовать в блоге. Среди них: рейтинги со звёздами в виде картинкок, рейтнги с символьными звёздами и просто с произвольными символами, рейтинги с отзывами, рейтинги вида +/-. Код специально подготовлен для использования в шаблонах Blogger, но есть и код в "сыром" виде:
Если по какой-то причине вас не устраивает поведение или вид рейтингов по умолчанию, то вы можете по своему вкусу изменить параметры виджета. Вот некоторые из них (на примере общего кода)
{[["☆","★"]]} | Этот элемент div содердит информацию о символах, которые будут использованы при отображении рейтинга: "☆" соответствует незакрашенной звезде, "★" — закрашенной. id элемента важен, он передаётся на сервер (см. ниже). | ||||||||||||||||
Этот элемент div будет содержать текст с количеством голосов. Его id также передаётся на сервер, но этот div может и отсутствовать, вместо него можно использовать предыдущий (rate) div. | |||||||||||||||||
| |||||||||||||||||
Конечно, это не все возможные параметры. О некоторых речь пойдёт ниже, о других читайте следующие посты. Всё это касается внешнего вида и некоторых аспектов поведения виджета, но если вы хотите всё кардинально изменить, то специально для этого есть ещё один параметр: ...&callback=my_function_name В этом случае после отображения рейтинга будет вызвана ваша JS функция my_function_name со следующими параметрами:
| |||||||||||||||||
Таким образом, вы обладаете полным контролем над виджетом. | |||||||||||||||||
Как добавить рейтинг-виджет в Blogger
- Выберите виджет, позже вам нужно будет скопировать код из закладки Blogger.
- В настройках блога перейдите на закладку Дизайн в старом интерфейсе Blogger; в новом интерфесе это пункт Template. Сохраните старый шаблон (кнопка Backup/Restore). Нажмите "Изменить HTML" и поставьте галочку напротив "Расширить шаблоны виджета":
Старый интерфейс Blogger Новый интерфейс 
- Сделать резервную копию шаблона можно и сейчас — просто выделите весь текст шаблона, скопируйте и сохраните в файле. В коде шаблона найдите строку "
. Получится что-то вроде:
- В секцию ... вашей страницы добавьте стили graddit:
- Сохраните шаблон и убедитесь, что рейтинг появился под всеми вашими постами. Если вы не хотите, чтобы рейтинг был виден на главной странице блога, а появлялся только при открытии постов, в коде виджета замените
"
на
"
Справа сверху на главной странице отображается пульс рейтингов — последние записи на различных сайтах и блогах, за которые голосуют, облако меток наиболее читаемых постов и картинки страниц, на которых недавно проголосовали люди.
Сервис также предоставляет статистику голосований, а ещё есть личный кабинет — очень полезная штука, где можно настроить виджеты лучших и похожих постов, но об этом речь пойдёт позже.
Ещё немного про поведение виджета. Наведя (и подержав пару секунд) курсор мыши на виджет можно получить расшифровку голосов:
Это можно отключить — удалите параметры ...&info= и ...&info_delay= из кода виджета. Вы можете контролировать время задержки появления расшифровки при помощи параметра info_delay, значение которого — количество секунд, до появления информации. Вы можете полностью контролировать всплывающее окно при помощи стилей, в т.ч. удалять нежелательные элементы. Для этого, правда, придётся где-то разместить аналог файла graddit.css и поддерживать его самостоятельно.
Ниже — наглядный пример, как это будет выглядеть в блоге.
И ещё один пример здесь: http://blogger.omg-linux.ru/2011/11/reitingi-dlya-bloga.html
Рейтинг-виджет от Graddit,
0 коммент. :