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

В отличии от других методов, данная постраничная навигация для Blogger прекрасно работает и не сильно увеличивает байты блога. Вид определяется только вашим воображением и знанием CSS.

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

Единственное ограничение: ширина сообщения, которую впрочем можно растянуть. Для создания постраничной навигации включаем в блог JavaScript на вкладке "Дизайн"-"Изменить HTML".

Добавляем стили CSS постраничной навигации.

Не устанавливая флажка "Расширить шаблоны виджета" и используя для поиска сочетание клавиш Ctrl+F, определяем стили CSS, а именно, перед
]]></b:skin>

добавляем код:

.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }

Здесь советую поэкспериментировать с такими параметрами, как цвет (значение после #).

Включаем JavaScript для реализации постраничной навигации.

Вставляем JavaScript. До элемента

</body>

указываем:

<b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=10;
var upPageWord ='?';
var downPageWord ='?';
</script>
<script type="text/javascript">
//<!
[CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c][/c]
||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k
[c][/c]
)p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k
[c][/c]
);return p}('5 I;5 m;5 k;5 s;15();E 16(a){5 b=\'\';J=K(N/2);4(J==N-J){N=J*2+1}C=k-J;4(C<1)C=1;i=K(a/n)+1;4(i-1==a/n)i=i-1;F=C+N-1;4(F>i)F=i;b+="<3 6=\'1o\'>Страница "+k+\' из \'+i+"</3>";5 c=K(k)-1;4(k>1){4(k==2){4(m=="u"){b+=\'<3 6="1p"><a 7="\'+D+\'">\'+O+\'</a></3>\'}9{b+=\'<3 6="l"><a 7="/v/w/\'+s+\'?&h-o=\'+n+\'">\'+O+\'</a></3>\'}}9{4(m=="u"){b+=\'<3 6="l"><a 7="#" y="L(\'+c+\');z A">\'+O+\'</a></3>\'}9{b+=\'<3 6="l"><a 7="#" y="M(\'+c+\');z A">\'+O+\'</a></3>\'}}}4(C>1){4(m=="u"){b+=\'<3 6="l"><a 7="\'+D+\'">1</a></3>\'}9{b+=\'<3 6="l"><a 7="/v/w/\'+s+\'?&h-o=\'+n+\'">1</a></3>\'}}4(C>2){b+=\' ... \'}17(5 d=C;d<=F;d++){4(k==d){b+=\'<3 6="1q">\'+d+\'</3>\'}9 4(d==1){4(m=="u"){b+=\'<3 6="l"><a 7="\'+D+\'">1</a></3>\'}9{b+=\'<3 6="l"><a 7="/v/w/\'+s+\'?&h-o=\'+n+\'">1</a></3>\'}}9{4(m=="u"){b+=\'<3 6="l"><a 7="#" y="L(\'+d+\');z A">\'+d+\'</a></3>\'}9{b+=\'<3 6="l"><a 7="#" y="M(\'+d+\');z A">\'+d+\'</a></3>\'}}}4(F<i-1){b+=\'...\'}4(F<i){4(m=="u"){b+=\'<3 6="l"><a 7="#" y="L(\'+i+\');z A">\'+i+\'</a></3>\'}9{b+=\'<3 6="l"><a 7="#" y="M(\'+i+\');z A">\'+i+\'</a></3>\'}}5 e=K(k)+1;4(k<i){4(m=="u"){b+=\'<3 6="l"><a 7="#" y="L(\'+e+\');z A">\'+18+\'</a></3>\'}9{b+=\'<3 6="l"><a 7="#" y="M(\'+e+\');z A">\'+18+\'</a></3>\'}}b+=\'\';5 f=B.1r("1s");5 g=B.1t("1u-1v");17(5 p=0;p<f.P;p++){f[p].1a=b}4(f&&f.P>0){b=\'\'}4(g){g.1a=b}}E 11(a){5 b=a.1b;5 c=K(b.1w$1x.$t,10);16(c)}E 15(){5 a=x;4(a.j("/v/w/")!=-1){4(a.j("?Q-h")!=-1){s=a.G(a.j("/v/w/")+14,a.j("?Q-h"))}9{s=a.G(a.j("/v/w/")+14,a.j("?&h"))}}4(a.j("?q=")==-1&&a.j(".1y")==-1){4(a.j("/v/w/")==-1){m="u";4(x.j("#H=")!=-1){k=x.G(x.j("#H=")+8,x.P)}9{k=1}B.1c("<r R=\\""+D+"S/T/U?h-o=1&V=W-X-r&Y=11\\"><\\/r>")}9{m="w";4(a.j("&h-o=")==-1){n=1z}4(x.j("#H=")!=-1){k=x.G(x.j("#H=")+8,x.P)}9{k=1}B.1c(\'<r R="\'+D+\'S/T/U/-/\'+s+\'?V=W-X-r&Y=11&h-o=1" ><\\/r>\')}}}E L(a){Z=(a-1)*n;I=a;5 b=B.1d(\'1e\')[0];5 c=B.1f(\'r\');c.1g=\'1h/1i\';c.1j("R",D+"S/T/U?1k-1l="+Z+"&h-o=1&V=W-X-r&Y=12");b.1m(c)}E M(a){Z=(a-1)*n;I=a;5 b=B.1d(\'1e\')[0];5 c=B.1f(\'r\');c.1g=\'1h/1i\';c.1j("R",D+"S/T/U/-/"+s+"?1k-1l="+Z+"&h-o=1&V=W-X-r&Y=12");b.1m(c)}E 12(a){13=a.1b.1A[0];5 b=13.1n.$t.G(0,19)+13.1n.$t.G(1B,1C);5 c=1D(b);4(m=="u"){5 d="/v?Q-h="+c+"&h-o="+n+"#H="+I}9{5 d="/v/w/"+s+"?Q-h="+c+"&h-o="+n+"#H="+I}1E.7=d}',62,103,'|||span|if|var|class|href||else||||||||max|maksimal|indexOf|nomerhal|showpageNum|jenis|postperpage|results|||script|lblname1||page|search|label|urlactivepage|onclick|return|false|document|mulai|home_page|function|akhir|substring|PageNo|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|updated|src|feeds|posts|summary|alt|json|in|callback|jsonstart||hitungtotaldata|finddatepost|post||halamanblogger|loophalaman|for|downPageWord||innerHTML|feed|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|published|showpageOf|showpage|showpagePoint|getElementsByName|pageArea|getElementById|blog|pager|openSearch|totalResults|html|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{})) //]]> </script></b:if></b:if>

В коде можно изменить:

  1. количество сообщений на странице (var postperpage),
  2. количество цифр в постраничной навигации (var numshowpage).
Добавить JavaScript постраничной навигации в Blogger.
Добавить JavaScript постраничной навигации для Blogger.

Настройка количества ярлыков.

Только для тех, кто использует на блоге ярлыки! По умолчанию выводится 20 сообщений для ярлыка, что не соответствует данным постраничной навигации. Устанавливаем галочку "Расширить шаблоны виджета" и заменяем все вхождения фрагмента (их, как правило, два или три)
'data:label.url'

на

'data:label.url + &quot;?&amp;max-results=7&quot;'

Важно! Здесь max-results равен значению var postperpage.

Определяем количество сообщений на Главной странице.

В "Дизайн"-"Элементы страницы", чтобы код навигации корректно отображался, выбираем "Сообщение блога"-галочка "Изменить"-"Количество сообщений на Главной странице" аналогично значению var postperpage.
Понравилось? =) Поделись с друзьями:

Обсудить