Инструкция для пользователей Tumblr здесь.
Graddit представляет рейтинг-виджет, который вы легко сможете добавить на страницы своего сайта. Код виджета можно получить на
странице рейтингов. У рейтингов гибкие настройки, но обо всём по порядку.
На странице выбора виджета для демонстрации возможностей есть несколько рейтингов с предустановленными настройками, код которых вы сможете тут же скопировать и использовать в блоге. Среди них: рейтинги со звёздами в виде картинкок, рейтнги с символьными звёздами и просто с произвольными символами, рейтинги с отзывами, рейтинги вида +/-. Код специально подготовлен для использования в шаблонах Blogger, но есть и код в "сыром" виде:
Если по какой-то причине вас не устраивает поведение или вид рейтингов по умолчанию, то вы можете по своему вкусу изменить параметры виджета. Вот некоторые из них (на примере общего кода)
<div id='rate' class='rate'>{[["☆","★"]]}</div>
|
Этот элемент div содердит информацию о символах, которые будут использованы при отображении рейтинга: "☆" соответствует незакрашенной звезде, "★" — закрашенной. id элемента важен, он передаётся на сервер (см. ниже).
|
<div id='stats'></div>
|
Этот элемент div будет содержать текст с количеством голосов. Его id также передаётся на сервер, но этот div может и отсутствовать, вместо него можно использовать предыдущий (rate) div.
|
| <script type='text/javascript' src=' | http://www.graddit.com/rate/ | rus | / | 5 | / | mjov07w | ? | id=rate | & | stats=stats | '></script> | | обязательная часть, которую не стоит менять | язык: 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- Выберите виджет, позже вам нужно будет скопировать код из закладки Blogger.
- В настройках блога перейдите на закладку Дизайн в старом интерфейсе Blogger; в новом интерфесе это пункт Template. Сохраните старый шаблон (кнопка Backup/Restore). Нажмите "Изменить HTML" и поставьте галочку напротив "Расширить шаблоны виджета":
| Старый интерфейс Blogger | Новый интерфейс |
 |  |
- Сделать резервную копию шаблона можно и сейчас — просто выделите весь текст шаблона, скопируйте и сохраните в файле. В коде шаблона найдите строку "<data:post.body/>" и вставьте после неё код виджета. Если строка "<data:post.body/>" присутствует больше, чем в одном месте, и вы не уверены, куда именно вставить код виджета, то можно поэкспериментировать: вставить, например, "!!!", сохранить шаблон и проверить, угадали вы с местом или нет. Чтобы рейтинг отделить от текста парой пустых строк, вставьте перед ним <br/><br/>. Получится что-то вроде:
- В секцию <head>...</head> вашей страницы добавьте стили graddit:
<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />
- Сохраните шаблон и убедитесь, что рейтинг появился под всеми вашими постами. Если вы не хотите, чтобы рейтинг был виден на главной странице блога, а появлялся только при открытии постов, в коде виджета замените
"<b:if cond='data:blog.pageType != "static_page"'>"
на
"<b:if cond='data:blog.pageType == "item"'>"
Справа сверху на
главной странице отображается пульс рейтингов — последние записи на различных сайтах и блогах, за которые голосуют, облако меток наиболее читаемых постов и картинки страниц, на которых недавно проголосовали люди.
Сервис также предоставляет
статистику голосований, а ещё есть личный кабинет — очень полезная штука, где можно настроить виджеты лучших и похожих постов, но об этом речь пойдёт позже.
Ещё немного про поведение виджета. Наведя (и подержав пару секунд) курсор мыши на виджет можно получить расшифровку голосов:
Это можно отключить — удалите параметры ...&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
']]}
