Здравствуйте, мои читатели и гости блога. Мы так или иначе, устанавливаем на свои блоги всевозможные счётчики для отслеживания статистики. Многие блогеры предпочитаю просто родной, блоггеровский счётчик. Думаю, вы согласитесь со мной , что он очень уж скучновато выглядит.
И давайте сегодня посмотрим, как можно изменить внешний вид счётчика статистики на блоге.
И вот из примерно такого варианта, где указано только общее количество просмотров,
у нас получится вот такая красота. Где и опубликованные посты, и комментарии и посещения.
Нам придётся сделать несколько нехитрых изменений в шаблоне. Счётчик работает корректно. А мы тем самым получим красивое отображение статистики без всяких ссылок на сторонние ресурсы. К примеру, один из таких вариантов здесь мы рассмотрели уже.
Для начала нам понадобится, зайти во вкладку дизайн-гаджеты и из предложенного списка выбрать статистика блога. Выберите в нём вариант отображения за всё время и сохраните. Можно сразу переместить его в нужное место на блоге.У кого он уже установлен, пропустите этот шаг.
Дальше идём во вкладку шаблон. Обязательно заранее сделайте резервное копирование, на случай если что-то не получится. Нажимаем изменить HTML. Так как, каждый гаджет блога имеет своё название и ID, соответственно нам понадобится гаджет Status1. Посмотрите на скриншот. Нажимаем список виджетов, выбираем нужный и нас перенаправит в то место шаблона, где нашему взору открываются все гаджеты, установленные на блоге.
Нас интересует строку такого вида
<b:widget id='Stats1' locked='false' title='Общее·количество·просмотров·страницы' type='Stats'>...
Нужно нажать на стрелочки чёрного цвета справа от неё (сначала одну, потом следующую) чтобы открыть весь код . Вот так он будет выглядеть.
Этот участок <b:widget> ######## </b:widget>, который я выделила красным цветом, аккуратно удаляем. И на его место вставим вот такой код
Следующий шаг. Здесь же в шаблоне находим строку ]]></b:skin> и перед ней нужно вставить это-
Этот код желательно сначала скопировать в блокнот или черновик, чтобы сделать нужные изменения. Давайте посмотрим, что основное можно поменять.
Красное - цвет фона. Зелёным - размер цифр на счётчике, и размер шрифта. Синим -отступы самой записи.
После проделанного обязательно нажмите просмотр и убедитесь что всё сделано правильно. Сохраните шаблон.
Вот, таким образом, мы получим очень оригинальный счётчик статистики. У себя я тоже такой установила. Пусть пока будет. Может что ещё потом мне в голову взбредёт. В самом нижнем правом углу вы можете его увидеть. Я решила просто цвет фона счётчика сделать под цвет нижнего колонтитула и немного изменила значения, о которых говорила выше.
Так что если хотите сделать у себя такое же, приступайте, пробуйте. Всё получится. Если что, спрашивайте. Разберёмся. И на этом у меня всё сегодня.
Удачи всем нам.

И вот из примерно такого варианта, где указано только общее количество просмотров,


Нам придётся сделать несколько нехитрых изменений в шаблоне. Счётчик работает корректно. А мы тем самым получим красивое отображение статистики без всяких ссылок на сторонние ресурсы. К примеру, один из таких вариантов здесь мы рассмотрели уже.
Для начала нам понадобится, зайти во вкладку дизайн-гаджеты и из предложенного списка выбрать статистика блога. Выберите в нём вариант отображения за всё время и сохраните. Можно сразу переместить его в нужное место на блоге.У кого он уже установлен, пропустите этот шаг.

Дальше идём во вкладку шаблон. Обязательно заранее сделайте резервное копирование, на случай если что-то не получится. Нажимаем изменить HTML. Так как, каждый гаджет блога имеет своё название и ID, соответственно нам понадобится гаджет Status1. Посмотрите на скриншот. Нажимаем список виджетов, выбираем нужный и нас перенаправит в то место шаблона, где нашему взору открываются все гаджеты, установленные на блоге.

Нас интересует строку такого вида
<b:widget id='Stats1' locked='false' title='Общее·количество·просмотров·страницы' type='Stats'>...
Нужно нажать на стрелочки чёрного цвета справа от неё (сначала одну, потом следующую) чтобы открыть весь код . Вот так он будет выглядеть.

