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/AVvXsEj2xSt_DnBcDOECTzYy50vTwhyphenhypheng5m3ycMRu4T3oAsgSWb49eGYEdW01IJk4KAWO_PNmB6soB144DYbBnfbO3dQGeflclRj7Bjx7hQ0fc6NEpHtjBEI7NRMlreWRAxtqbW0EbF3-3Rs4sds/) ;

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

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

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifsTggmaL-gUDYPnVauci_jkzh00w0IBPQMnMuJLuZkggPVl9Pd8ncwCBPJqxWPMJHHawy3qsU_M6FokObqNBNnP2CeYN-mU9MeT54ZC-PVzgJ7dEEv0s3WhspLGE3LJbNK4QCjR1zsC0/);

padding:8px 24px 14px 14px;

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

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifsTggmaL-gUDYPnVauci_jkzh00w0IBPQMnMuJLuZkggPVl9Pd8ncwCBPJqxWPMJHHawy3qsU_M6FokObqNBNnP2CeYN-mU9MeT54ZC-PVzgJ7dEEv0s3WhspLGE3LJbNK4QCjR1zsC0/) 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/AVvXsEinUXclBmDLRSEF8Pwxicz10LWT0ulr5sOowH_kF9_Hz-kv5OBSf0mO49t1Ep_OVnctTtdbseOAcvGRCi1GBz5W_Nt4VuScjjKbmbcoSwqYJQ5E91RQ0fvl13L8Jx6BWyGoIbSaFkyP4Ls/);
font-size:14px;
padding:10px 71px 10px 7px;
}



.showpage-next{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinUXclBmDLRSEF8Pwxicz10LWT0ulr5sOowH_kF9_Hz-kv5OBSf0mO49t1Ep_OVnctTtdbseOAcvGRCi1GBz5W_Nt4VuScjjKbmbcoSwqYJQ5E91RQ0fvl13L8Jx6BWyGoIbSaFkyP4Ls/);
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 г. 4:02
Русик (младший) комментирует...
Как ты вернул навбар, Вячеслав
4 августа 2009 г. 2:40
Русик (младший) комментирует...
Вопрос оп навбару снят, я разобрался.
4 августа 2009 г. 3:00
BTemplate комментирует...
Привет, интересует вопрос, ты сам их программировал или нашел эту инфу в нете? Если нашел, то смущает отсутствие ссылок на автора. Я собираюсь в своем блоге "Помощь Blogger-y" продублировать скрипты этих пагинаторов. К стати, там есть другой пагинатор:)
4 февраля 2010 г. 17:18

____________________________________________________________________________________________________









____________________________________________________________________________________________________
Похожие по тематике статьи :
*
Темы :

0 коммент.:

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

Комментировать...

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