» » » Виджет-счётчик просмотра постов (статей) для Blogger

7:46
9
Привет друзья!Для тех кто не заглядывает ко мне на огонёк, на мой основной блог - Школа 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">



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











Автор:





на


7:46

























Ярлыки:


                                ,
                              


















                              
                              
                            










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






















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. Хороший виджет
    ОтветитьУдалить
  5. Не удалось ли вам найти новый счетчик прочтений?
    ОтветитьУдалить
    Ответы
    1. Нашёл, только на английском языке.Хотите дам ссылку,google переведёт.
      Удалить







































Подписаться на:

Комментарии к сообщению
                        (
                        Atom
                        )