Этот участок <b:widget> ######## </b:widget>, который я выделила красным цветом, аккуратно удаляем. И на его место вставим вот такой код
<b:widget id='Stats1' locked='false' title='' type='Stats'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<li>
<h4 id='Stats1_totalPosts'>&hellip;</h4>
<span>всего постов</span>
</li>
<li id='totalComments'>
<h4 id='Stats1_totalComments'>&hellip;</h4>
<span>комментариев</span>
</li>
<li id='totalCount'>
<h4 expr:id='data:widget.instanceId + "_totalCount"'>&hellip;</h4>
<span>Pageviews</span>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script>
</div>
</b:includable>
</b:widget>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<li>
<h4 id='Stats1_totalPosts'>&hellip;</h4>
<span>всего постов</span>
</li>
<li id='totalComments'>
<h4 id='Stats1_totalComments'>&hellip;</h4>
<span>комментариев</span>
</li>
<li id='totalCount'>
<h4 expr:id='data:widget.instanceId + "_totalCount"'>&hellip;</h4>
<span>Pageviews</span>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
</script>
</div>
</b:includable>
</b:widget>
Следующий шаг. Здесь же в шаблоне находим строку ]]></b:skin> и перед ней нужно вставить это-
#Stats1 ul{margin:5px 0;border:2;padding:0}
#Stats1 li{margin:0;border:0;background-color:#E96E00;background-image:url(http://lh3.ggpht.com/-JypPIDhQgEY/UIfUN_w0jkI/AAAAAAAABOM/s_O3VHyQSlw/s194/sprites-stats.png);background-repeat:no-repeat;padding:5px 5px 5px 50px;list-style-type:none}
#Stats1 h4{margin:0;font-size:22px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:13px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -60px}
#totalCount{background-position:0 -136px}
#Stats1 li{margin:0;border:0;background-color:#E96E00;background-image:url(http://lh3.ggpht.com/-JypPIDhQgEY/UIfUN_w0jkI/AAAAAAAABOM/s_O3VHyQSlw/s194/sprites-stats.png);background-repeat:no-repeat;padding:5px 5px 5px 50px;list-style-type:none}
#Stats1 h4{margin:0;font-size:22px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:13px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -60px}
#totalCount{background-position:0 -136px}
Красное - цвет фона. Зелёным - размер цифр на счётчике, и размер шрифта. Синим -отступы самой записи.
После проделанного обязательно нажмите просмотр и убедитесь что всё сделано правильно. Сохраните шаблон.
Вот, таким образом, мы получим очень оригинальный счётчик статистики. У себя я тоже такой установила. Пусть пока будет. Может что ещё потом мне в голову взбредёт. В самом нижнем правом углу вы можете его увидеть. Я решила просто цвет фона счётчика сделать под цвет нижнего колонтитула и немного изменила значения, о которых говорила выше.
Так что если хотите сделать у себя такое же, приступайте, пробуйте. Всё получится. Если что, спрашивайте. Разберёмся. И на этом у меня всё сегодня.
Удачи всем нам.
оформите подписку на новые шпаргалки
Вика, только хотела у тебя спросить об этом, а ты уже и пост написала. Спасибо!
ОтветитьУдалитьИ еще, 2 и 4 картинки у тебя в посте не отображаются. Интересно посмотреть, что там есть)
Ирина, значит я на одной волне со своими читателями. И такими бдительными. Вроде сейчас поправила картинки. Я некоторые на гугл сайтах храню и периодически забываю корректировать их код. Спасибо, что подсказываете.
ОтветитьУдалитьВика, одна картинка высветилась, а той, что после текста "Для начала нам понадобится, зайти во вкладку дизайн-гаджеты и из предложенного списка выбрать статистика блога. Выберите в нём вариант отображения за всё время и сохраните. Можно сразу переместить его в нужное место на блоге.У кого он уже установлен, пропустите этот шаг" не видно.
ОтветитьУдалитьСпасибо Ирина.
ОтветитьУдалитьогромное спасибо, все здорово получается
ОтветитьУдалитьВам спасибо за визит. Рада приветствовать Вас в качестве ПЧ. Сбегала к Вам блог посмотреть этот виджет - здорово.
Удалить