8.02.2009

Paginator для blogger

Теги: , , ,

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

Если вы хотите добавить этот хак, следуйте по инструкции:


В данном случае вы можете выбирать дизайн:

Перейти далее





Перейти далее






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

Перейдите в Настройки блога > Макет > Изменить HTML

Найдите строчку

]]></b:skin>


Перед ней вставьте стили:


  .showpageArea a {
margin:0.7px;
color:#000;
  text-decoration:none;
  }
  .showpageNum a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdC84RI0AtD16Lad2Wpm61PVBazzmbdKQl-rJ1ZQv6yZ-QPMwM4nngI24j3I9ybdnaXFFSgxlGDvIZKrPyAZNRtwqKTgTtyc5qipXyR7ibnblii4lxvEVaOnWNurAjvlG247ZAWzL1Qzg/) ;

padding:9px 23px 14px 14px;
  text-decoration:none;

  }
  .showpageNum a:hover {
color:#FFF !important;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaWOWJJsXExWTDRCX9LHYn86NwdkjFIzQEnNnpQBAjt5N85LpcEZ6-S5AiWq_GDwXquTyBncgywbL49h4fgjkvY1wg6cgSt04wUlvsMSnig6RxQg-I6VUR4VKs9oW1XmInAsz61QZ7_I/);

padding:8px 24px 14px 14px;

  background-color:#ccc;
  }
  .showpagePoint {
  color:#FFFFFF;
  text-decoration:none;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEaWOWJJsXExWTDRCX9LHYn86NwdkjFIzQEnNnpQBAjt5N85LpcEZ6-S5AiWq_GDwXquTyBncgywbL49h4fgjkvY1wg6cgSt04wUlvsMSnig6RxQg-I6VUR4VKs9oW1XmInAsz61QZ7_I/) repeat scroll 0% 0%;

padding:8px 24px 14px 14px;
  }
  .showpageOf {
display:none;
  text-decoration:none;
  padding:3px;
  margin: 0 3px 0 0;
  }
  .showpage a {
  text-decoration:none;

  padding:4px;
  }
  .showpage a:hover {
  text-decoration:none;
  }
  .showpageNum a:link,.showpage a:link {
  text-decoration:none;
  color:#333;
  }

.showpage{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1_4UgP3FZ2IgI-_k66wsaWAQml-dzsnsgMj4ULR16X5Jyjn6KIhOgoUXJu8pjgestN0CbgkRd8Kha1vUkeIR1kYjIThciKYROaPNSISsyjuF3ig4U7VsKvgTK0BgPKnhzbqCHpjssVw/);
font-size:14px;
padding:10px 71px 10px 7px;
}



.showpage-next{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif1_4UgP3FZ2IgI-_k66wsaWAQml-dzsnsgMj4ULR16X5Jyjn6KIhOgoUXJu8pjgestN0CbgkRd8Kha1vUkeIR1kYjIThciKYROaPNSISsyjuF3ig4U7VsKvgTK0BgPKnhzbqCHpjssVw/);
font-size:15px;
padding:10px 34px 10px 7px;

}
#blog-pager{
background:#FFFFFF none repeat scroll 0% 0%;
padding:1em;
text-align:center;

}


Теперь найдите строчку

<b:widget id='Blog1' locked='true' title='Сообщения
блога' type='Blog'/>


Сразу под ней вы увидите тег

</b:section>


Под ним вставьте код:



&lt;script type=&quot;text/javascript&quot;&gt;


function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

var isPage = thisUrl.indexOf(&quot;/search?updated&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 pageCount = 5;
var displayPageNum = 5;
var upPageWord = &#39;Предыдущие&#39;;
var downPageWord = &#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;;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=&#39;&#39;){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++)
{

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}
postNum++;
htmlMap[htmlMap.length] =
&#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

}

}//end if(post.category){





itemCount++;

}

}else{

if(title!=&#39;&#39;){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}

if(title!=&#39;&#39;) postNum++;

htmlMap[htmlMap.length] =&#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+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){

if(isLablePage){

upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;

}else{

upPageHtml = &#39;&lt;span class=&quot;showpage-next&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-next&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){

if(isLablePage){

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;/&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++;

}

}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

}//end for(var p =0;p&lt; htmlMap.length;p++){

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; Страниц (&#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;;





if(isPage || isFirstPage || isLablePage){

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;

}

}





}

&lt;/script&gt;





&lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
</div>



На этом всё!!!








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

Перейдите в Настройки блога > Макет > Изменить HTML

Найдите строчку

]]></b:skin>


Перед ней вставьте стили:



  .showpageArea a {
  text-decoration:underline;
  }
  .showpageNum a {
  text-decoration:none;
  border: 1px solid #ccc;
  margin:0 3px;
  padding:3px;
  }
  .showpageNum a:hover {
  border: 1px solid #ccc;
  background-color:#ccc;
  }
  .showpagePoint {
  color:#333;
  text-decoration:none;
  border: 1px solid #ccc;
  background: #ccc;
  margin:0 3px;
  padding:3px;
  }
  .showpageOf {
  text-decoration:none;
  padding:3px;
  margin: 0 3px 0 0;
  }
  .showpage a {
  text-decoration:none;
  border: 1px solid #ccc;
  padding:3px;
  }
  .showpage a:hover {
  text-decoration:none;
  }
  .showpageNum a:link,.showpage a:link {
  text-decoration:none;
  color:#333;
  }



Теперь найдите строчку

<b:widget id='Blog1' locked='true' title='Сообщения
блога' type='Blog'/>


Сразу под ней вы увидите тег

</b:section>


Под ним вставьте код:

&lt;script type=&quot;text/javascript&quot;&gt;



function showpageCount(json) {

var thisUrl = location.href;

var htmlMap = new Array();

var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;

var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;

var isPage = thisUrl.indexOf(&quot;/search?updated&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 pageCount = 5;

var displayPageNum = 5;

var upPageWord = &#39;Previous&#39;;

var downPageWord = &#39;Next&#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;;



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

var timestamp = post.published.$t.substr(0,10);

var title = post.title.$t;

if(isLablePage){

if(title!=&#39;&#39;){

if(post.category){

for(var c=0, post_category; post_category = post.category[c]; c++) {

if(encodeURIComponent(post_category.term)==thisLable){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



postNum++;

htmlMap[htmlMap.length] =
&#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;

}

}

}

}//end if(post.category){



itemCount++;

}



}else{

if(title!=&#39;&#39;){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

thisNum = postNum;

}



if(title!=&#39;&#39;) postNum++;

htmlMap[htmlMap.length] =
&#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+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){

if(isLablePage){

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;/&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){

if(isLablePage){

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;/&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++;

}

}//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){

}//end for(var p =0;p&lt; htmlMap.length;p++){



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;;



if(isPage || isFirstPage || isLablePage){

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;

}

}



}

&lt;/script&gt;



&lt;script
src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;;
type=&quot;text/javascript&quot;&gt;&lt;/script&gt;




На этом всё!!!




4 коммент:

Русик комментирует...

Привет, Вячеслав. Вот, баловался на выходных с 2-хколоночным правым оформлением блога, заразил ты меня :-D этим делом. Заходи, оцени. А позже у меня к тебе вопросы будут, по двум-трем твоим статьям, я кое-что делал, но не получилось. Но об этом не сейчас.

З.Ы. "Пагинатор" хорошая вещь, лучше чем просто две ссылки "Предыдущие" и "Следующие". Надо будет тоже попробовать.

3 августа 2009 г. в 04:02
Русик комментирует...

Как ты вернул навбар, Вячеслав

4 августа 2009 г. в 02:40
Русик комментирует...

Вопрос оп навбару снят, я разобрался.

4 августа 2009 г. в 03:00
BTemplate комментирует...

Привет, интересует вопрос, ты сам их программировал или нашел эту инфу в нете? Если нашел, то смущает отсутствие ссылок на автора. Я собираюсь в своем блоге "Помощь Blogger-y" продублировать скрипты этих пагинаторов. К стати, там есть другой пагинатор:)

4 февраля 2010 г. в 17:18

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

Подписаться на: Комментарии к сообщению (Atom)

Последние комментарии

  • Сергей Николаеску on rgb 16
    Огромное спасибо за информацию!... (Далее)

  • Николай on yahoo blogger
    Попробовал. Все бы хорошо, только вот, похоже, смайликов по указанным адресам нет уже.... (Далее)

  • Настя Солнечная (ТМ СКРАПБУРГ) on yahoo blogger
    Прикольно! Хочу попробовать) А встроенный чего-то там - это то, что окно для комментов всплывает?;-) Или что-то другое?;-)... (Далее)

  • Вячеслав on blog post
    Конечно помогу. Киньте xml свого шаблона на адрес эл.почты и представьтесь.slava_vvk@mail.ru... (Далее)

  • Hakob on blog post
    Спасибо большое за скрипт, но у меня тоже не в середине... можете помочь исправить ? Заранее спасибо :)... (Далее)

  • Anonymous on yahoo blogger
    не могу найти... (Далее)

  • Вячеслав on blog post
    А у вас такое встречалось?... (Далее)

  • tussauds on blog post
    Ну ты долго пропадал. Эта проблема уже возникала осенью где-то... Но ее уже решили. Это связано с Upgrade Блогспота. Новшества не всегда полезны и... (Далее)