Как сделать пагинацию страниц в Blogger

Автор:
Пагинация страниц в Blogger

Когда в блоге становится много статей, возникает необходимость сделать удобную постраничную навигацию. Она помогает читателям быстрее переходить между страницами и находить нужные материалы, а блог в целом становится более аккуратным и профессиональным.

По умолчанию Blogger отображает только ссылки «Следующая страница» и «Предыдущая страница». Но удобнее использовать полноценную пагинацию с номерами страниц (1, 2, 3…) и кнопками навигации.

На просторах интернета я нашёл готовый скрипт пагинации для Blogger. Ниже делюсь рабочим кодом и несколькими вариантами оформления - вы сможете выбрать стиль, который лучше всего подходит под ваш дизайн.

Установка пагинации

Чтобы добавить пагинацию в Blogger, нужно вставить в шаблон перед тегом </body> следующий код:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
    var postperpage=5;
var numshowpage=5;
var upPageWord ='Назад';
var downPageWord ='Дальше';
var urlactivepage=location.href;
var home_page="/";
</script>
<script type='text/javascript'>
//<![CDATA[
var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+='  '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+=''}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat}
//]]>
</script>
</b:if>
</b:if>

Выбор стиля для пагинации

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

Перейдите в Тема → Изменить HTML и вставьте один из вариантов стилей перед ]]></b:skin>

Вариант 1 - Material Design

Современный стиль с синим акцентом и плавными эффектами наведения.

Material Design
.showpageOf {
  display: inline-block;
  font-size: 13px;
  padding: 6px 12px;
  color: #666;
}

.showpagePoint {
  background: #1976d2;
  color: #fff;
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  font-size: 14px;
  border-radius: 4px;
  font-weight: 500;
}

.showpage a,
.showpageNum a {
  display: inline-block;
  padding: 8px 14px;
  margin: 0 3px;
  font-size: 14px;
  color: #1976d2;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.showpage a:hover,
.showpageNum a:hover {
  background: rgba(25, 118, 210, 0.1);
  color: #0d47a1;
}

Вариант 2 - Минимализм

Чистый и аккуратный стиль с лёгкими рамками.

Минимализм
.showpageOf {
  display: inline-block;
  font-size: 13px;
  padding: 6px 12px;
  color: #777;
}

.showpagePoint {
  border: 1px solid #ddd;
  background: #f9f9f9;
  color: #333;
  display: inline-block;
  padding: 7px 14px;
  margin: 0 3px;
  font-size: 14px;
  border-radius: 4px;
}

.showpage a,
.showpageNum a {
  display: inline-block;
  padding: 7px 14px;
  margin: 0 3px;
  font-size: 14px;
  color: #444;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.showpage a:hover,
.showpageNum a:hover {
  background: #f5f5f5;
  color: #000;
}

Вариант 3 - Кнопочный

Компактные кнопки с мягкими тенями и выразительным активным состоянием.

Кнопочный
.showpageOf {
  display: inline-block;
  font-size: 13px;
  padding: 6px 12px;
  color: #666;
}

.showpagePoint {
  background: #444;
  color: #fff;
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  font-size: 14px;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.showpage a,
.showpageNum a {
  display: inline-block;
  padding: 8px 16px;
  margin: 0 4px;
  font-size: 14px;
  color: #333;
  background: #fdfdfd;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  transition: all 0.3s ease;
}

.showpage a:hover,
.showpageNum a:hover {
  background: #eee;
  color: #111;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

Как настроить навигацию:

var postperpage=5; Это количество постов (записей), которые будут отображаться на одной странице блога. Скрипт использует это число, чтобы правильно делить посты на страницы.

var postperpage=5
  1. Перейдите в Blogger → Настройки → Сообщения на главной странице.
  2. Посмотрите, какое число стоит в пункте «Максимальное количество сообщений на главной странице».
    3. Сообщения на главной странице
  3. В скрипте замените 5 на это же число. Например, если в настройках стоит 7:
    var postperpage = 7;
  4. Сохраните шаблон. Теперь каждая страница будет показывать указанное количество постов.

Теперь у вас есть готовый скрипт постраничной навигации и несколько вариантов оформления, которые легко адаптировать под дизайн блога. Вы можете выбрать минимализм, современный Material Design или кнопочный стиль с тенями - всё зависит от ваших предпочтений.

Красивый и удобный блог - это то, что оставляет приятное впечатление у ваших посетителей. Начните с мелочей, и результат не заставит себя ждать!

Комментарии

Отправить комментарий