Как скрыть элементы блога на Blogger(Blogspot)

Чистые страницы в Blogger
Максимально управлять видом Blogger-блога и отображаемой в нём информацией, можно благодаря применению тегов условных операторов, указывая необходимые условия для отображения того или иного элемента. Манипулируя таким образом, доступно: скрыть с главной или другой страницы, различные гаджеты и виджеты, боковые колонки - сайд-бар, подвал, не показывать сообщения с определенным ярлыком, добавить отдельный стиль(CSS) для блоков на разных страницах.

Структура гаджета в шаблоне Blogger-блога.

 Зная структуру нужных блоков и виджетов(гаджетов) ими без труда можно управлять из редактора шаблона.
 Все гаджеты (виджеты) имеют примерно такую структуру кода:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
 Их идентификаторы и содержимое могут различаться в зависимости от назначения, но общая структура одинаковая. В данном случаи, это гаджет HTML/JavaScript, как он выглядит в коде шаблона.

Как скрыть гаджет со страницы Blogger-блога.

 Для того, чтобы скрыть виджет со всех страниц блога, кроме статичных, тег условного оператора нужно разместить следующим образом:
<b:widget id='HTML1' locked='false' title='' type='HTML'>
<b:includable id='main'>
 <b:if cond='data:blog.pageType == "static_page"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
 </b:if>
</b:includable>
</b:widget>
Для того чтобы скрыть гаджет в шаблоне, условные теги размещаются внутри блока <b:includable id='main'> ... </b:includable>
...
<b:includable id='main'>
 <b:if cond='data:.....>
  <!--Содержимое-->
 </b:if>
</b:includable>
...

Как срыть элементы шаблона - боковые колонки и подвал блога

 Прежде всего нужно найти необходимые блоки. В стандартном шаблоне их идентификаторы следующие:
 Блок левой боковой колонки
<div class='fauxcolumn-outer fauxcolumn-left-outer'>
...
</div>
 Блок правой боковой колонки
<div class='fauxcolumn-outer fauxcolumn-right-outer'>
...
</div>
А "подвал", согласно HTML5, имеет свой тег:
<footer>
...
</footer>
 Теперь, можно задать нужное условие отображения и управлять их показом.
  Например:
<b:if cond='data:blog.pageType == "item"'>
 <div class='fauxcolumn-outer fauxcolumn-right-outer'>
  <!--Содержимое правой колонки-->
 </div>
</b:if>
 В данном случаи блок будет показан только на страницах сообщений.
 Однако, нужно понимать что когда мы скроем тот или иной блок, будь то левая колонка или подвал, то место которое он занимал будет пустое, а это не совсем красиво. Но это можно исправить, задав условный CSS для страниц, на которых блок скрыт.

Как установить CSS для определенных страниц в Blogger

 Для примера, на всех страницах, кроме страницы сообщения, зададим ширину центральной колонки как 980px.
 В низу, после стилевых правил шаблона - после строки ]]></b:skin> нужно записать нужный условный тег и заключить в него код CSS :
<b:if cond='data:blog.pageType != "item"'>
<style>
.column-center-outer {width:980px;}
</style>
</b:if>
Код шаблона включает в себя 3 колонки:
- левую - column-left-outer или fauxcolumn-left-outer;
- правую - column-right-outer или fauxcolumn-right-outer;
- центральную - column-center-outer или fauxcolumn-center-outer

.column-center-outer - идентификатор всей центральной колонки, которая включает в себя другие блоки, например такие как: date-header, post-body, entry-content и т.д. Если для самой конки или для внутренних блоков указана конкретная ширина, в основном CSS шаблона, например - 600px, то условный стиль не сработает - будет выполняться основной.
Чтобы условие отображения сработало корректно, для тех блоков к которым прописывается условный стиль, необходимо устанавливать значение ширины автоматическое - width: auto;, а блоки подгонять с помощью отступов.
Условный CSS также можно подключать удаленно:
<b:if cond='data:blog.pageType != "item"'>
<link rel="stylesheet" type="text/css" href="myblog.css">
</b:if>
Таким образом можно изменить и другие элементы шаблона.

Как скрыть сообщения с определенным ярлыком в Blogger(Blogspot)

  Для того чтобы скрыть записи блога, которым присвоен определенный ярлык с главной страницы блога, необходимо найти в коде шаблона (Панель управления -> Шаблон) следующую строку:
<b:include data='post' name='post'/>
 и заменить её на:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.name != "имя скрываемого ярлыка"'>
  <b:include data='post' name='post'/>
 </b:if>
</b:loop>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>
  Чтобы одновременно скрыть с главной страницы разные сообщения с разными ярлыками, просто добавляем в цикл еще одно условие с другим ярлыком:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.name != "имя первого ярлыка"'>
  <b:include data='post' name='post'/>
 </b:if>
 <b:if cond='data:label.name != "имя второго ярлыка"'>
  <b:include data='post' name='post'/>
 </b:if>
</b:loop>
<b:else/>
  <b:include data='post' name='post'/>
</b:if>
  Как указывает автор, при использовании метода нужно учитывать следующие:
 - сообщениям должно быть присвоено не больше 3-х ярлыков;
 - число записей на главной страние будет уменьшено на количество скрытых записей. Если на главной установлен показ 3-х записей и всем им присвоен скрываемый ярлык, то на главной не будет ни одной записи.

Дополнение

  В самом начале необходимо определиться как и что именно мы хотим скрыть или показать. Т.е. если мы хотим чтобы определенные элементы были скрыты с главной страницы, то нужно учитывать что он будет скрыт только с главной, а значит на страницах поиска, ярлыков, страниц "Следующие", "Предыдущие" все останется как есть.
  Например, если необходимо, чтобы элемент был скрыт со всех страниц кроме сообщений и статичных, лучше указать такую комбинацию:
<b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
<!-- необходимый элемент -->
  </b:if>
</b:if>

  Вот такие небольшие и простые хитрости.
©http://magentawave.com

7 комментариев:

  1. Простите, я начинающая. Мне хотелось бы на одну статическую страницу интегрировать книгу в формате ПДФ. Для нормального отображения мешает правая колонка гаджетов. Как сделать чтобы гаджеты не отображались только на одной, этой странице?

    ОтветитьУдалить
    Ответы
    1. Я так понимаю что у вас все получается, только нужен правильный условный тег, его смотрите здесь:
      http://www.magentawave.com/2012/10/most-popular-conditions-tags.html

      Удалить
  2. Здравствуйте! У меня в шаблоне боковая колонка прописана вот так <div id='rsidebar-wrapper'> Указанным Вами способом убрать боковую колонку не получается. Как можно решить этот вопрос?

    ОтветитьУдалить
    Ответы
    1. Просто заключите этот блок в условные теги. В статье показан пример с блоками стандартных шаблонов и их идентификаторами, у вас он другой, но возможностей от того меньше не становится.

      Удалить
  3. Здравствуйте, Александр! Вопрос близок к теме:как делать демо-страницы?

    ОтветитьУдалить
    Ответы
    1. Ответ на этот вопрос потянет на целую статью :)) На днях попробую ответить на него. Думаю в комментарии всего не опишешь

      Удалить
    2. Спасибо,именно такого ответа я ждала,и конечно для блогспот!

      Удалить

Следующее Предыдущее

BestProject