Поиск по блогу

понедельник, 6 февраля 2012 г.

Постраничная навигация в Blogger (Blogspot)

Как известно в шаблоне Blogger (Blogspot) навигация по страницам блога организована скупыми фразами "предыдущее", "следующее".

Хочется организовать по настоящему функциональное передвижение по страницам блога.

Делается это очень просто:


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

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

]]></b:skin>

вставляем следующее:


.showpageNum a {
  padding: 3px 8px;
  margin: 0 4px;
  text-decoration: none;
  border: 1px solid #bba166;
  background-image: -moz-linear-gradient(#f4e9ce, #ddcca3);
background-image: -webkit-gradient(linear, center top, center bottom, from(#f4e9ce), to(#ddcca3));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#f4e9ce,endColorStr=#ddcca3);
background-image:-o-linear-gradient(top,#f4e9ce,#ddcca3);
  }

.showpageOf {
margin: 0 8px 0 0;
color: #fff;
text-shadow: 1px 1px 1px #000;font-size:120%;font-weight: bold;}

.showpageNum a:hover {
  border: 1px solid #888;
  background: #f6edd9;
   }

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


До элемента

</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]||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}('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>

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

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

Да, кстати, не забывайте регистрировать свой бизнес будь Вы индивидуальный предприниматель или директор ООО. Если интересует внесение изменений в юридическое лицо - это делается в короткие сроки командой профессионалов.

А вот если на парковке во дворе вашего дома или офиса снова не хватило места для вашей машины, необходимо срочно поставить парковочный барьер - самы лучший способ "застолбить" за собой свое парковочное место!

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

  1. Если ни ошибаюсь, код взят из плагина для WP - "page navi". Сам использовал этот плагин на своем сайте Заметки айтишника

    ОтветитьУдалить
  2. А почему Вы у себя на блоге так не сделали? Платформа же блогспот.

    ОтветитьУдалить
  3. Именно так у себя и сделал!

    ОтветитьУдалить
  4. Спасибо за полезную информацию! очень хорошо, что есть полностью код, готовый для "употребления"!

    ОтветитьУдалить
  5. Спасибо за статью, очень помогла! Хоть раз гугл нашёл мне именно то, что я искал.

    ОтветитьУдалить
  6. У меня после установки не отобразились новые кнопки, не знаете в чём может быть причина?

    ОтветитьУдалить
  7. Спасибо за решение проблема, да еще и вот так "!на ладошке"!

    ОтветитьУдалить
  8. Наконец то нашел толковое пояснение. Буду теперь пользоваться на своих сайтиках

    ОтветитьУдалить
  9. Я сделал себе подобную навигацию и очень доволен.
    Отличная вещь.

    ОтветитьУдалить
  10. Спасибо за статью! Обязательно воспользуюсь полезной информацией

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

    ОтветитьУдалить
  12. А что означает это eval? Я читала на сайтах, что это что-то не очень хорошее...не шпион ли это какой-то? Не объясните? :)

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

Ratings and Recommendations by outbrain