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

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

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

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

1. 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 для новых шаблонов.
<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 Второй вариант с фоном для старых шаблонов.
<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 Второй вариант с фоном для новых шаблонов.
<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 общий.
<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>

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

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



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

Рекомендуем

3 Коммент.

Оставить комментарий
avatar
Партнерские программы
февраля 26, 2018

Здравствуйте при установки слайда не показывается картинка, только текст, как устранить

Ответить
avatar
Petro
ноября 14, 2019

HTML не ставится. Что делать.

Ответить
avatar
Petro
ноября 14, 2019

все разобрался. спасибо.

Ответить