Blogger: Гаджет Статистика Блога. Новые Стили и Функции Виджета

В данной публикации я покажу вам, как установить более усовершенствованный виджет Статистики Блога. В обычном виде данный гаджет отображает количество просмотров страниц вашего блога. С помощью нового виджета у вас появится возможность просматривать Количество просмотров страниц, Количество публикаций и Количество Комментариев. Пример Демо вы можете увидеть в видео ролике.

Для установки Виджета используйте HTML, который расопложен ниже. Подробную инструкцию по установке гаджета можно посмотреть в видео ролике, который расположен в конце публикации.

1. CSS для старых шаблонов.

CSS<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
/* Blogger Custom Stats widget by msdesignbd.com */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:7px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;display:inline-block;}
.Stats .counter-wrapper:after {content:&quot;Всего просмотров&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
.Stats img, .Stats span { margin-right: 1px; vertical-align: top; }
</style>

2. CSS для новых шаблонов.

CSS<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
/* Blogger Custom Stats widget by msdesignbd.com */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:1px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;display:inline-block;}
.Stats .counter-wrapper:after {content:&quot;Всего просмотров&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
.Stats img, .Stats span { margin-right: 1px; vertical-align: top; }
</style>

3. CSS Второй вариант с фоном для старых шаблонов.

CSS<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
/* Blogger Custom Stats widget by msdesignbd.com */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:0px;padding-bottom:3px;line-height:35px;color:#fff;font-weight:700;font-size:16px;margin-left: 0;display:inline-block;}
.Stats .counter-wrapper:after {content:&quot;Всего просмотров&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#fff;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#fff;font-weight:700;height:33px;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#fff;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#7a8289;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content { width: auto; height: auto; background-color: #fff; background: #1bbc9b; position: relative; overflow: hidden; background-image: linear-gradient(107deg,#ff6858,#484e5d); background-position: 50%; background-repeat: no-repeat; border-radius: 4px; }
.Stats img, .Stats span {margin-right: 0px;vertical-align: top;}
</style>

4. CSS Второй вариант с фоном для новых шаблонов.

CSS<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
/* Blogger Custom Stats widget by msdesignbd.com */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:0px;line-height:35px;color:#fff;font-weight:700;font-size:16px;margin-left: 0;display:inline-block;}
.Stats .counter-wrapper:after {content:&quot;Всего просмотров&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#fff;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#fff;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#fff;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#7a8289;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content { width: auto; height: auto; background-color: #fff; background: #1bbc9b; position: relative; overflow: hidden; background-image: linear-gradient(107deg,#ff6858,#484e5d); background-position: 50%; background-repeat: no-repeat; border-radius: 4px; }
</style>

5. HTML общий.

HTML<b:widget id='Stats1' locked='false' title='Статистика блога' type='Stats' version='1'>
          <b:widget-settings>
            <b:widget-setting name='showGraphicalCounter'>false</b:widget-setting>
            <b:widget-setting name='showAnimatedCounter'>false</b:widget-setting>
            <b:widget-setting name='showSparkline'>false</b:widget-setting>
            <b:widget-setting name='sparklineStyle'>BLACK_TRANSPARENT</b:widget-setting>
            <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts post2'> Всего Постов &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

function numberOfComments(json){
document.write(&quot;<span class='counts comment'> Всего Коммент. &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>
    </div>
  </div>
</b:includable>
</b:widget>

Переходим к просмотру видео:

Если возникнут вопросы пишите в комментариях. Удачи.

Mark Korvin 5/19/2019 Коммент.

Mark Korvin

Blogger: Гаджет Статистика Блога. Новые Стили и Функции Виджета

Переходим к просмотру видео:

Рекомендуемые публикации

Видео

Последние публикации

Вопросы, Ответы, Отзывы

Blogger: Гаджет Статистика Блога. Новые Стили и Функции Виджета

Переходим к просмотру видео:

Поделиться в социальных сетях:

Рекомендуем

Рекомендуемые публикации

Видео

Последние публикации

Вопросы, Ответы, Отзывы