Нумерация страниц в Blogger

16.06.2013

 Просмотрела в Интернете несколько вариантов постраничной нумерации. Но, как правило, нужно было вставлять в код шаблона два блока - с самим скриптом и со стилями. Один из них проверила. Работает. Но конфликтует с моей страницей Все гаджеты. Нашла другой замечательный вариант: при помощи вставки кода в гаджет HTML/JavaScript.
Источник, где взяла код скрипта и идею: http://blogodel.com/2013/01/postranichnaja-navigacija-blogspot.html

А вот алгоритм вставки постраничной навигации:

1. Заходим в Дизайн блога. Находим Добавить гаджет


2. И из списка гаджетов выбираем HTML/JavaScript 


3. В поле Содержание вставляем вот этот код:
<style>.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;
}</style><script type='text/javascript'>
var home_page_url = location.href;
var pageCount=2;
var displayPageNum=3;
var upPageWord ='Назад';
var downPageWord ='Вперёд';
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"> Страниц ('+(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>

4. Редактируем в коде (можно сначала это сделать в Блокноте):
  • var pageCount=6 - количество сообщений на главной странице. То есть, смотрите - сколько сообщений у Вас отображается на Главной странице и ставите такое же число. 

        Напомню, как изменить количество сообщений на Главной странице:
        1) Заходим в Дизайн блога. Находим гаджет Сообщение. Нажимаем            Изменить




2) В параметрах  страницы ставим нужное количество отображаемых
постов.



  • var displayPageNum=10 - количество страниц, которые будут показаны в гаджете. У меня 10.    

5. Сохраняем гаджет. Перетаскиваем его под гаджет Сообщение.

Для того, чтобы "подогнать" немного внешний вид гаджета нумерации, я изменила 2 цвета в коде.

1) Цвет #CCCCCC (серый) заменила на #ea8df7 (фиалковый) - это цвет квадратика с номером выбранной страницы, цвет разделителя. Заменила все шесть значений в коде. Очень темный не делайте - номера страницы не будет видно. 

2) Цвет #333333 (темно-серый) заменила на #660066 (сливовый) -  цвет самого номера страницы. Заменила 2 раза. 

Вы можете точно также изменить цвета постраничной нумерации "под себя", поэкспериментировав с цветом. HTML код цвета можно найти в поисковике Яндекса.

Например, для блогов с синим фоном можно взять такие цвета:




!!!!!
!!!


Удачи!

