Нумерация страниц блога

суббота, 20 марта 2010 г.

Доброго времени суток. В этой статье речь пойдет о том как добавить нумерацию страниц блога, вот такого вида:
нумерация страниц блога
Преимущество данного гаджета заключается в том, что вашему читателю можно не просто клацать на “предыдущие” , а нажимать на определенный номер страницы блога.

Перед тем как начать устанавливать этот гаджет сохраните свой шаблон на всякий случай и можно приступать.
1.Зайдите в настройки блога, а именно Изменить Html и в шаблоне найдите следующий тэг:

]]></b:skin>
И сразу перед ним вставьте следующий скрипт:
.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
2. Добавляем Java скрипт. Найдите следующий скрипт:
<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
</b:section>
И после тэга  </b:section> вставьте следующий скрипт:
<script type='text/javascript'>
var home_page_url = location.href;
var pageCount=10;
  var displayPageNum=6;
  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+'&amp;max-results='+pageCount;
  }
  }
  itemCount++;
  }
  for(var p =0;p&lt; htmlMap.length;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 = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }
  fFlag++;
  }
  if(p==(thisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  if(p==0){
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;';
}else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }
  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }
  if(thisNum&gt;1){
  html = ''+upPageHtml+' '+html +' ';
  }
  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;
  if(thisNum&lt;(postNum-1)){
  html += downPageHtml;
  }
  if(postNum==1) postNum++;
  html += '&lt;/div&gt;';
var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);
if(postNum &lt;= 2){
  html ='';
  }
for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }
if(pageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }
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= '';
  var upPageHtml ='';
  var downPageHtml ='';
var labelHtml = '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/'+thisLable+'?&amp;max-results='+pageCount+'&quot;&gt;';
  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+'&amp;max-results='+pageCount;
  }
  }
  itemCount++;
  }
  for(var p =0;p&lt; htmlMap.length;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 +'&lt;/a&gt;&lt;/span&gt;';
  }else{
  upPageHtml = '&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ upPageWord +'&lt;/a&gt;&lt;/span&gt;';
  }
  fFlag++;
  }
  if(p==(thisNum-1)){
  html += '&lt;span class=&quot;showpagePoint&quot;&gt;'+thisNum+'&lt;/span&gt;';
  }else{
  if(p==0){
  html = labelHtml+'1&lt;/a&gt;&lt;/span&gt;';
  }else{
  html += '&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ (p+1) +'&lt;/a&gt;&lt;/span&gt;';
  }
  }
  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = '&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;'+htmlMap[p]+'&quot;&gt;'+ downPageWord +'&lt;/a&gt;&lt;/span&gt;';
  eFlag++;
  }
  }
  }
  if(thisNum&gt;1){
  if(!isLablePage){
  html = ''+upPageHtml+' '+html +' ';
  }else{
  html = ''+upPageHtml+' '+html +' ';
  }
  }
  html = '&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages ('+(postNum-1)+')&lt;/span&gt;'+html;
  if(thisNum&lt;(postNum-1)){
  html += downPageHtml;
  }
  if(postNum==1) postNum++;
  html += '&lt;/div&gt;';
  var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);
if(postNum &lt;= 2){
  html ='';
  }
for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }
if(pageArea&amp;&amp;pageArea.length&gt;0){
  html ='';
  }
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('&lt;script src=&quot;'+home_page+'feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }else{document.write('&lt;script src=&quot;'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;')
  }
  }
  </script>
