Привет друзья!Для тех кто не заглядывает ко мне на огонёк, на мой основной блог - Школа Blogger(а). Хочу предложить Вам отличный счётчик просмотров сообщений (постов, статей). Можете посмотреть у меня вверху каждого сообщения. Счетчиков несколько вариантов. Каждый может выбрать на своё усмотрение. И так начнём с самого простого счётчика просмотров постов.


Счётчик с картинкой и без

И так как обычно идём Шаблон--Изменить HTML с помощью сочетания клавиш (Ctrl+F) находим строчку /data:post.body  Ставим до или после (смотря, где нужен счётчик: вверху или внизу) следующий код.
С картинкой:


<!--blogger post counter-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 1px #999999; padding:2px; margin:2px; width:100px; display:compact'><img height='16' src='http://blogabloger.ru/images/stats.gif' width='16'/> <a href='#'><b><font size='2'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/> Просмотров</font></b></a></div></b:if>
<!--end-->

Без картинки:


<!--blogger post counter-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div align='center' style='border:solid 1px #999999; padding:2px; margin:2px; width:100px; display:compact'><a href='#'><b><font size='2'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/> Просмотров</font></b></a></div></b:if>
<!--end-->

Теперь немного пояснения:

Код b:if cond='data:blog.pageType == "item"' - заставляет отображаться только на странице поста.
Код border:solid 1px #999999 - толщина и цвет рамки.

А теперь рассмотрим, как же можно изменить внешний вид счётчика.
Попробуем сменить шрифт.Идём на Google Web Fonts, выбираем шрифт и получаем ссылку + код для css.

Ссылка на веб-шрифт:
<link href="http://fonts.googleapis.com/css?family=Lobster&amp;subset=cyrillic,latin,cyrillic-ext" rel="stylesheet" type="text/css"></link>

Запись о шрифте для стилей:
font-family: 'Lobster', cursive;
Теперь установим счётчик, вот такой получится по умолчанию:

1) Ссылка на шрифт (ставится в <head></head>):

2) Стили счётчика (ставится в css часть шаблона; перед ]]></b:skin>)

Код стиля такой:

.zebra{
font-family: 'Lobster', cursive;
color:#ff0000;
text-align: center;
border:solid 1px #999999;
padding:12px;
margin:12px;
width:100px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 2px 10px #999999;
-webkit-box-shadow: 0 2px 8px #999999;
box-shadow: 0 2px 8px #000000;

Сам код счётчика такой:

<div style="color:red; padding:2px; margin:2px; width:100px; display:compact;"><img height='16' src='http://2.bp.blogspot.com/-GtFBeZjSyT8/Tqcov3KtjRI/AAAAAAAAGkI/lRHWwed10vw/s1600/eye.png' width='16'/>+<font size='3'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/></script></font></div>

Теперь рассмотрим другой улучшенный вариант:
Установка в шаблон блога по той же схеме.
Готовый код такой:

<!--blogger post counter-->
<b:if cond='data:blog.pageType == &quot;item&quot;'><div style="color:red; padding:2px; margin:2px; width:100px; display:compact;"><img height='16' src='http://2.bp.blogspot.com/-GtFBeZjSyT8/Tqcov3KtjRI/AAAAAAAAGkI/lRHWwed10vw/s1600/eye.png' width='16'/>+<font size='2'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/></script></font></div></b:if>
<!--end-->

Можно установить этот код-
ПОСЛЕ ЭТИХ СТРОЧЕК НА ВЫБОР ГДЕ ХОТИТЕ ЧТО БЫ СТОЯЛ СЧЁТЧИК:

Перед "Автором":
<b:if cond="data:top.showAuthor">

Перед отметкой времени:
<b:if cond="data:top.showTimestamp">

Перед ярлыками:
<b:if cond="data:post.labels">

Вот вроде и всё. За разъяснениями прошу обращаться в комментариях. Всего доброго. До новых встреч.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


9 коммент. :

  1. I think that is among the such a lot important info for me. And i’m satisfied reading your article. But want to remark on some general issues, The website style is great, the articles is in reality excellent : D. Good task , cheers

    ОтветитьУдалить
  2. К сожалению, код не работает. думаю, потому что сайта http://blogabloger.ru/ не существует на который в скриптах ссылки идут. можно куда-нибудь их переложить или здесь опубликовать?

    ОтветитьУдалить
    Ответы
    1. Да,Вы правы.Раньше всё здорово работало.Теперь что случилось я не знаю. В ближайшее время я напишу о другом виджете просмотров постов. 8-)

      Удалить
    2. Не нашёл у вас обещанного поста про новые счетчики. Может не туда смотрел?

      Удалить
  3. Подскажите, пожалуйста, если ли возможность установки счетчика читателей в bloglovin?

    ОтветитьУдалить
  4. Не удалось ли вам найти новый счетчик прочтений?

    ОтветитьУдалить
    Ответы
    1. Нашёл, только на английском языке.Хотите дам ссылку,google переведёт.

      Удалить