Привет друзья!Для тех кто не заглядывает ко мне на огонёк, на мой основной блог - Школа Blogger(а). Хочу предложить Вам отличный счётчик просмотров сообщений (постов, статей). Можете посмотреть у меня вверху каждого сообщения. Счетчиков несколько вариантов. Каждый может выбрать на своё усмотрение. И так начнём с самого простого счётчика просмотров постов.
![]() |
Счётчик с картинкой и без |
И так как обычно идём Шаблон--Изменить HTML с помощью сочетания клавиш (Ctrl+F) находим строчку /data:post.body Ставим до или после (смотря, где нужен счётчик: вверху или внизу) следующий код.
С картинкой:
<!--blogger post counter--> <b:if cond='data:blog.pageType == "item"'><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 == "item"'><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&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 == "item"'><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">
Вот вроде и всё. За разъяснениями прошу обращаться в комментариях. Всего доброго. До новых встреч.
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
ОтветитьУдалитьК сожалению, код не работает. думаю, потому что сайта http://blogabloger.ru/ не существует на который в скриптах ссылки идут. можно куда-нибудь их переложить или здесь опубликовать?
ОтветитьУдалитьДа,Вы правы.Раньше всё здорово работало.Теперь что случилось я не знаю. В ближайшее время я напишу о другом виджете просмотров постов. 8-)
УдалитьНе нашёл у вас обещанного поста про новые счетчики. Может не туда смотрел?
УдалитьПодскажите, пожалуйста, если ли возможность установки счетчика читателей в bloglovin?
ОтветитьУдалитьХороший виджет
ОтветитьУдалитьУже не работает.
УдалитьНе удалось ли вам найти новый счетчик прочтений?
ОтветитьУдалитьНашёл, только на английском языке.Хотите дам ссылку,google переведёт.
Удалить