
Максимально управлять видом 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 != ""'>
<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, как он выглядит в коде шаблона.<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Как скрыть гаджет со страницы 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 != ""'>
<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:if cond='data:blog.pageType == "static_page"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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>
...
<b:includable id='main'>
<b:if cond='data:.....>
<!--Содержимое-->
</b:if>
</b:includable>
...
Как срыть элементы шаблона - боковые колонки и подвал блога
Прежде всего нужно найти необходимые блоки. В стандартном шаблоне их идентификаторы следующие:Блок левой боковой колонки
<div class='fauxcolumn-outer fauxcolumn-left-outer'>
...
</div>
Блок правой боковой колонки...
</div>
<div class='fauxcolumn-outer fauxcolumn-right-outer'>
...
</div>
А "подвал", согласно HTML5, имеет свой тег: ...
</div>
<footer>
...
</footer>
Теперь, можно задать нужное условие отображения и управлять их показом. ...
</footer>
Например:
<b:if cond='data:blog.pageType == "item"'>
<div class='fauxcolumn-outer fauxcolumn-right-outer'>
<!--Содержимое правой колонки-->
</div>
</b:if>
В данном случаи блок будет показан только на страницах сообщений.<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>
.column-center-outer {width:980px;}
</b:if>
Код шаблона включает в себя 3 колонки:
- левую - column-left-outer или fauxcolumn-left-outer;
- правую - column-right-outer или fauxcolumn-right-outer;
- центральную - column-center-outer или fauxcolumn-center-outer
- левую - 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 также можно подключать удаленно:Чтобы условие отображения сработало корректно, для тех блоков к которым прописывается условный стиль, необходимо устанавливать значение ширины автоматическое - width: auto;, а блоки подгонять с помощью отступов.
<b:if cond='data:blog.pageType != "item"'>
<link rel="stylesheet" type="text/css" href="myblog.css">
</b:if>
Таким образом можно изменить и другие элементы шаблона.<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:loop values='data:post.labels' var='
<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>
Как указывает автор, при использовании метода нужно учитывать следующие:<b:loop values='data:post.labels' var='
<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-х записей и всем им присвоен скрываемый ярлык, то на главной не будет ни одной записи.
- число записей на главной страние будет уменьшено на количество скрытых записей. Если на главной установлен показ 3-х записей и всем им присвоен скрываемый ярлык, то на главной не будет ни одной записи.
Дополнение
В самом начале необходимо определиться как и что именно мы хотим скрыть или показать. Т.е. если мы хотим чтобы определенные элементы были скрыты с главной страницы, то нужно учитывать что он будет скрыт только с главной, а значит на страницах поиска, ярлыков, страниц "Следующие", "Предыдущие" все останется как есть.Например, если необходимо, чтобы элемент был скрыт со всех страниц кроме сообщений и статичных, лучше указать такую комбинацию:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- необходимый элемент -->
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<!-- необходимый элемент -->
</b:if>
</b:if>
Вот такие небольшие и простые хитрости.
©http://magentawave.com
Простите, я начинающая. Мне хотелось бы на одну статическую страницу интегрировать книгу в формате ПДФ. Для нормального отображения мешает правая колонка гаджетов. Как сделать чтобы гаджеты не отображались только на одной, этой странице?
ОтветитьУдалитьЯ так понимаю что у вас все получается, только нужен правильный условный тег, его смотрите здесь:
Удалитьhttp://www.magentawave.com/2012/10/most-popular-conditions-tags.html
Здравствуйте! У меня в шаблоне боковая колонка прописана вот так <div id='rsidebar-wrapper'> Указанным Вами способом убрать боковую колонку не получается. Как можно решить этот вопрос?
ОтветитьУдалитьПросто заключите этот блок в условные теги. В статье показан пример с блоками стандартных шаблонов и их идентификаторами, у вас он другой, но возможностей от того меньше не становится.
УдалитьЗдравствуйте, Александр! Вопрос близок к теме:как делать демо-страницы?
ОтветитьУдалитьОтвет на этот вопрос потянет на целую статью :)) На днях попробую ответить на него. Думаю в комментарии всего не опишешь
УдалитьСпасибо,именно такого ответа я ждала,и конечно для блогспот!
УдалитьДобрый день. Такой вопрос. В адаптивном дизайне "contempo" виджеты "теги" и "архив" в боковой панели закрыты под кат (разворачиваются при клике на название виджета). Подскажите пожлуйста, какая часть кода виджета отвечает за эту функцию и как её прописать остальным виджетам боковой панели с сохранением оригинального дизайна (не прописывая его для каждого виджета отдельно)? Виджетов с подключением соцсетей и информеров стало много, и хочется большинство из них спрятать под кат.
ОтветитьУдалитьСпасибо, помогло!!!!
ОтветитьУдалить