Как изменить навигацию в блоге.

навигация по блогу
И снова здравствуйте! Мои друзья, читатели и гости блога. Как изменить навигацию в блоге. А именно, сделать её нумерованной или заменить надпись следующие и предыдущие сообщения на названия постов. Об этом сегодняшняя шпаргалка.



Стилей навигации достаточно много. Не всем по душе то, что предлагают нам разработчики Блоггер в стандартных шаблонах. И меня очень удивило, что нет в моём блоге ни одного поста на эту тему. Поэтому поделюсь своими вариантами. Для начинающих блоггеров это достаточно простое решение. Вам придётся просто скопировать код и установить его в гаджет HTML/JavaScript. Затем переместить этот гаджет во вкладке дизайн под сообщения блога. Всего 2 шага.



Первый вариант нумерованной навигации. В работе его  можно увидеть на этом блоге.
навигация
Код достаточно большой, но пусть вас это не пугает. Скопируйте его сначала в блокнот или черновик.

<style type="text/css">a.showpageNum { background:transparent url('http://i1133.photobucket.com/albums/m596/abu-farhan/gbtn-bg.png') repeat-x;
  border:1px solid #97a7af;
  margin:0px 1px 0 1px;padding:3px 8px;
  text-decoration:none;
  color:#333;line-height:14px;cursor:pointer;white-space:nowrap;
  -webkit-border-radius:3px;-moz-border-radius:3px;
}
a.showpageNum:hover {
  border: 1px solid #cccccc;
  background: #f6edd9;
}
.showpagePoint {
  color: #fff;
  text-shadow: 0 1px 2px #333;
  padding: 0px 5px;
  margin: 0px 2px;
  border: 1px solid #cccccc;
  background: #666;
}
.showpageOf {
  margin-right: 8px;
  text-shadow: 1px 1px 1px #fff;
}</style>
<script style='text/javascript'>
var postperpage=6;
var numshowpage=50;
var upPageWord="◄ Назад";
var downPageWord="Вперед ►";
var home_page="/";
var urlactivepage=location.href;
</script><script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
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]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('4 H;4 l;4 k;4 r;15();D 16(a){4 b=\'\';I=J(M/2);3(I==M-I){M=I*2+1}B=k-I;3(B<1)B=1;h=J(a/m)+1;3(h-1==a/m)h=h-1;E=B+M-1;3(E>h)E=h;b+="<N 5=\'1o\'>Страница "+k+\' из \'+h+"</N>";4 c=J(k)-1;3(k>1){3(k==2){3(l=="s"){b+=\'<a 6="\'+C+\'" 5="i">\'+O+\'</a>\'}7{b+=\'<a 6="/u/v/\'+r+\'?&9-n=\'+m+\'" 5="i">\'+O+\'</a>\'}}7{3(l=="s"){b+=\'<a 6="#" x="K(\'+c+\');y z" 5="i">\'+O+\'</a>\'}7{b+=\'<a 6="#" x="L(\'+c+\');y z" 5="i">\'+O+\'</a>\'}}}3(B>1){3(l=="s"){b+=\'<a 6="\'+C+\'" 5="i">1</a>\'}7{b+=\'<a 6="/u/v/\'+r+\'?&9-n=\'+m+\'" 5="i">1</a>\'}}3(B>2){b+=\' ... \'}17(4 d=B;d<=E;d++){3(k==d){b+=\'<N 5="1p">\'+d+\'</N>\'}7 3(d==1){3(l=="s"){b+=\'<a 6="\'+C+\'" 5="i">1</a>\'}7{b+=\'<a 6="/u/v/\'+r+\'?&9-n=\'+m+\'" 5="i">1</a>\'}}7{3(l=="s"){b+=\'<a 6="#" x="K(\'+d+\');y z" 5="i">\'+d+\'</a>\'}7{b+=\'<a 6="#" x="L(\'+d+\');y z" 5="i">\'+d+\'</a>\'}}}3(E<h-1){b+=\'...\'}3(E<h){3(l=="s"){b+=\'<a 6="#" x="K(\'+h+\');y z" 5="i">\'+h+\'</a>\'}7{b+=\'<a 6="#" x="L(\'+h+\');y z" 5="i">\'+h+\'</a>\'}}4 e=J(k)+1;3(k<h){3(l=="s"){b+=\'<a 6="#" x="K(\'+e+\');y z" 5="i">\'+18+\'</a>\'}7{b+=\'<a 6="#" x="L(\'+e+\');y z" 5="i">\'+18+\'</a>\'}}b+=\'\';4 f=A.1q("1r");4 g=A.1s("1t-1u");17(4 p=0;p<f.P;p++){f[p].1a=b}3(f&&f.P>0){b=\'\'}3(g){g.1a=b}}D 11(a){4 b=a.1b;4 c=J(b.1v$1w.$t,10);16(c)}D 15(){4 a=w;3(a.j("/u/v/")!=-1){3(a.j("?Q-9")!=-1){r=a.F(a.j("/u/v/")+14,a.j("?Q-9"))}7{r=a.F(a.j("/u/v/")+14,a.j("?&9"))}}3(a.j("?q=")==-1&&a.j(".1x")==-1){3(a.j("/u/v/")==-1){l="s";3(w.j("#G=")!=-1){k=w.F(w.j("#G=")+8,w.P)}7{k=1}A.1c("<o R=\\""+C+"S/T/U?9-n=1&V=W-X-o&Y=11\\"><\\/o>")}7{l="v";3(a.j("&9-n=")==-1){m=1y}3(w.j("#G=")!=-1){k=w.F(w.j("#G=")+8,w.P)}7{k=1}A.1c(\'<o R="\'+C+\'S/T/U/-/\'+r+\'?V=W-X-o&Y=11&9-n=1" ><\\/o>\')}}}D K(a){Z=(a-1)*m;H=a;4 b=A.1d(\'1e\')[0];4 c=A.1f(\'o\');c.1g=\'1h/1i\';c.1j("R",C+"S/T/U?1k-1l="+Z+"&9-n=1&V=W-X-o&Y=12");b.1m(c)}D L(a){Z=(a-1)*m;H=a;4 b=A.1d(\'1e\')[0];4 c=A.1f(\'o\');c.1g=\'1h/1i\';c.1j("R",C+"S/T/U/-/"+r+"?1k-1l="+Z+"&9-n=1&V=W-X-o&Y=12");b.1m(c)}D 12(a){13=a.1b.1z[0];4 b=13.1n.$t.F(0,19)+13.1n.$t.F(1A,1B);4 c=1C(b);3(l=="s"){4 d="/u?Q-9="+c+"&9-n="+m+"#G="+H}7{4 d="/u/v/"+r+"?Q-9="+c+"&9-n="+m+"#G="+H}1D.6=d}',62,102,'|||if|var|class|href|else||max||||||||maksimal|showpageNum|indexOf|nomerhal|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|span|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|showpagePoint|getElementsByName|pageArea|getElementById|blog|pager|openSearch|totalResults|html|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>

В участке кода, который выделен синим цветом можно внести свои изменения. Значение var postperpage=6 должно соответствовать количеству постов, которые вы задали в настройках блога. Вместо назад\вперёд пишите при необходимости своё-влево\вправо, туды\сюды, что придёт на ум. Да и цветовое решение можно подобрать своё. 

И второй вариант навигации. Наглядный пример здесь. Вместо предыдущие сообщения и следующие будут отображаться ссылки с названиями постов.


Код. Должна обратить ваше внимание, что в нём синим цветом выделен скрипт библиотеки jQueru.Так что, если вы знаете, что он (скрипт) у вас уже установлен в шаблоне, этот участок в коде копировать уже не надо. На случай если сомневаетесь, рекомендую к прочтению эту статью.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Если вы остановили свой выбор на этом варианте -то ещё один маленький нюанс. Когда названия сообщений достаточно длинные, то выглядеть это будет не очень красиво. Код работает как на стандартных шаблонах, так и на сторонних. Он мне очень нравится. Но у меня некоторые заголовки постов есть очень длинные.

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


Ой, а что это там ниже? Ну надо же! Нажимаем!


оформите подписку на новые шпаргалки

Введите Ваш email


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

  1. Привет. Решила поменять навигацию, установила первый вариант. Но такой как у тебя на картинке не получился. Очень большой, черным шрифтом. Попробовала поменять размер и цвет, получилось как-то корявенько. Хотелось бы как у тебя - аккуратненький, серенький.

    ОтветитьУдалить
    Ответы
    1. Ну мне надо видеть, что ты поменяла в стилях CSS. Посмотрела. так вроде и всё нормально. Строка в навигации =Страница 1 из 86- так выглядит потому что ты меняла стили в названии блога. С тенью и того же размера. В коде установлен стиль text-decoration:none;(по умолчанию)У меня на старом шаблоне выглядело так же. имею ввиду размер ячеек.

      Удалить
    2. Вот я и пыталась понять откуда тень.) А что можно вставить вместо none, чтобы был везде одинаковый стиль?

      Удалить
  2. Попробуй убери вообще эту строку или почитай другие варианты в этом учебнике http://htmlbook.ru/css/text-decoration

    ОтветитьУдалить
  3. Здравствуйте, Виктория! Где-то читал, что постраничная навигация может в каком-то плане навредить блогу. Сегодня весь вечер искал эту статью, но, к сожалению, так и не нашел. Что Вы можете сказать об этом? Вообще, я сомневаюсь, что действительно будут какие-то изменения в худшую сторону, но все же хочется услышать Ваше мнение. Заранее спасибо.

    ОтветитьУдалить
    Ответы
    1. Привет, Олег. Я читала об этом когда-то но речь шла о блогах на WordPress. Конечно всё что мы лишнее ставим в той или иной степени влияет. Каждый новый гаджет.Постраничные навигации для Blogger строится на информации, из фида блога А так она прекрасно работает и не сильно увеличивает байты . А как удобно с другой стороны.

      Удалить
  4. Вы меня убедили) Спасибо за разъяснение. На днях и себе установлю постраничную навигацию.

    ОтветитьУдалить

Пользовательский поиск