Привет всем! Сегодня будем ставить удобную систему навигации  для Вашего блога. Стандартный вид навигации - отображён ссылками: Следующее; Главная страница; Предыдущее; что очень не удобно для посетителей. Я покажу Вам как поставить нормальную постраничную навигацию с помощью простого  Java Scriptа. Прежде я пошлю Вас посмотреть этот виджет в действии. Смотреть Демо. Теперь можно приступать.

Как поставить нумерованный Page Navigation  для блоггера
Заходим в Шаблон -- Изменить HTML. Далее с помощью поиска (Ctrl+F)  найдите  эту строку в вашем шаблоне: ]]></b:skin>. Перед этой строкой Вам надо будет поставить CSS стиль вашей навигации. Обязательно перед (чуть выше) ]]></b:skin> вставляем этот код:

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}


Сохраните шаблон.Теперь идите Дизайн -- Элементы страницы и нажмите кнопку "Добавить гаджет"- "HTML / Java Script" затем вставьте в поле гаджета этот код: код длинный с прокруткой.


<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=1;
var displayPageNum=3;
var upPageWord ='Previous';
var downPageWord ='Next';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
  html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;


if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
 thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
 upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
 html = labelHtml+'1</a></span>';
}else{
 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';


var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>


Перетащите новый гаджет под раздел "Сообщения  блога". Выделенное зелёным цветом Вы можете поменять на свои значения. Вот и всё.Мы установили виджет: Постраничная навигация (Page Navigation) для Blogger. Незабываем благодарить, нажимая на кнопочки здесь. Всего доброго.


Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями в соцсетях:


25 коммент. :

  1. Все работает, только вот когда переключаю на 2 страницу показывает только название сообщений без содержимое. Можно как-то это исправить?

    ОтветитьУдалить
  2. Я проверил ещё раз,установил на другой шаблон-всё работает.
    http://footballclub-rustemplete.blogspot.com/ А здесь я пользуюсь постраничной навигацией уже давно и всё в порядке.http://partija-zhulikov-i-vorov.blogspot.com/ Может чего то неправильно сделали?

    ОтветитьУдалить
  3. Все сделал согласно инструкции, но почему-то на второй странице только одна новость, вместо пяти: , Буду признателен за доходчивое решение проблемы.

    ОтветитьУдалить
  4. Теперь другой вопрос: как изменить цвет цифр на кнопках?

    ОтветитьУдалить
  5. В первом коде CSS .

    ОтветитьУдалить
  6. На это моих знаний хватило. А вот дальше никак. По какой фразе искать? Спасибо.

    ОтветитьУдалить
  7. сижу несколько часов и мучаюсь с этими страницами, ничего не работает. до этого полностью удалила панель навигации. что делаю не так, подскажите, пожалуйста?

    ОтветитьУдалить
  8. Что именно у Вас не получается?

    ОтветитьУдалить
  9. удалила все, что было связано со старой навигацией,вставила эти коды, в результате ни того ни этого нет, и теперь не представляю как смотреть другие страницы с постами))

    ОтветитьУдалить
  10. Не надо было удалять.Может попробуете вот это: http://new-school-blogger.blogspot.ru/2011/12/postranichnaja-navigacija-dlja-blogger.html

    ОтветитьУдалить
  11. спасибо, все исправила :)

    ОтветитьУдалить
  12. Да вроде не за что.

    ОтветитьУдалить
  13. Сергей, нужна помощь.
    Удалил старую навигацию давно уже... Неоткуда взять ее. Она обязательна нужна чтобы эта работала?

    ОтветитьУдалить
  14. Попробуйте без старой навигации.Может будет работать.Точно не знаю.

    ОтветитьУдалить
  15. Как изменить цвет текста на кнопках (Мне нужен чёрный)

    ОтветитьУдалить
  16. Отлично! Сергей, спасибо! Уж почто я профан полнейший в html науке, но у меня всё отлично получается по Вашим чётким инструкциям.

    ОтветитьУдалить
    Ответы
    1. Привет,Мария!Для вас и стараюсь,чтобы всё получалось. 8-)

      Удалить
  17. Спасибо...прекрасно ! - Все работает :)

    ОтветитьУдалить
  18. Подскажите пожалуйста, навигация появилась и работает, но криво. Первая страница отображается как обычно, на второй третье сообщение с первой страницы, и на каждой последующей по 1 сообщению.

    ОтветитьУдалить
  19. Все разобралась! Нужно поставить одинаковую цифру: в настройках количество сообщений на главной странице, в скрипте var pageCount и var displayPageNum. Я везде поставила 7 и теперь все работает замечтательно!
    Спасибо огромное, давно мечтала о такой навигации!

    ОтветитьУдалить
    Ответы
    1. Привет,Елена! Вы молодец, справились. (h)

      Удалить
  20. Сергей, еще такой вопрос, может сможете помочь. Навигация отображается на главной странице блога (и так и должно быть) и на страницах сообщений и на страницах (где, как мне кажется, ее быть не должно, ведь по ссылке люди уходят совсем не туда, куда хотели). А вот на страницах ярлыков навигация нужна, а на них отображается она обычная по умолчанию.
    Пыталась это исправить разными способами, запретить показ кода на страницах сообщений - не помогает.
    Спасибо за ответ.

    ОтветитьУдалить