Новый дизайн гаджита статистики блога

Здравствуйте, мои читатели и гости блога. Мы так или иначе, устанавливаем на свои блоги всевозможные счётчики для отслеживания статистики. Многие блогеры предпочитаю просто родной, блоггеровский счётчик. Думаю,  вы согласитесь со мной , что он очень уж скучновато выглядит.

И давайте сегодня посмотрим, как можно изменить внешний вид счётчика статистики на блоге.

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

у нас получится вот такая красота. Где и опубликованные посты, и комментарии и посещения.

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

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

Дальше идём во вкладку шаблон. Обязательно заранее сделайте резервное копирование, на случай если что-то не получится. Нажимаем изменить 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'>&amp;hellip;</h4>
          <span>всего постов</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>комментариев</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJc-lusezlSaoVu4u9A3_PdEavqwhgvMQcJyQ3vgnY2Yj0LGF5gv5RBBfHWugoawYaKl9gYa2vUmdBh7sXBp-tUS9VbXpzn0YTcvhwrqMizfi7QjDk4aVn54RHP6byt6aP36W3CUMzQE/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}

Этот код желательно сначала скопировать в блокнот или черновик, чтобы сделать нужные изменения. Давайте посмотрим, что основное можно поменять.
Красное - цвет фона. Зелёным - размер цифр на счётчике, и размер шрифта. Синим -отступы самой записи.
После проделанного обязательно нажмите просмотр и убедитесь что всё сделано правильно. Сохраните шаблон.

Вот, таким образом, мы получим очень оригинальный счётчик статистики. У себя я тоже такой установила. Пусть пока будет. Может что ещё потом мне в голову взбредёт. В самом нижнем правом углу вы можете его увидеть. Я решила просто цвет фона счётчика сделать под цвет нижнего колонтитула и  немного изменила значения, о которых говорила выше.

Так что если хотите сделать у себя такое же, приступайте, пробуйте. Всё получится. Если что, спрашивайте. Разберёмся. И на этом у меня всё сегодня.
Удачи всем нам.

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :