Постраничная навигация для blogger


Данная версия более не является актуальной, смотрите, как установить новую версию постраничной навигации

Продолжим изучать работу шаблонов blogger. И в сегодняшней теме мы расскажем, как добавить на свой сайт - блог постраничную навигацию.
В стандартном виде постраничная навигация блогспота предлагает не очень изящный способ передвижения по сайту. Так что сегодня поговорим о том, как заменить Следующее и Предыдущее и пронумеровать страницы нашего сайта. Кстати не спешите удалять Следующее и Предыдущее по скольку без этого кода постраничная навигация не будет работать.

Итак есть неплохой сервис который предложит вам несколько вариантов постраничной навигации. Переходим по ссылке:
http://24work.blogspot.com/2012/01/numbered-page-navigation-for-blogger.html
и выбираем понравившуюся навигацию, после выбора кликаем generate -> add to blogger после откроется страница кликаем по редактировать содержимое (если там нет кода возвращаемся на сайт и вновь генерируем понравившуюся навигацию) этот код можно вставить как гаджет в HTML\Javascript это простой вариант, но не все так просто, как бы нам того хотелось, может возникнуть ситуация когда допустим мы со второй страницы переходим на третью и ходим вернутся обратно на вторую путем backspace или стрелкой нашего браузера вернутся на предыдущею страницу, а нас при этом перекидывает на главную страницу, в таком случае копируем код:

 

<script type="text/javascript">

var home_page_url = location.href;


var pageCount=10;
var displayPageNum=3;
var upPageWord =&#39;Назад&#39;;
var downPageWord =&#39;Вперед&#39;;


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= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;



htmlMap[htmlMap.length]=&#39;/&#39;;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

 
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);
 var title = post.title.$t;
   if(thisUrl.indexOf(timestamp)!=-1 ){
     thisNum = postNum;
   }

   postNum++;
   htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};


for(var p =0;p&lt; banyaknomer;p++){
 if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
   if(thisNum==2){
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }

   fFlag++;
  }

  if(p==(thisNum-1)){
   html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
  }else{
   if(p==0){
     html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

   }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
   downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   eFlag++;
  }
 }
}

if(thisNum&gt;1){
 html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
 html += downPageHtml;
}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;


var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
 html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
 pageArea[p].innerHTML = html;
}


if(pageArea&amp;&amp;pageArea.length&gt;0){
 html =&#39;&#39;;
}

if(blogPager){
 blogPager.innerHTML = html;
}


}


function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= &#39;&#39;;
var upPageHtml =&#39;&#39;;
var downPageHtml =&#39;&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
var thisUrl = home_page_url;

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
 timestamp = encodeURIComponent(timestamp1);


 var title = post.title.$t;

   if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
   }

   if(title!=&#39;&#39;) postNum++;
   htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;
   
 itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
 var banyaknomer = htmlMap.length -1 ;
 postNum=postNum-1;
};

for(var p =0;p&lt; banyaknomer;p++){
 if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
   if(thisNum==2){
    upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }

   fFlag++;
  }

  if(p==(thisNum-1)){
   html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
  }else{
   if(p==0){
    html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
   }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
   downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
   eFlag++;
  }
 }
}

if(thisNum&gt;1){
 if(!isLablePage){
  html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
 }else{
  html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
 }
}

html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

if(thisNum&lt;(postNum-1)){
 html += downPageHtml;
}

if(postNum==1) postNum++;
html += &#39;&lt;/div&gt;&#39;;

var pageArea = document.getElementsByName(&quot;pageArea&quot;);
var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
 html =&#39;&#39;;
}

for(var p =0;p&lt; pageArea.length;p++){
 pageArea[p].innerHTML = html;
}

if(pageArea&amp;&amp;pageArea.length&gt;0){
 html =&#39;&#39;;
}

if(blogPager){
 blogPager.innerHTML = html;
}


}


</script>

<script type="text/javascript">

  var thisUrl = home_page_url;
 if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
   var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
  }else{
   var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
  }
 }

 var home_page = &quot;/&quot;;
 if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){
  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){  
   document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;)
  }else{document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/full/-/&#39;+lblname1+&#39;?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;)
  }
 }
</script>


После идем в Шаблон -> Изменить Html жмем Ctrl+F в открывшемся окошке пишем </body> и жмем enter  появится такой код:
</body>

перед ним и вставляем скопированный код и сохраняем шаблон.

Что еще вам следует знать. Вот начало нашего кода только что вставленного в HTML здесь нас интересует код выделенный красным. Ниже я описал, что он обозначает.

var pageCount=10 - отображает количество сообщений на каждой из страниц у нас стоит 10 значит на каждой странице будет отображаться по 10 сообщений.
var displayPageNum=3 - отображает количество страниц

Кроме того количество сообщений на главной странице и дальше по навигации так же задается в Дизайне, там нужно выбрать такое же количество постов, как и в коде var pageCount. Если количество будет отличаться то при переходе с главной на вторую страницу постраничной навигации несколько постов будет съедаться. Так что заходим в Дизайн находим окошко Сообщения блога кликаем изменить и меняем Количество сообщений на главной странице. Так же там можно убрать автора время, дату поста и т.д.

Итак постраничную навигацию освоили, теперь когда мы ходим по сообщениям сайта, то видим, что Следующее Главная и Предыдущее еще остались. Я заменил их на картинки стрелок влево и вправо.

Итак  идем в Шаблон - Изменить HTML - жмем Ctrl+F в окошке пишем для Следующее этот код  <data:newerPageTitle/> и меняем его на <img alt='Предыдущее' height='60' src='http://firepic.org/images/2013-10/20/o4tvypfce1u0.jpg' width='60'/>

 Для Предыдущее ищем этот код  <data:olderPageTitle/> и меняем на <img alt='Предыдущее' height='60' src='http://firepic.org/images/2013-10/20/ckauik9mtqk9.jpg' width='60'/>

И для Главная  <data:homeMsg/> меняем на  <img src="http://rghost.ru/49938870/image.png" alt="Главная страница" width="90" height="60"/>

Можете вставлять свои ссылки на картинки.

На этом все, удачи.



Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Постраничная навигация для blogger
4/ 5
Oleh