Первичная настройка нового блога на платформе Blogger

В качестве экспериментов я сменил тему и ещё раз убедился, что при этом слетают все предыдущие настройки, из-за чего придётся их накатить по новой. Благо, их было немного, так что потеря не велика.

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

Система комментариев Disqus

Исходная статья для настройки - Подключение Disqus к блогу на Blogger.com и Manually adding a Disqus gadget to Blogger.

Внимание: в переменную disqus_shortname должно попасть имя сайт каким оно известно Disqus'у (в моём случае туда надо было записать - it-knowledge-base).

Стиль заголовков

Заголовок записи

Почему заголовок каждой записи изначально получает стиль H3, мне, признаться, до сих пор непонятно - я бы ожидал что этот текст, как самый главный, будет иметь хотя бы H1. Поэтому, конечно же, исправляем.

Поиском находим post-title со следующим фрагментом (их может быть несколько) и меняем стиль c H3 на H1:

          <a expr:name='data:post.id'/>
          <b:if cond='data:post.title'>
            <h1 class='post-title entry-title' itemprop='name'>
              <b:if cond='data:post.link'>
                <a expr:href='data:post.link'><data:post.title/></a>
              <b:else/>
                <b:if cond='data:post.url'>
                  <b:if cond='data:blog.url != data:post.url'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <data:post.title/>
                  </b:if>
                <b:else/>
                  <data:post.title/>
                </b:if>
              </b:if>
            </h1>
          </b:if>


Ссылка в тему - Optimize your Blogger Blog Post Titles for Better SEO (на английском).

Размеры шрифтов

Причина, по которой размер текста H2 оказывается меньше размера текста H3, мне не ясна, но исправить это просто.

В разделе <b:skin> находим следующие строки и добавляем строку с нужным нам размером:

h2 {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);

  font-size: 140%;
}


Ширина страниц блога

Пустые вертикальные белые поля на широких мониторах никого не радуют, и от них избавиться просто.

В разделе <b:template-skin> находим следующие строки и прописываем конкретные размеры:

      .content-outer, .content-fauxcolumn-outer, .region-inner {
        min-width: 1024px; /*$(content.width);*/
        max-width: 1280px; /*$(content.width);*/
        _width: $(content.width);
      }


Сворачиваемый текст

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

Первым делом в раздел <b:template-skin> добавляем две строки (напр., сразу после <![CDATA[):

.posthidden {display:none}
.postshown {display:inline}

Затем добавляем скрипт (я сделал это перед закрывающим тегом </bode> - там уже у меня был какой-то скриптик):

<script type="text/Javascript">
function expandcollapse (postid) { 
   whichpost = document.getElementById(postid); 
   if (whichpost.className=="postshown") {
      whichpost.className="posthidden";
   }
   else {
      whichpost.className="postshown";
   }
}
</script>

После этого шаблон можно сохранить.

Текст, у которого есть скрываемый фрагмент, надо оформлять следующим образом (идентификаторы типа subtopic0001 должны быть уникальными в пределах страницы):

<a href="javascript:expandcollapse('subtopic0001')">Что зимой и летом одним цветом?</a><span id="subtopic0001"
      class="posthidden"> Доллар :)</span>

Вот как это выглядит и работает: Что зимой и летом одним цветом? Доллар :)

Боевой пример пример можно посмотреть в моей заметке.

Ссылка в тему - How to Show and Hide Text in Blog Post (на английском).

 Published by WebStory