Навигация Следующее - Предыдущее с заголовками и картинками

Навигация Следующее - Предыдущее с заголовками и картинками на страницах сообщений Blogger

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

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

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

Навигация Следующее - Предыдущее с заголовками

 Для появления в блоге на страницах сообщений навигации с заголовками в код шаблона темы вносим следующие изменения.

Для работы скрипта необходима загрузка на сайт библиотеки jQuery. В тему блога перед тегом </head> вставляем код:

<script type='text/javascript'>
//<![CDATA[
if (typeof(jQuery) == 'undefined') {
//output the script (load it from google api)
document.write("<scr" + "ipt type=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js\"></scr" + "ipt>");
}
//]]>
</script>

Перед вставкой проверьте, возможно в теме блога похожий код уже есть. Поищите в теме шаблона фрагмент кода библиотеки: ajax/libs/jquery , . Цифры 2.1.3 - это версия библиотеки, могут быть в вашей теме другими.

Стили CSS навигации с заголовками

Стили CSS, как обычно, вставляем перед тегом: ]]></b:skin>

/*--- Стили CSS. Навигация Следующ. Предыдущ. с заголовками постов */
.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
.mbt-pager li.next { height:114px; float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }
.mbt-pager li.previous { height:114px; margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;}
.mbt-pager li.previous a { padding-right: 24px;  }
.mbt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#333333; }
.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}
.mbt-pager li i { color: #ccc; font-size: 18px; }
.mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}
.mbt-pager li a span { font-size: 15px; color: #666;  font-family:oswald,Helvetica, arial; margin:0px;}
.mbt-pager li a:hover span, .mbt-pager li a:hover i { color: #ffffff; }
.mbt-pager li.previous i { float:left; margin-top:48px; margin-left:5%; }
.mbt-pager li.next i { float: right;margin-top: 48px;margin-right: 5%; }
.mbt-pager li.next i, .mbt-pager li.previous i , .mbt-pager li.next,  .mbt-pager li.previous{
-webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
-moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
-o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }
.fa-chevron-right {padding-right:0px;}
@media screen and (max-width: 800px) {.mbt-pager li{width:100%}.mbt-pager li.previous{margin:0;border-right:none;}}

В коде CSS число в последней строчке, 800px,  определяет ширину экрана компьютера, при которой меняется расположение двух блоков навигации. На маленьких экранах блоки располагаются вертикально. На больших экранах - горизонтально.

Код и скрипт навигации с заголовками

В теме шаблона ищем код <data:post.body/> . Их может быть два. Нам нужен тот, который располагается ниже и после него вставляем код:

<!-- Код и скрипт. Навигация Следующ. Предыдущ. с заголовками постов Начало -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<ul class='mbt-pager'>
<li class='next'>
<b:if cond='data:newerPageUrl'>
<i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'/>
<b:else/>
<i class='fa fa-chevron-right'/><a><strong>Далее</strong> <span>Нет</span></a>
</b:if>
</li>
<li class='previous'>
<b:if cond='data:olderPageUrl'>
<i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'/>
<b:else/>
<i class='fa fa-chevron-left'/><a><strong>Назад</strong> <span>Нет</span></a>
</b:if>
</li>
</ul>
<script type='text/javascript'>
//<![CDATA[

(function($){ 
var newerLink = $('a.newer-link');
var olderLink = $('a.older-link');
$.get(newerLink.attr('href'), function (data) {
newerLink.html('<strong>Далее</strong> <span>'+$(data).find('.post-title.entry-title').text()+'</span>'); 
 },"html");
 $.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Назад</strong> <span>'+$(data2).find('.post-title.entry-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if>
<!-- Код и скрипт. Навигация Следующ. Предыдущ. с заголовками постов Конец -->

Проверяем в коде скрипта два участка, выделенных жирным шрифтом. В них должны быть указаны классы в коде темы, присвоенные заголовкам постов на странице сообщений. В некоторых темах классы могут быть указаны другие. В нашем примере, для заголовка сообщения в коде темы указан class="post-title entry-title" .

Место положения навигации на странице сообщения можно изменить. Если, например, код и скрипт навигации вставить в тему блога перед строкой с кодом: post-footer-line-3 . Для разных тем могут быть и другие варианты. Навигацию в любом случае следует располагать на странице поста до блока с комментариями.

Изменяем код темы сайта

Находим код: <b:includable id='nextprev'> и заменяем весь этот блок кода: <b:includable id='nextprev'> ... </b:includable> , на следующий код:

<b:includable id='nextprev'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='blog-pager gmr-clearfix' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span class='gmr-pull-left' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link gmr-btn' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
<span class='fa fa-arrow-left'/><span class='gmr-textpager-newer'><data:newerPageTitle/></span>
</a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span class='gmr-pull-right' id='blog-pager-older-link'>
<a class='blog-pager-older-link gmr-btn' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
<span class='gmr-textpager-older'><data:olderPageTitle/></span><span class='fa fa-arrow-right'/>
</a>
</span>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a class='home-link gmr-btn' expr:href='data:blog.homepageUrl' expr:title='data:homeMsg'><span class='fa fa-home'/></a>
</b:if>
</div> 
</b:if></b:if>
</b:includable>

Навигация с заголовками и картинками

Следующий код и скрипт отсюда:
view-source:https://danteizm.blogspot.com/2016/11/super-fast-blogger-template.html

<span class='odd-pager'><ul class='mbt-pager'>
<li class='next'>
<a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'></a>
</li>
<li class='previous'>
<a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'></a>
</li>
</ul>
</span>

<script type='text/javascript'>
//<![CDATA[
(function($){  
    var newerLink = $('a.newer-link');
    var olderLink = $('a.older-link');
    $.get(newerLink.attr('href'), function (data) {
      var thumb=$(data).find('.post-body img:first').length>=1?"<img src='"+$(data).find('.post-body img:first').attr('src').replace(/s\B\d{2,4}/,'s' + 120)+" class=''/>":"";
     newerLink.html(thumb+'<div><strong>Next Theme</strong> <span>'+$(data).find('.post .entry-title').text()+'</span></div>');  
    },"html");
    $.get(olderLink.attr('href'), function (data2) {
      var thumb2=$(data2).find('.post-body img:first').length>=1?"<img src='"+$(data2).find('.post-body img:first').attr('src').replace(/s\B\d{2,4}/,'s' + 120)+" class=''/>":"";
     olderLink.html(thumb2+'<div><strong>Previous Theme</strong> <span>'+$(data2).find('.post .entry-title').text()+'</span></div>');  
    },"html");
})(jQuery);
//]]>
</script>

Стили CSS навигации с картинками

/* Phone : 480px */
@media only screen and (max-width: 767px) and (min-width: 480px){
.mbt-pager li.previous a{padding-right:0px;}
.mbt-pager li a{padding:0px;}
.mbt-pager li{width:100%;}
.mbt-pager li.next{margin-bottom: 15px;}
.mbt-pager .next a strong,.mbt-pager .next a span{text-align:left;}
.mbt-pager li.next a{padding-left:0}
}

/* Phone : 320px */
@media only screen and (max-width:479px){
.mbt-pager li.next{margin-bottom: 15px!important;}
.mbt-pager li.next a{padding-left:0}
.mbt-pager li{width:100%;}
.mbt-pager .next a strong,.mbt-pager .next a span{text-align:left;}
.mbt-pager li.next{float:none;width:100%;}
.mbt-pager li.previous{width:100%;}
.item-related{width:100% !important} .item-related img { width: 100% !important; }
}

ul.mbt-pager {padding: 20px;}
.odd-pager{  display:block;}
.mbt-pager {  margin-bottom: 10px;   overflow:hidden; padding:0px;}
.mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
.mbt-pager li.next a { padding-left: 24px; }
.mbt-pager li.previous { margin:0px -2px 0px 0px; float: left;padding:0px; background:none;}
.mbt-pager li.previous a { padding-right: 24px;  }
.mbt-pager li.next:hover, .mbt-pager li.previous:hover  {color:#333333; }
.mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
.mbt-pager li a { position: relative;
/* min-height: 77px; */
display: block;
/* padding: 15px 46px 15px; */
outline: none;
text-decoration: none;
}
.mbt-pager li i { color: #000; font-size: 12px; }
.mbt-pager li a strong { display: block; font-size: 14px; color: #000; letter-spacing: 0.5px; font-weight:400;}
.mbt-pager li a span {    letter-spacing: 0px;display:block;  color: #666;  font:$(body.font); margin:0px;}
.mbt-pager li a:hover strong {color: #E94141;}
.mbt-pager li a:hover span {color: #E94141;}
.mbt-pager .previous a span{text-align:left;color: #1bbc9b;}
.mbt-pager .next a span{text-align:right;color: #1bbc9b;}
.mbt-pager .previous div {display: block;padding-left: 130px;}
.mbt-pager .next div {display: block;padding-right: 130px;}
.fa-chevron-right {padding-right:0px;}
.mbt-pager .previous a img {float: left;}
.mbt-pager .previous a {display: block;}
.mbt-pager .next a img {float: right;}
.mbt-pager .next a {display: block;}
.mbt-pager .previous a strong{text-align:left;}
.mbt-pager .next a strong{text-align:right;}