В этом скрипте вы можете вносить изменения в следующие строки:
-    var pageCount=10; (Изменяет количество статей на одной странице. Число должно совпадать с числом в настройках блоггера, которые вы можете найти в Настройках/форматирование)
- var displayPageNum=6; (Количество номеров страниц отображаемых на странице)
-  var upPageWord ='Previous'; (переименуйте например на “предыдущие”  либо другое нравящееся вам слово
-  var downPageWord ='Next'; (переименуйте на “новые статьи”, “следующие”…)
3. Для того чтобы гаджет работал корректно необходимо зайти в настройки Дизайн/Элементы страницы и в любом месте добавить гаджет “Ярлыки”.
Затем зайти в настройки HTML и найти следующий код:
<a expr:dir=’data:blog.languageDirection’ expr:href=’data:label.url’><data:label.name/></a>
и замените его следующим скриптом:
<script type='text/javascript'>
var lblname = &quot;<data:label.name/>&quot;;
lblname2 = encodeURIComponent(lblname);
var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=10&#39;;
document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script>
Нажмите сохранить и все готово.

Похожие статьи

26 комментариев:

Tamao комментирует...

Хорошая штука. Надо будет попробовать поставить. А то и впрямь неудобно кликать по "предыдущим". И спасибо за статью про ошибки FeedBurner.

Ольга комментирует...

Не могу заменить на скрипт, получаю ошибки
или я не тот код нашла, беру, который вначале
А в приведённом в статье скрипте ничего не нужно менять под себя?

The Neighbour комментирует...

В скрипте на свое менять ничего не надо! В теле шаблона, второй (длинный скрипт) необходимо вставить после тэга </b:section> однако таких тэгов в теле шаблона может быть несколько, вам же необходимо его вставить в том месте где перед этим тэгом идет Тэг " Сообщения блога" , он выглядит примерно так: <b:widget id='Blog1' locked='true' title='СообÑ�ениÑ� блога' type='Blog'>

В статье приведен тэг Blog post вместо Сообщения блога, возможно поэтму вы не туда вставляли скрипт!!!

The Neighbour комментирует...

Вместо СообÑ�ениÑ� блога , я хотел там написать " Сообщения блога"

The Neighbour комментирует...

И еще, после того как вставили второй скрипт, сохраняйте шаблон!!!

The Neighbour комментирует...

И очень важно правильно выполнить замену скрипта описанного в конце статьи. Не забудьте добавить гаджет ярлики перед этим. Ищите скрипт для замены по тэгу :
<a expr:dir

Так как приведенный в статье тэг может встречаться немного в другом расположении.
Ну и еще может быть так, что вы скопировали скрипт которым необходимо заменить :
<a expr:dir=�data:blog.languageDirection� expr:href=�data:label.url�><data:label.name/></a>
не полностью, так как в статье выделены кавычками только две строчки по ошибке, а надо брать все ,вот в таком виде:
<script type='text/javascript'>
var lblname = &quot;<data:label.name/>&quot;;

lblname2 = encodeURIComponent(lblname);
var feedlink = &#39;/search/label/&#39; + lblname2+&#39;?&amp;max-results=10&#39;;
document.write(&#39;&lt;a href=&quot;&#39; + feedlink + &#39;&quot;&gt;&#39;+lblname+&#39;&lt;/a&gt;&#39;);
</script>

The Neighbour комментирует...

Так же можете скинуть название вашего шаблона, если в очередной раз не получится, и мы попробуем разобраться!=)

Ольга комментирует...

Здравствуйте, замену скрипта, который в конце статьи не произвела. код немного другой у меня.

но задуманное работает, возможно далее и будет некорректно, но пока 2 стр отображает.
спасибо за подробности.
шаблон:
Blogger Template Style
Name: Watermark
Designer: Josh Peterson
URL: www.noaesthetic.com

The Neighbour комментирует...

Главное что работает=)

Juice комментирует...

Ничего не понял((вот я добавил скрипт в html...
и у меня есть например страница в ней несколько статей и как мне их разделить чтоб они шли 1 страница 2 3 и т.д..

The Neighbour комментирует...

Делить будет автоматически! в зависимости от того сколько у вас в настройках установлено показывать статей на одной странице.
В этой строчке вы устанавливаете сколько статей должно отображаться на одной странице: var pageCount=10
Оно должно совпадать с количеством установленным в настройках блоггер, а именно в настройках/форматирование.

Casper комментирует...

у меня нету кода

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

Casper комментирует...

а как сделать номерацыю в ярлыках?у меня там все в кучу получается на 1 страницу

Анонимный комментирует...

Не работает

Tamara комментирует...

Основное сделала - шаблон сохранила - далее ...Ярлыки у меня уже есть в блоге - даже в двух местах. Значит новые мне делать не нужно?
Вообщем ищу в шаблоне скрипт


чтоб заменить - НО НЕ НАХОЖУ :( Может его и нету

Лагунов Сергей комментирует...

Опишите подробнее какие процедуры вы делаете и чего хотите добиться и я попробую решить ваши проблемы.

Jasmin-Olya комментирует...

Здравствуйте, возник вопрос по поводу последнего шага - замены скрипта. Не нахожу указанного вами текста. У меня есть вот такой - оно ли это?

http://1.bp.blogspot.com/-3lCxrn1aK-Y/TdxILrvMb8I/AAAAAAAAAiM/bw3T6YgM8sY/s1600/code.jpg

извините, что вставляю картинку - код не принимается в комментах почему-то

Пока не сделала эту часть, но странички работают. Еще хотелось бы цвета подогнать под свой дизайн, но это я, наверное, уже много хочу =)

Лагунов Сергей комментирует...

Дайте ссылку на блог ваш я гляну.

Jasmin-Olya комментирует...

http://jasminolya.blogspot.com/ методом тыка цвета попыталась подогнать )))

Boom комментирует...

у меня тоже самое, в конце ни как не могу найти скрипт.Но в отличии от других у меня ничего не получается.Помагите пожалуйста!

Sunny комментирует...

Доброго времени суток Лагунов Сергей. Ваш сайт оказался для меня очень полезным. Вот в который раз попробовал внести изменения в блог, правда у меня нет ещё блога я пока создал пробный чтобы на нём тренироваться и всё понять, с нумерацией страниц, всё вроде получилось кроме одного, у меня на странице должно быть только семь постов, не меньше, если их меньше, то тогда оно ничего не показывает пишет что ничего не найдено, а если семь, то всё нормально. Что мне делать? Вот собственно можете и посмотреть http://sunny-aktualno.blogspot.com/

Лагунов Сергей комментирует...

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

Sunny комментирует...

Ещё раз доброго времени суток Лагунов Сергей. Вы не поняли. Нумерация страниц не совсем корректно работает. Допустим, что у мне в блоге 15 статей, а на странице должно показывать семь, и соответственно должно быть три страницы. Когда переходишь на первые две страницы статьи показываются, а когда переходишь на третью то последней статьи нет, оно выдаёт что ничего не найдено, хотя на третей странице должна быть ещё одна статья. Что мне делать?

Алена Третьякова комментирует...

Здравствуйте, Сергей! Огромное спасибо за Ваш труд и помощь, Вы такой молодец!))
Нумерацию я сделала (правда, скрипт, который должен начинаться на <a expr:dir не заменила, т.к. в моем шаблоне он выглядит совсем по-другому, - но нумерация, к моему глубокому изумлению, появилась). Теперь вопросик - как поменять, так скажем, дизайн этой самой нумерации? Я имею в виду, шрифт, цвет, размер и прочее. Очень-очень надеюсь на Вашу помощь, заранее спасибо!

Ната Оливкова комментирует...

не могу тоже никак найти скрипт((

Алексей Т комментирует...

1352 раза пробовал не получилось
что делать?

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

Оставляйте ваши комментарии

 
 
 

Читать блог на другом языке

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified
 
Copyright ©Lagunof.com
Блога автора книги "Недвижимость: классическая, виртуальная, интеллектуальная" При перепечатке материалов с блога обратная ссылка обязательна
e4a11e6f00df223bf058f2795454739b