61 комментарий:

  1. Анонимный27.06.2013, 23:05

    Здравствуйте!У меня проблема с LinkWithin ... не могли бы сказать почему не вставляются сами картинки?вставляются только ссылки на рекомендуемые
    статьи...

    ОтветитьУдалить
  2. Отличный гаджет, спосибо за пост, давно себе такой хотел, наконецто нашол !!! (h)

    ОтветитьУдалить
  3. Мария! Урааа!!! Теперь у меня есть страницы!!! Спасибо!!! (f)

    ОтветитьУдалить
  4. отличный совет!давно искала!спасибо огромное!!!

    ОтветитьУдалить
  5. Спасибо большое за такой хороший урок! Тоже наконец то сделал на своём блоге нумерацию страниц и выглядят страницы теперь гораздо лучше и перемещаться по страницам стало легче!

    ОтветитьУдалить
  6. Спасибо большое, Мария за такую полезную статью!

    ОтветитьУдалить
  7. Ура! Получилось! Спасибо за полезную публикацию!

    ОтветитьУдалить
  8. Ура!Спасибо большое смотрите http://chertezhi-kompas3d.blogspot.com/

    ОтветитьУдалить
  9. И у меня получилось! http://double-health.blogspot.com/ Урааа!!! Спасибо вам большое - благодаря вашим статьям у меня все получается)))

    ОтветитьУдалить
  10. Рада, что эта статья была полезна для многих :)

    ОтветитьУдалить
  11. Спасибо! У меня все получилось :)

    ОтветитьУдалить
  12. Мария спасибо Вам огромное. Я по Вашему Блогу, сознаю сейчас свой.
    Но вот этот пункт я ни никак не могу пройти, в гаджет Настроить HTML/JavaScript я вставила, в содержание код, поменяла, var pageCount=6 и var displayPageNum=10 и ничего не получается(
    А в название, что нибудь вписывать? Помогите плизз.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте! В название гаджета я написала "Загляните и на другие страницы". Можно что-нибудь другое. А показатель var pageCount=6 точно соответствует количеству сообщений, отображаемых на главной странице Вашего блога?

      Удалить
    2. Да, Мария все соответствует, я даже меняла номер страницы не получается.
      В Блоге отображается, только название страницы.

      Удалить
    3. Странно. У Вас шаблон стандартный или от сторонних разработчиков?
      Еще может быть конфликт с каким-нибудь гаджетом. Попробуйте код взять из первоисточника. В начале статьи есть ссылка.

      Удалить
    4. Шаблон родной. Да я пробовала, из.др.источника вставить не получается, оставила, как есть предыдущие и следующие кнопки.
      Мария, спасибо Вам за время потраченное.

      Удалить
  13. Такой хороший блог. Но почему то многие скрипты не работают. Например, данный скрипт ничего не отображает. Просто пустота. Перепробовала все карты блога, опять ничего. Вроде бы и доступно всё написано и последовательно, но в моем блоге не работает. HTML блога так изменил дизайн, что пришлось делать новый блог и перезаливать все сообщения. Жаль.

    ОтветитьУдалить
    Ответы
    1. Спасибо, Татьяна! К сожалению, некоторые скрипты со временем перестают работать, как это произошло с картой сайта. Перед каждым изменением в HTML-коде обязательно делайте резервную копию шаблона, чтобы потом восстановить.

      Удалить
  14. это не нумерация СТРАНИЦ, это пагинация СПИСКОВ страниц, что есть две большие разницы

    ОтветитьУдалить
    Ответы
    1. Может, расскажете подробнее о разнице?.. Будет полезно для всех.

      Удалить
  15. Не работает... печально.. пару дней назад пробовал - работало, а сейчас что только не перепробовал - не появляется и всё!

    ОтветитьУдалить
  16. У меня получилось вроде, но что то слова Evgenya Panferova меня насторожили ((( Печально будет если пропадет скрипт. А так, вот что у меня получилось http://img.sc/img/209b8d147d1569fc190d00abfc5c9c5e.png, клево смотрится )))

    ОтветитьУдалить
  17. Спасибо огромное! работает

    ОтветитьУдалить
  18. все получилось спасибо большое!

    ОтветитьУдалить
  19. Анонимный15.07.2014, 2:57

    УРА ПОЛУЧИЛОСЬ!!!!!

    ОтветитьУдалить
  20. Дайте -ка я Вас расцелую !!!! :-*

    ОтветитьУдалить
  21. Анонимный11.01.2015, 22:05

    На вкладках не работает. Когда нажимаешь на ярлык то нумерации внизу нет, а когда возвращаешься на главную, снова появляется. Как исправить, чтобы и на ярлыках (вкладках) все работало?

    Спасибо!

    ОтветитьУдалить
  22. Здравствуйте! Если под вкладками вы имеете ввиду статичные страницы, то про них я писала здесь http://samasajt.blogspot.ru/2014/12/na-statichnyh-stranitcah-blogger-neskolko-soobshenij.html Нумерация на них и не нужна. На странице с результатом поиска по ярлыку также не будет работать нумерация, т.к. показываются сразу все сообщения по этому ярлыку.

    ОтветитьУдалить
  23. А слово страниц как сделать нужного цвета, подскажите пожалуйста? А то оно с цифрой в скобочке так серыми и осталось.

    ОтветитьУдалить
  24. Мария! Супер! Все работает!!!Я прям себя героем чувствую.))))),что благодаря вам столько всего полезного узнала!!! Желаю вам всего наилучшего!. Взяла ваш сайт в закладки..)

    ОтветитьУдалить
  25. Отличный скрипт, спасибо за статью.

    ОтветитьУдалить
  26. Этот комментарий был удален автором.

    ОтветитьУдалить
  27. Спасибо, Мария, у меня получилось! А возможно еще сделать окошко в котором читатель сам напишет номер нужной страницы?

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, Наталья. Пока я такого скрипта не видела.

      Удалить
  28. Спасибо вам большое! У меня все получилось! [ http://akemi-womenssecrets.blogspot.ru/ ]

    ОтветитьУдалить
  29. Спасибо большущее за Ваш труд и щедрость.

    ОтветитьУдалить
  30. А у меня только до 5 марта 2015, остального нет...

    ОтветитьУдалить
  31. Не получается, никак. Хоть с этого блога копирую, хоть с источника. Шаблон стандартный, никаких изменений не делалось. Иконка настроек появляется внизу, а номеров страниц нет. Стандартные "главная", "предыдущие" остаются на месте. Может их как-то сначала надо убрать? Подскажите, пожалуйста.

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Нет, я не убирала стандартные страницы. У Вас много сообщений в блоге?

      Удалить
  32. Как сделать так, чтобы этот скрипт не показывался на страницах сообщений и статичных страницах?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Алексей. Простите, что долго не отвечала, но наступила очень "горячая" пора на работе... К сожалению, не пишу сама скрипты, поэтому помочь не могу :( Возможно, Вам сможет помочь автор скрипта.

      Удалить
  33. Спасибо огромное, у меня получилось , ваш блог в закладки ))

    ОтветитьУдалить
  34. Этот комментарий был удален автором.

    ОтветитьУдалить
  35. Почему то у меня нет гаджета Сообщения в стандартных. Может нужно его откуда то загрузить?

    ОтветитьУдалить
    Ответы
    1. Здравствуйте. Гаджет "сообщение" есть по умолчанию в каждом блоге. Смотрите в настройках блога пункт "Дизайн".

      Удалить
    2. Я уже там все гаджеты просмотрела не по разу, не нашла.

      Удалить
    3. Напишите мне ВКонтакте https://vk.com/b.marija, я Вам скриншот пришлю.

      Удалить
  36. добрый день! огромное спасибо за код!! Все работает, но есть один вопрос. Нумерация получилась прямо на точечках внизу блога ( не знаю как это объяснить, стандартная линия из серых точек в шаблоне). Можно эту линию как-то убрать или подвинуть номера страничек? Спасибо! ссылка на блог: http://www.littlewonderland.ru/

    ОтветитьУдалить
  37. Ответы
    1. Возможно, конфликт с шаблоном.

      Удалить
  38. Добрый день!
    Подскажите пожалуйста, можно ли сделать так, чтобы нумерация отображалась так же на странице ярлыков. Даже идеально, чтобы только на странице ярлыков:) Спасибо!

    ОтветитьУдалить
  39. Анонимный19.12.2016, 15:07

    Ах, какая умница автор!

    ОтветитьУдалить
  40. супер, благодарю! все получилось :-)

    ОтветитьУдалить
  41. Спасибо, зайшла ничего не меняла и все работает

    ОтветитьУдалить
  42. Спасибо!Наконец -то я нашел реально работающий код!!

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

Загляните и на другие страницы ^