Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Элемент страничной навигации в Blogspot блоге

Недавно на почту мне пришло письмо с просьбой рассказать как добавить в блог навигацию по страницам «вперед» — «назад» т.к. не в каждом нестандартном шаблоне такая опция может присутствовать. Я немного поизучал данный вопрос, спешу поделиться своими наработками по этому поводу.

1. Если элемент навигации не отображается, нужно проверить установлен ли он. Как правило, большинство авторов шаблонов все же добавляет разбиение на страницы – ибо это стандартная опция системы Blogger. Фишка в том, что некоторые предпочитают скрывать этот элемент из-за определенной структуры шаблона и каких-то непонятных личных причин.

Поэтому первый шаг — поиск в коде шаблона (меню «Макет» — «Изменить HTML», со включенной галочкой «расширенные шаблоны виджета») таких строк:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
…

Как вы видите, они располагаются в элементе сообщений блога. Теперь нужно глянуть в самом начале кода шаблона (где расположен CSS) стили для навигационного блока.

#blog-pager-newer-link {
 float: left;
}

#blog-pager-older-link {
 float: right;
}

#blog-pager {
 text-align: center;
}

В нескольких шаблонах я замечал, что авторы добавляют в эти стили строку display:none, которая и скрывает элемент навигации в блоге. Ее следует удалить из каждого стиля навигационной панели. Собственно, в этой же части CSS можно добавить разные «украшения» для своего блога, если вы разбираетесь в стилях: изменить шрифт, фон, цвет и т.п.

2. Если у вас нет элемента навигации в HTML коде, то нужно его добавить. Для этого находим начало блога сообщений:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Сообщения блога' type='Blog'>

и сразу же после второй строки добавляем код (галочкой «расширенные шаблоны виджета» должна быть влючена):

<b:includable  id='nextprev'>
<div class='blog-pager'  id='blog-pager'>
 <b:if cond='data:newerPageUrl'>
   <span id='blog-pager-newer-link'>
   <a class='blog-pager-newer-link'  expr:href='data:newerPageUrl' expr:id='data:widget.instanceId +  &quot;_blog-pager-newer-link&quot;'  expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
   </span>
 </b:if>

 <b:if cond='data:olderPageUrl'>
   <span id='blog-pager-older-link'>
   <a class='blog-pager-older-link'  expr:href='data:olderPageUrl' expr:id='data:widget.instanceId +  &quot;_blog-pager-older-link&quot;'  expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
   </span>
 </b:if>

 <b:if cond='data:blog.homepageUrl !=  data:blog.url'>
   <a class='home-link'  expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   <b:else/>
   <b:if cond='data:newerPageUrl'>
     <a class='home-link'  expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
   </b:if>
 </b:if>

</div>
<div class='clear'/>
</b:includable>

Здесь в шаблон добавляются ссылки для «предыдущих», «следующих» постов + ссылка на главную страницу.

3. В некоторых англоязычных блогах кроме стандартного разбиения есть полноценная страничная навигация – как это реализовано для wordpress. Выглядит достаточно симпатично:

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

09.05.09

Категории: Blogger.com (Blogspot).

Теги: , ,

Добавить комментарий

Ваш e-mail не публикуется. Обязательные поля помечены *
Если вы комментируете впервые, то текст будет отправлен на модерацию.