Красивые счетчики для Blogger с помощью Simple Counters

В своем новом блоге о системе wordpress сегодня рассмотрел достаточно интересную, как мне кажется тему, которая поможет сделать ваш проект ярче. Я говорю про красивые счетчики для блога, которые устанавливаются с помощью плагина Simple Counters. Выглядит классно, а заодно привлекает внимание. Кто знает, возможно, этот оригинальный способ поможет привлечь новый читателей – узнать, так сказать, что же автор блога придумает дальше для своего проекта. Но какое отношение к blogohelp имеет этот плагин wordpress? – спросите вы. А дело в том, что разработчик предусмотрел его версию и для системы blogspot, поэтому с радостью встречаем Blogger Simple Counters.

Скачать необходимые файлы для установки можно на сайте разработчиков. Чтобы их использовать нужно иметь какой-то свой купленный хостинг либо воспользоваться бесплатным сервисом. В blogspot нет доступа к фтп, поэтому загрузить файлы вы никуда не сможете. Лично я воспользовался соответствующим предложением от гугла и залил все файлы на sites.google.com. К сожалению, в архиве нет картинок для плагина (когда я качал точно не было – проверьте в новых версиях). В общем, взял изображения из соответствующего плагина для wordpress. Их можно скачать здесь (кликаем правой кнопкой мышки по картинки и нажимаем сохранить):

Следующий шаг в установке нашего плагина (после того как все файлы залиты на сторонний фтп хостинг) – заходим в раздел Дизайн – Изменить HTML и в блоке head (в любом месте до закрывающего тега /head) размещаем код:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'  type='text/javascript'/>

<script src='https://YOUR_FILE_HOST/jquery.qtip-1.0.0-rc3.min.js'  type='text/javascript'/>

<script type='text/javascript'>

  var scUserOptions = {

    position: 'right',

    delta: 0,

    dgv: 'vertical',

    feedBurner: {

      id: 'minimus',

      imgUrl:  'http://YOUR_FILE_HOST/feedburner.png',

      hint: 'Подпишитесь на рассылку сайта <strong><data:blog.title/></strong>  для получения последних новостей и изменений сайта!',

      hintImg: 'http://YOUR_FILE_HOST/feedburner-hint.png'

    }, 

    twitter: {

      id: 'minimus',

      imgUrl:  'http://YOUR_FILE_HOST/twitter.png',

      hint: 'Совместно используйте и узнавайте  то, что происходит прямо сейчас на сайте <strong><data:blog.title/></strong>!<br/>Присоединяйтесь  ко мне на Twitter!',

      hintImg:  'http://YOUR_FILE_HOST/twitter-hint.png'

    }

  };

</script>

<script src='https://YOUR_FILE_HOST/excanvas.js'  type='text/javascript'/>

<script src='https://YOUR_FILE_HOST/sc.js'  type='text/javascript'/>

Здесь нужно обратить внимание на текст YOUR_FILE_HOST, который вы должны заменить ардесом своего фтп хостинга, где расположены файлы плагина Blogger Simple Counters.

Кроме того в коде находите блоки настроек feedBurner и twitter, где для каждого из них ставите свой id (ник, название аккаунта) вместо того, что указано по умолчанию – minimus (это адрес разработчиков).

Вообще весь список настроек выглядит следующим образом:

• position – right или left, вывод бейджика справа или слева в окне браузера.
• delta – цифровое значение в пикселах. Отрицательное значение – смещение бейджика вверх относительно средней линии экрана браузера, положительное – вниз на заданное количество пиксел.
• dgv – направление вектора градиента фона. horizontal – справа налево, vertical – сверху вниз.
• color – начальный цвет градиента фона. Шесть шестнадцатиричных цифр (‘#1c82d0′).
• colorTo – конечный цвет градиента фона. Шесть шестнадцатиричных цифр (‘#145181′).
• borderColor – Цвет полупрозрачной (40%) окантовки бейджика. Шесть шестнадцатиричных цифр (‘#676767′).

FeedBurner:

• id – Ваш ID на FeedBurner
• imgUrl – URL изображения для области FeedBurner бейджика. 50х50 пиксел, прозрачный фон, PNG. Даже если изображение будет отличаться по размеру, оно будет трансформировано (50х50)
• hint – Текст или HTML-текст для подсказки FeedBurner
• hintImg – URL изображения для подсказки FeedBurner. 40х40 пиксел, прозрачный фон, PNG.

Twitter:

• id – Ваш ID на Twitter
• imgUrl – URL изображения для области Twitter бейджика. 50х50 пиксел, прозрачный фон, PNG. Даже если изображение будет отличаться по размеру, оно будет трансформировано (50х50)
• hint – Текст или HTML-текст для подсказки Twitter
• hintImg – URL изображения для подсказки Twitter. 40х40 пиксел, прозрачный фон, PNG.

Плагин Blogger Simple Counters тестировался и удачно работал в следующих браузерах:

• Mozilla FireFox 3.0 .. 3.5
• Google Chrome 3.0.195.38
• Apple Safari 4.0
• Opera 10.10
• Microsoft Internet Explorer 6..8

Единственным недостатком его является отсутствие механизма кеширования – то есть результаты считаются и выдаются в реальном времени. А это значит, что в момент пересчета количество читателей от FeedBurner могут выводиться нулевые значения.