Здравствуйте дорогие друзья!Сегодня я хотел бы познакомить вас с интересным виджетом.Виджет-счётчик просмотров статей.Счетчиков несколько вариантов. Каждый может выбрать на своё усмотрение. И так начнём с самого простого счётчика просмотров постов.
И так как обычно идём Шаблон--Изменить HTML с помощью сочетания клавиш (Ctrl+F) находим строчку /data:post.body Ставим до или после (смотря, где нужен счётчик: вверху или внизу) следующий код.
С картинкой:
1 | <!--blogger post counter--> |
2 | <b:if cond='data:blog.pageType == "item"'><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'><scriptsrc='http://blogabloger.ru/counter.php' type='text/javascript'/> Просмотров</font></b></a></div></b:if> |
3 | <!--end--> |
Без картинки:
1 | <!--blogger post counter--> |
2 | <b:if cond='data:blog.pageType == "item"'><div align='center'style='border:solid 1px #999999; padding:2px; margin:2px; width:100px; display:compact'><a href='#'><b><font size='2'><scriptsrc='http://blogabloger.ru/counter.php' type='text/javascript'/> Просмотров</font></b></a></div></b:if> |
3 | <!--end--> |
1 |
А теперь рассмотрим, как же можно изменить внешний вид счётчика.
Попробуем сменить шрифт.Идём на Google Web Fonts, выбираем шрифт и получаем ссылку + код для css.
Ссылка на веб-шрифт:
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin,cyrillic-ext" rel="stylesheet" type="text/css"></link>
Запись о шрифте для стилей:
font-family: 'Lobster', cursive;
Попробуем сменить шрифт.Идём на Google Web Fonts, выбираем шрифт и получаем ссылку + код для css.
Ссылка на веб-шрифт:
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=cyrillic,latin,cyrillic-ext" rel="stylesheet" type="text/css"></link>
Запись о шрифте для стилей:
font-family: 'Lobster', cursive;
1) Ссылка на шрифт (ставится в <head></head>):
2) Стили счётчика (ставится в css часть шаблона; перед ]]></b:skin>)
Код стиля такой:
Сам код счётчика такой:
Установка в шаблон блога по той же схеме.
Готовый код такой:
Можно установить этот код-
ПОСЛЕ ЭТИХ СТРОЧЕК НА ВЫБОР ГДЕ ХОТИТЕ ЧТО БЫ СТОЯЛ СЧЁТЧИК:
Перед "Автором":
<b:if cond="data:top.showAuthor">
Перед отметкой времени:
<b:if cond="data:top.showTimestamp">
Перед ярлыками:
<b:if cond="data:post.labels">
2) Стили счётчика (ставится в css часть шаблона; перед ]]></b:skin>)
Код стиля такой:
01 | .zebra{ |
02 | font-family: 'Lobster', cursive; |
03 | color:#ff0000; |
04 | text-align: center; |
05 | border:solid 1px #999999; |
06 | padding:12px; |
07 | margin:12px; |
08 | width:100px; |
09 | -moz-border-radius: 8px; |
10 | -webkit-border-radius: 8px; |
11 | border-radius: 8px; |
12 | -moz-box-shadow: 0 2px 10px #999999; |
13 | -webkit-box-shadow: 0 2px 8px #999999; |
14 | box-shadow: 0 2px 8px #000000; |
Сам код счётчика такой:
1 | <div style="color:red; padding:2px; margin:2px; width:100px; display:compact;"><imgheight='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxjOYs0YgTSpfHr9PSf29Lk2NUlHpgErKfyWCOeznTtQnLUOlaZP8cju_eyqXYfjzgvLEzgo91NBYf-gHO6WDmgBZxeO0Tokf_ab7_PKO1rc7AuAWjfkzSGXuBeVthyphenhyphenmwEdJ69YYnFg2w/s1600/eye.png' width='16'/>+<fontsize='3'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/></script></font></div> |
Готовый код такой:
1 | <!--blogger post counter--> |
2 | <b:if cond='data:blog.pageType == "item"'><div style="color:red; padding:2px; margin:2px; width:100px; display:compact;"><img height='16'src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxjOYs0YgTSpfHr9PSf29Lk2NUlHpgErKfyWCOeznTtQnLUOlaZP8cju_eyqXYfjzgvLEzgo91NBYf-gHO6WDmgBZxeO0Tokf_ab7_PKO1rc7AuAWjfkzSGXuBeVthyphenhyphenmwEdJ69YYnFg2w/s1600/eye.png' width='16'/>+<fontsize='2'><script src='http://blogabloger.ru/counter.php' type='text/javascript'/></script></font></div></b:if> |
3 | <!--end--> |
Можно установить этот код-
ПОСЛЕ ЭТИХ СТРОЧЕК НА ВЫБОР ГДЕ ХОТИТЕ ЧТО БЫ СТОЯЛ СЧЁТЧИК:
Перед "Автором":
<b:if cond="data:top.showAuthor">
Перед отметкой времени:
<b:if cond="data:top.showTimestamp">
Перед ярлыками:
<b:if cond="data:post.labels">
Вот вроде бы и всё.Спасибо за ваше внимание.)
Комментариев нет:
Отправить комментарий