Навигации с номерами страниц для Blogger

Навигации с номерами страниц для Blogger – интересная и долгожданная деталь Blogger блога. Возможно, вы видели подобную навигацию в блогах wordpress (wp-pagenavi by Lester Chan). Muhammad Rias из Techie Blogger разработал систему навигации по страницам для Blogger. В этой системе были некоторые недочеты, но Abu Farhan всё исправил, и теперь система выглядит также, как на скриншоте.


Если вы будете использовать эту настройку, такая навигация появится на главной странице блога и странице закладок label pages (придется немного доработать).

Установка навигация с номерами страниц в ваш Blogger блог

Для тех, кто плохо знаком с HTML достаточно просто кликнуть на приведенную ниже кнопку.



После завершения установки виджета перейдите к пункту доработки страниц закладок label pages.

Сложный метод

Если вы установили виджет, вы не должны это читать :-) Перейдите к пункту доработки страниц закладок label pages.

1.Зайдите в панель управления Blogger Dashboard и перейдите к пунктам Layout > Edit Html

2.Не щелкайте по галочке ‘Expand Widget Templates’

3.Найдите

]]></b:skin>

и замените кодом

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
]]></b:skin>

Это часть CSS, которая определяет внешний вид навигации с номерами страниц. Эту часть вы можете изменять по своему желанию.

4. Следующая часть – скрипт JavaScript. Найдите

</body>

и замените на

<!--Page Navigation Starts--> 
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<script type='text/javascript'> 
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script> 
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/> 
</b:if> 
</b:if> 
<!--Page Navigation Ends --> 
</body>

Как вы видите, тут есть несколько изменяемых параметров.

var pageCount=5;

Этот код определяет количество постов на странице.

var displayPageNum=5;

Этот код определяет количество дополнительных номеров страниц, которые будут отображаться на странице.

var upPageWord ='Previous';
var downPageWord ='Next';

Эти две линии определяют текст, который будет появляться вместо previous page и next page соответственно.

Доработка страниц закладок label pages

Сейчас перед нами еще одна проблема. По умолчанию в Blogger показывается 20 страниц закладок label pages. Наша задача изменить это значение на значение, указанное в pageCount (или постах на страницу). Для этого необходимо отредактировать шаблон.

Как отредактировать шаблон чтобы изменить количество постов на страницу?

Перейдите в меню Edit HTML и раскройте виджеты.

Далее найдите все вхождения

'data:label.url'

(включая кавычки) и замените на

'data:label.url + "?&max-results=5"'

Здесь 5 - это число постов, показываемых на странице.

Далее если вы используете виджет для облака тэгов от phydeaux3, найдите

a.href = '/search/label/'+encodeURIComponent(t);

и замените на

a.href = '/search/label/'+encodeURIComponent(t)+'?&max-results=5';

Где опять же 5 число постов, показываемых на странице.

Теперь навигация с номерами страниц в вашем блоге должна работать!

Эта инструкция основана на коде от Abu Farhan и Muhammad Rias. Пожалуйста, дайте на их ссылку.
Постоянный линк Numbered Page Navigation For Blogger

Перевод на русский язык сделал фото блог Atlanta Travel. Постоянный линк Навигации с номерами страниц для Blogger