Гаджеты для Blogger. — Примеры

Гаджеты для Blogger. — Примеры Гаджет
Содержание
  1. Как правильно прописать тип страницы — последнее, что мы разберем сегодня. Тут вам все станет понятно из следующего списка:
  2. Когда код гаджета найден, и точно определены его начало и конец, можно добавить к нему условие. Для этого заключим содержимое гаджета в условие по следующей схеме:
  3. — «архив блога». а выше находится контейнер div, который и является контейнером всего гаджета архива. контейнер гаджета можно узнать потому, что у него всегда идет класс «widget», и через пробел написано название гаджета. в данном случае это «blogarchive». если вы на строке с этим контейнером щелкните слева по значку «-«, то есть свернете этот контейнер, то увидите, что он находится на одном уровне с другими подобными контейнерами, которые все имеют класс widget, и через пробел — уникальное название гаджета. на нашем скриншоте мы видим выше такие гаджеты, как «widget label» (гаджет ярлыков или рубрик), «widget followbyemail» (подписка на рассылку), «widget linklist» (список ссылок), «widget text» (текстовый гаджет) и «widget profile» (гаджет автора блога).
  4. Blogger: гаджет статистика блога. новые стили и функции виджета
  5. Виджет для blogger случайные сообщения
  6. Виджет: случайные сообщения, горизонтальный с картинками
  7. Как добавить виджет на blogger
  8. Как создать динамический заголовок блога
  9. Меняем стиль комментариев в блоге blogger
  10. Убрать гаджет blogger с определённой страницы.
  11. Увеличить ширину всего блога.

Как правильно прописать тип страницы — последнее, что мы разберем сегодня. Тут вам все станет понятно из следующего списка:

1. Показ только для главной страницы:

[box type=»warning»] Обратите внимание, что, если вы используете какую-то другую страницу вместо главной, то нужно будет прописать полный адрес используемой страницы (см. 7 пункт)[/box]

2. Показ только для страниц сообщений:

3. Показ только для страниц архива:

4. Показ только для статичных страниц:

5. Показ только для главной и для страниц ярлыков:

6. Показ  для статичных страниц и страниц сообщений:

7. Показ только для определенной пользователем страницы (нужно вставить полный адрес страницы):

Ну и конечно, каждое из эти условий можно применить наоборот, если вместо двойного равенства поставить «!=».

Когда код гаджета найден, и точно определены его начало и конец, можно добавить к нему условие. Для этого заключим содержимое гаджета в условие по следующей схеме:


[содержимое виджета]


То есть после первых двух строк, начиная со строки <b:widget…, вам нужно поставить условие, и перед последними двумя строками, начиная с

Гаджет:  гаджет блок купить по низкой цене на Aliexpress

Разберем сам код условия:

Слово «if» указывает на условие. После кода «data:blog.pageType» указывается тип страницы, для которого должно быть выполнено условие. То есть, если мы находится на этой странице, то гаджет будет показан. А на всех остальных страницах он будет скрыт.

Предположим, что мы хотим выводить гаджет везде, кроме определенных страниц. Что нам теперь делать — прописать в условие все страницы, где он будет выводиться? Это может быть очень утомительным. Для этого есть обратное условие. В этом случае после «data:blog.

pageType» будет не двойной знак равенства, который указывает на тождество условия заданному типу страницы, а вот такой знак: «!=», который указывает на то, что условие будет работать только в случае неравенства. То есть гаджет будет выводится только в том случае, если мы находимся на любой странице, отличной от указанной в условии. Можно использовать оба эти способа, в зависимости от ситуации.

И не забывайте, что нужно поставить закрывающий тег условия перед двумя последними строками кода гаджета:

— «архив блога». а выше находится контейнер div, который и является контейнером всего гаджета архива. контейнер гаджета можно узнать потому, что у него всегда идет класс «widget», и через пробел написано название гаджета. в данном случае это «blogarchive». если вы на строке с этим контейнером щелкните слева по значку «-«, то есть свернете этот контейнер, то увидите, что он находится на одном уровне с другими подобными контейнерами, которые все имеют класс widget, и через пробел — уникальное название гаджета. на нашем скриншоте мы видим выше такие гаджеты, как «widget label» (гаджет ярлыков или рубрик), «widget followbyemail» (подписка на рассылку), «widget linklist» (список ссылок), «widget text» (текстовый гаджет) и «widget profile» (гаджет автора блога).

Таким образом вы можете понять теперь, как вам найти код нужного вам гаджета. У вас список скорее всего будет другим, но пользуясь данным алгоритмом, вы легко найдете нужный гаджет.

В итоге, нам нужен уникальный id нашего гаджета. Не класс, а именно id! Если у вас на странице есть два гаджета одного типа (а это очень вероятно, особенно если вы используете гаджет html/javascript), то у них будет одинаковый класс «widget HTML».

Два гаджета одного класса можно отличить по id. он то нам и нужен. В той же строке контейнера, где записан класс гаджета, записан и его id. Как правило, это тот же уникальный класс, только вместе с порядковым номером. Например «HTML1» или «Text3».

Гаджет:  100 идей для тех, кому нечем заняться дома

Данный способ немного сложноват и предполагает наличие хотя бы базовых знаний html, зато позволяет вам использовать его и в других ситуациях. Например, когда нужно правильно определить какой-нибудь лишний кусок дизайна, который хочется удалить.

Способ 2. Еще один более простой способ узнать id гаджета заключается в следующем — на вкладке «Дизайн» в административной панели блоггера открываете нужный вам гаджет и увеличиваете окно на весь экран, чтобы видеть полностью адресную строку:

В конце адреса страницы, после слов widgetid и знака «=» будет нужный нам id нашего гаджета!

Копируем id гаджета, идем в html-редактор шаблона и с помощью поиска (CTRL F) находим код нашего гаджета.

[box type=»warning»] Перед работой с html-кодом шаблона не забываем делать резервную копию![/box]

Код гаджет имеет примерно такой вид:

[содержимое виджета]

То есть идут две строки открывающие гаджет, потом идет само содержимое, и в конце — две строки закрывающие гаджет.

Например для гаджета профиля в моем блоге используется такой код:

Blogger: гаджет статистика блога. новые стили и функции виджета

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

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>

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

Гаджет:  Лето — пора легких платьев! Лучшие гаджеты для красоты женских ножек | Блог Comfy

Виджет для blogger случайные сообщения

Раньше я уже затрагивал эту тему, но в связи с тем, что доступ к скрипту был закрыт ( причина неизвестна) и виджеты перестали работать, предлагаю вам другие. Первым у нас пойдет гаджет случайные статьи без картинок, уверен Вы знаете, как работает данный виджет.

Хочу только сказать, что при помощи ротатора (сменяющихся) сообщений увеличится количество просмотров. Особенно старых, забытых записей, так как виджет будет вытаскивать их на свет божий (на глаза посетителей) где они непременно захотят с ними ознакомятся. Вот как то так. Скриншот из моего полит блога:

vidzhet-sluchajnye-soobschenija
Виджет случайные статьи без картинок

Случайные сообщения без картинок занимают меньше места на боковой панели блога, чем с картинками. Установка обычная, как и всегда. Стили устанавливаем в шаблон блога чуть выше строчки ]]></b:skin>, а сам код в незаменимый гаджет Html/JavaScript.

Стиль CSS:

Виджет: случайные сообщения, горизонтальный с картинками

widget-random-post-horizontal
Виджет: случайные сообщения, горизонтальный с миниатюрами

Инструкция установки такая. Сначала добавляем стиль для гаджета:

Как добавить виджет на blogger

Гаджеты для Blogger. — Примеры
Загрузить PDF

Гаджеты для Blogger. — Примеры
Загрузить PDF

X

wikiHow работает по принципу вики, а это значит, что многие наши статьи написаны несколькими авторами. При создании этой статьи над ее редактированием и улучшением работали, в том числе анонимно, 21 человек(а).

Количество просмотров этой статьи: 8438.

Виджеты, также известные как гаджеты, это маленькие инструменты или приложения, которые могут быть добавлены на сайт или блог, чтобы усовершенствовать его контент или функции, или получать контент и услуги от сторонних веб-сайтов. Виджеты поставляются в нескольких формах, таких как бегущие строки обратного счета, фотографии, игры или интерактивные социальные медиа-приложения, которые позволяют вам общаться. Некоторые виджеты в Blogger служат для совершенствования вашего блога, например, перечень подписчиков вашего блога, или позволяя читателям подписаться на содержание блога. Вот шаги, как добавить виджет на Blogger.

Как создать динамический заголовок блога

Суть такая, на главной странице блога отображается название его как есть, а при просмотре сообщения, заголовок блога превращается в название той статьи которую читаешь. Я такое видел на зарубежных блогах, пишут, что это полезно для SEO. Блин, объяснить не могу как следует. Скрин главной страницы демо блога. Название Демо блог:

Fungsi-Dinamik-Heading
Как создать динамический заголовок блога

Скрин когда читаю статью, заголовок (вверху) закрыт от индексации поисковика:

Dinamik- Heading
Динамичный заголовок

Меняем стиль комментариев в блоге blogger

Можно установить, чтобы было вот так:

Counter- comment
Новый стиль для комментариев

Стиль CSS:

Убрать гаджет blogger с определённой страницы.

Расположением гаджетов на определённых страницах можно управлять. То есть, скажем, разместить гаджет «Архив блога» на всех страницах, кроме Главной. Находим соответствующий код («Дизайн»-«Изменить HTML»-«Ctrl F»):

Увеличить ширину всего блога.

  1. «Дизайн»-«Дизайнер шаблонов»-«Дизайн»-«Изменение ширины». Увы, более 1000px сделать здесь не удастся. Поэтому запоминаем установленную цифру всего блога.
  2. Переходим на вкладку «Изменить HTML», ищем заданную цифру (CTRL F), меняем её на необходимый размер.

У меня код, отвечающего за размер блога выглядит следующим образом:

Оцените статью
GadgetManiac
Добавить комментарий