Автор сего замечательного творения обитает здесь. Там же (пардон за абсурдный каламбур) вы можете найти последние обновления виджета Simple Counters и при желании скачать исходники.
Изначально плагин был создан для Wordpress, но, как все хорошее и вечное, в дальнейшем адаптирован и под платформу Blogger все тем же чутким автором, да останется его имя в веках.
Виджет представляет собой фиксированную боковую панель с кнопками двух ресурсов - FeedBurner и Twitter, благодаря которым посетитель сможет легко подписаться и быть в курсе всех новостей блога. Но главным замечательным свойством Simple Counters, пожалуй, является предоставление обновляемой статистики в режиме реального времени, отчего вы всегда будете знать точное количество подписчиков блога в указанных сервисах.
Однако здесь кроется и небольшой минус: при пересчете статистики на самом сервисе FeedBurner счетчик плагина в это время будет показывать "0 (ноль)" подписчиков фида.
Пример боковой панели Simple Counters.
Плагин в действии вы можете подсмотреть прямо на этом блоге справа либо разглядеть его визуальное воплощение на скриншотах ниже:
Сразу укажу, что для правильной работы счетчиков Simple Counters, в частности корректное отображение значений FeedBurner, на странице этого сервиса во вкладке "Публикуй (Publisize)" должно быть включено Awareness API.
Установка виджета обновляемых счетчиков RSS и Twitter с помощью плагина Simple Counters.
Добавление виджета в блог.
Проследуйте Шаблон > Изменить HTML. Посредством поиска найдите в поле редактирования шаблоном среди росписи знаков отрезок </head> и прямо перед ним впишите скрипты и стили виджета-информера:
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'></script>
<script type='text/javascript'>jQuery.noConflict();</script>
<style>
.ui-tooltip,.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;}.ui-tooltip-fluid{display:block;visibility:hidden;position:static!important;float:left!important;}.ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;border:1px solid #000001;text-align:left;word-wrap:break-word;overflow:hidden;}.ui-tooltip-titlebar{position:relative;min-height:14px;padding:5px 35px 5px 10px;overflow:hidden;border:1px solid #000001;border-width:1px 1px 0;font-weight:bold;}.ui-tooltip-titlebar+.ui-tooltip-content{border-top-width:0!important;}/*!Default close button class */ .ui-tooltip-titlebar .ui-state-default{position:absolute;right:4px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;}* html .ui-tooltip-titlebar .ui-state-default{top:16px;}.ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;}.ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em;}/*!Default tooltip style */ .ui-tooltip-default .ui-tooltip-titlebar,.ui-tooltip-default .ui-tooltip-content{border-color:#F1D031;background-color:#FFFFA3;color:#555;}.ui-tooltip-default .ui-tooltip-titlebar{background-color:#FFEF93;}.ui-tooltip-default .ui-tooltip-icon{border-color:#CCC;background:#F1F1F1;color:#777;}.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{border-color:#AAA;color:#111;}.ui-tooltip .ui-tooltip-tip{margin:0 auto;overflow:hidden;z-index:10;}.ui-tooltip .ui-tooltip-tip,.ui-tooltip .ui-tooltip-tip *{position:absolute;line-height:.1px!important;font-size:.1px!important;color:#123456;background:transparent;border:0 dashed transparent;}.ui-tooltip .ui-tooltip-tip canvas{top:0;left:0;}#qtip-overlay{position:fixed;left:-10000em;top:-10000em;}#qtip-overlay.blurs{cursor:pointer;}#qtip-overlay div{position:absolute;left:0;top:0;width:100%;height:100%;background-color:black;opacity:.7;filter:alpha(opacity=70);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";}/*!Light tooltip style */ .ui-tooltip-light .ui-tooltip-titlebar,.ui-tooltip-light .ui-tooltip-content{border-color:#E2E2E2;color:#454545;}.ui-tooltip-light .ui-tooltip-content{background-color:white;}.ui-tooltip-light .ui-tooltip-titlebar{background-color:#f1f1f1;}/*!Dark tooltip style */ .ui-tooltip-dark .ui-tooltip-titlebar,.ui-tooltip-dark .ui-tooltip-content{border-color:#303030;color:#f3f3f3;}.ui-tooltip-dark .ui-tooltip-content{background-color:#505050;}.ui-tooltip-dark .ui-tooltip-titlebar{background-color:#404040;}.ui-tooltip-dark .ui-tooltip-icon{border-color:#444;}.ui-tooltip-dark .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}/*!Cream tooltip style */ .ui-tooltip-cream .ui-tooltip-titlebar,.ui-tooltip-cream .ui-tooltip-content{border-color:#F9E98E;color:#A27D35;}.ui-tooltip-cream .ui-tooltip-content{background-color:#FBF7AA;}.ui-tooltip-cream .ui-tooltip-titlebar{background-color:#F0DE7D;}.ui-tooltip-cream .ui-state-default .ui-tooltip-icon{background-position:-82px 0;}/*!Red tooltip style */ .ui-tooltip-red .ui-tooltip-titlebar,.ui-tooltip-red .ui-tooltip-content{border-color:#D95252;color:#912323;}.ui-tooltip-red .ui-tooltip-content{background-color:#F78B83;}.ui-tooltip-red .ui-tooltip-titlebar{background-color:#F06D65;}.ui-tooltip-red .ui-state-default .ui-tooltip-icon{background-position:-102px 0;}.ui-tooltip-red .ui-tooltip-icon{border-color:#D95252;}.ui-tooltip-red .ui-tooltip-titlebar .ui-state-hover{border-color:#D95252;}/*!Green tooltip style */ .ui-tooltip-green .ui-tooltip-titlebar,.ui-tooltip-green .ui-tooltip-content{border-color:#90D93F;color:#3F6219;}.ui-tooltip-green .ui-tooltip-content{background-color:#CAED9E;}.ui-tooltip-green .ui-tooltip-titlebar{background-color:#B0DE78;}.ui-tooltip-green .ui-state-default .ui-tooltip-icon{background-position:-42px 0;}/*!Blue tooltip style */ .ui-tooltip-blue .ui-tooltip-titlebar,.ui-tooltip-blue .ui-tooltip-content{border-color:#ADD9ED;color:#5E99BD;}.ui-tooltip-blue .ui-tooltip-content{background-color:#E5F6FE;}.ui-tooltip-blue .ui-tooltip-titlebar{background-color:#D0E9F5;}.ui-tooltip-blue .ui-state-default .ui-tooltip-icon{background-position:-2px 0;}/*!Add shadows to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE6+,Safari 2+*/ .ui-tooltip-shadow{-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);box-shadow:1px 1px 3px 1px rgba(0,0,0,0.15);}.ui-tooltip-shadow .ui-tooltip-titlebar,.ui-tooltip-shadow .ui-tooltip-content{filter:progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3);-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Color='gray',Direction=135,Strength=3)";_margin-bottom:-3px;.margin-bottom:-3px;}/*!Add rounded corners to your tooltips in:FF3+,Chrome 2+,Opera 10.6+,IE9+,Safari 2+*/ .ui-tooltip-rounded,.ui-tooltip-rounded .ui-tooltip-content,.ui-tooltip-tipsy,.ui-tooltip-tipsy .ui-tooltip-content,.ui-tooltip-youtube,.ui-tooltip-youtube .ui-tooltip-content{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.ui-tooltip-rounded .ui-tooltip-titlebar,.ui-tooltip-tipsy .ui-tooltip-titlebar,.ui-tooltip-youtube .ui-tooltip-titlebar{-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0;}.ui-tooltip-rounded .ui-tooltip-titlebar+.ui-tooltip-content,.ui-tooltip-tipsy .ui-tooltip-titlebar+.ui-tooltip-content,.ui-tooltip-youtube .ui-tooltip-titlebar+.ui-tooltip-content{-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 0 5px 5px;border-radius:0 0 5px 5px;}/*!Youtube tooltip style */ .ui-tooltip-youtube{-webkit-box-shadow:0 0 3px #333;-moz-box-shadow:0 0 3px #333;box-shadow:0 0 3px #333;}.ui-tooltip-youtube .ui-tooltip-titlebar,.ui-tooltip-youtube .ui-tooltip-content{_margin-bottom:0;.margin-bottom:0;background:transparent;background:rgba(0,0,0,0.85);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";color:white;border-color:#CCC;}.ui-tooltip-youtube .ui-tooltip-icon{border-color:#222;}.ui-tooltip-youtube .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}.ui-tooltip-jtools{background:#232323;background:rgba(0,0,0,0.7);background-image:-moz-linear-gradient(top,#717171,#232323);background-image:-webkit-gradient(linear,left top,left bottom,from(#717171),to(#232323));border:2px solid #ddd;border:2px solid rgba(241,241,241,1);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 12px #333;-moz-box-shadow:0 0 12px #333;box-shadow:0 0 12px #333;}.ui-tooltip-jtools .ui-tooltip-titlebar{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";}.ui-tooltip-jtools .ui-tooltip-content{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";}.ui-tooltip-jtools .ui-tooltip-titlebar,.ui-tooltip-jtools .ui-tooltip-content{background:transparent;color:white;border:0 dashed transparent;}.ui-tooltip-jtools .ui-tooltip-icon{border-color:#555;}.ui-tooltip-jtools .ui-tooltip-titlebar .ui-state-hover{border-color:#333;}.ui-tooltip-cluetip{-webkit-box-shadow:4px 4px 5px rgba(0,0,0,0.4);-moz-box-shadow:4px 4px 5px rgba(0,0,0,0.4);box-shadow:4px 4px 5px rgba(0,0,0,0.4);}.ui-tooltip-cluetip .ui-tooltip-titlebar{background-color:#87876A;color:white;border:0 dashed transparent;}.ui-tooltip-cluetip .ui-tooltip-content{background-color:#D9D9C2;color:#111;border:0 dashed transparent;}.ui-tooltip-cluetip .ui-tooltip-icon{border-color:#808064;}.ui-tooltip-cluetip .ui-tooltip-titlebar .ui-state-hover{border-color:#696952;color:#696952;}.ui-tooltip-tipsy{border:0;}.ui-tooltip-tipsy .ui-tooltip-titlebar,.ui-tooltip-tipsy .ui-tooltip-content{_margin-bottom:0;.margin-bottom:0;background:transparent;background:rgba(0,0,0,.87);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#D9000000,endColorstr=#D9000000)";color:white;border:0 transparent;font-size:11px;font-family:'Lucida Grande',sans-serif;font-weight:bold;line-height:16px;text-shadow:0 1px black;}.ui-tooltip-tipsy .ui-tooltip-titlebar{padding:6px 35px 0 10;}.ui-tooltip-tipsy .ui-tooltip-content{padding:6px 10;}.ui-tooltip-tipsy .ui-tooltip-icon{border-color:#222;text-shadow:none;}.ui-tooltip-tipsy .ui-tooltip-titlebar .ui-state-hover{border-color:#303030;}.ui-tooltip-tipped .ui-tooltip-titlebar,.ui-tooltip-tipped .ui-tooltip-content{border:3px solid #959FA9;filter:none;-ms-filter:none;}.ui-tooltip-tipped .ui-tooltip-titlebar{background:#3A79B8;background-image:-moz-linear-gradient(top,#3A79B8,#2E629D);background-image:-webkit-gradient(linear,left top,left bottom,from(#3A79B8),to(#2E629D));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";color:white;font-weight:normal;font-family:serif;border-bottom-width:0;-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}.ui-tooltip-tipped .ui-tooltip-content{background-color:#F9F9F9;color:#454545;-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}.ui-tooltip-tipped .ui-tooltip-icon{border:2px solid #285589;background:#285589;}.ui-tooltip-tipped .ui-tooltip-icon .ui-icon{background-color:#FBFBFB;color:#555;}.ui-tooltip:not(.ie9haxors) div.ui-tooltip-content,.ui-tooltip:not(.ie9haxors) div.ui-tooltip-titlebar{filter:none;-ms-filter:none;}
</style>
<style>
.ui-tooltip-custom .ui-tooltip-titlebar, .ui-tooltip-custom .ui-tooltip-content{
border-color: #145181 !important;
color: #ffffff !important;
}
.ui-tooltip-custom .ui-tooltip-content{
background-color: #1c82d0 !important;
}
.ui-tooltip-custom .ui-tooltip-titlebar{
background-color: #1c82d0 !important;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var scOptions = {
position: "right",
delta: 0,
fontColor: "#ffffff",
color: "#1c82d0",
colorTo: "#145181",
borderColor: "#676767",
borderStyle: "win7",
dgv: "vertical",
hints: "themed",
feedBurner:{
id: "название_вашего_фида",
imgUrl: "http://simple-counters.googlecode.com/svn/tags/2.0/img/feedburner.png",
count: -1,
hint: "Подпишитесь на рассылку сайта <strong><data:blog.title/></strong> для получения последних новостей и изменений сайта!",
hintImg: "http://simple-counters.googlecode.com/svn/tags/2.0/img/feedburner-hint.png",
str: ["читатель", "читателя", "читателей"]
},
twitter:{
id: "ник_в_twiteer",
imgUrl: "http://simple-counters.googlecode.com/svn/tags/2.0/img/twitter.png",
count: -1,
hint: "Совместно используйте и узнавайте то, что происходит прямо сейчас на сайте <strong><data:blog.title/></strong>!<br/>Присоединяйтесь ко мне на Twitter!",
hintImg: "http://simple-counters.googlecode.com/svn/tags/2.0/img/twitter-hint.png",
useAvatar: true,
str: ["спутник", "спутника", "спутников"]
},
plurals: "(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2)",
hintStyle:"ui-tooltip-custom"
};
//]]>
</script>
<script type='text/javascript' src='http://simple-counters.googlecode.com/svn/tags/2.0/jquery.qtip.min.js'></script>
<script type='text/javascript' src='http://simple-counters.googlecode.com/svn/tags/2.0/sc.min.js'></script>
Данный виджет требует подключенной библиотеки jQuery, скрипт которой уже прописан в код выше. Если у вас она уже внесена в шаблон, тогда удалите из кода строки:
После не забудьте прописать свои данные на участках id: "название_вашего_фида" и id: "ник_в_twiteer" и сохранить шаблон.<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js'></script> <script type='text/javascript'>jQuery.noConflict();</script>
Настройка плагина боковых счетчиков Simple Counters.
C этой знаменательной поры, довольствуясь насущным, можно тихо возрадоваться наличию оригинальной боковой панели с кнопками главных сервисов, которая еще и выводит показатели в реальном времени, однако помимо оригинальности и удобства, виджет имеет ряд настроек, с помощью которых вы сможете несколько изменить его в визуальном плане.
Обозначения скрипта:
position - принимает значения right или left - расположение боковой панели (справа или слева, соответственно);
delta - регулировка расположения виджета по вертикали в пикселях (отрицательное - панель стремится вверх, положительное - вниз);
dgv - направление цветового градиента фона (horizontal – справа налево, vertical – сверху вниз);
color - начальный цвет градиента фона;
colorTo - конечный цвет градиента фона;
borderColor - цвет бордюра вокруг боковой панели;
borderStyle - стиль бордюра (default или win7);
fontColor - цвет текста;
hintStyle - стиль всплывающей подсказки (по-умолчанию - ui-tooltip-custom; другие значения: ui-tooltip-custom, ui-tooltip-plain, ui-tooltip-light, ui-tooltip-dark, ui-tooltip-red, ui-tooltip-green, ui-tooltip-blue);
hint - текст для всплывающих подсказок к заглавным иконкам сервисов;
str - текстовая информация к счетчикам RSS и Twitter, обозначающих склоняемые подписи количества читателей и последователей;
useAvatar - может иметь значения: true - использовать в качестве изображения для подсказки аватар из Twitter, false - использовать изображение, заданное на отрезке hintImg.
delta - регулировка расположения виджета по вертикали в пикселях (отрицательное - панель стремится вверх, положительное - вниз);
dgv - направление цветового градиента фона (horizontal – справа налево, vertical – сверху вниз);
color - начальный цвет градиента фона;
colorTo - конечный цвет градиента фона;
borderColor - цвет бордюра вокруг боковой панели;
borderStyle - стиль бордюра (default или win7);
fontColor - цвет текста;
hintStyle - стиль всплывающей подсказки (по-умолчанию - ui-tooltip-custom; другие значения: ui-tooltip-custom, ui-tooltip-plain, ui-tooltip-light, ui-tooltip-dark, ui-tooltip-red, ui-tooltip-green, ui-tooltip-blue);
hint - текст для всплывающих подсказок к заглавным иконкам сервисов;
str - текстовая информация к счетчикам RSS и Twitter, обозначающих склоняемые подписи количества читателей и последователей;
useAvatar - может иметь значения: true - использовать в качестве изображения для подсказки аватар из Twitter, false - использовать изображение, заданное на отрезке hintImg.