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

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

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



Следующий шаг в установке нашего плагина (после того как все файлы залиты на сторонний фтп хостинг) – заходим в раздел Дизайн – Изменить HTML и в блоке head (в любом месте до закрывающего тега /head) размещаем код:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'  type='text/javascript'/>
<script src='http://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='http://YOUR_FILE_HOST/excanvas.js' type='text/javascript'/>
<script src='http://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 могут выводиться нулевые значения.

В целом лично мне плагин очень понравился, оставлю у себя в блоге, точно также как поставлю wordpress версию на другие свое проекты.

P.S. Постовой. Статья про свойства чая матэ http://chayblog.ru/teamakeing/mate/ его приготовление и заваривание.
Интересуетесь стоимостью бухгалтерских услуг? Звоните, рассчитаем для вашего случая.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails