8.02.2009

Paginator для blogger

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

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


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

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





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






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

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

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

]]></b:skin>


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


.showpageArea a {
margin:0.7px;
color:#000;
text-decoration:none;
}
.showpageNum a {
background:url(http://lh6.ggpht.com/_jPpj2KMrgx4/SnSCcNvB3yI/AAAAAAAAAoE/-G_kOBEUv_E/page-navigation%20%28%D0%BA%D0%BE%D0%BF%D0%B8%D1%8F%29.jpg) ;

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

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

background:url(http://lh5.ggpht.com/_jPpj2KMrgx4/SnSCcBuoUgI/AAAAAAAAAoA/IUR3CAeUq64/page-navigation.jpg);

padding:8px 24px 14px 14px;

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

background:transparent url(http://lh5.ggpht.com/_jPpj2KMrgx4/SnSCcBuoUgI/AAAAAAAAAoA/IUR3CAeUq64/page-navigation.jpg) 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(http://lh5.ggpht.com/_jPpj2KMrgx4/SnSCcXn3trI/AAAAAAAAAoI/DI3xJlgLNkE/page-navigation%20%28%D0%B4%D1%80%D1%83%D0%B3%D0%B0%D1%8F%20%D0%BA%D0%BE%D0%BF%D0%B8%D1%8F%29.jpg);
font-size:14px;
padding:10px 71px 10px 7px;
}



.showpage-next{
background:url(http://lh5.ggpht.com/_jPpj2KMrgx4/SnSCcXn3trI/AAAAAAAAAoI/DI3xJlgLNkE/page-navigation%20%28%D0%B4%D1%80%D1%83%D0%B3%D0%B0%D1%8F%20%D0%BA%D0%BE%D0%BF%D0%B8%D1%8F%29.jpg);
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 этим делом. Заходи, оцени. А позже у меня к тебе вопросы будут, по двум-трем твоим статьям, я кое-что делал, но не получилось. Но об этом не сейчас.

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

Русик (младший) комментирует...

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

Русик (младший) комментирует...

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

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

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

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