Blogger установить виджет следующее предыдущее с миниатюрами

Blogger виджет следующее предыдущее с миниатюрами
Виджет: Следующий - предыдущий пост

Описание: Отображает заголовки постов, Превъю картинок к постам.

Функции виджета: Связывает между собой сообщения блога, тем самым выполняя функцию перелинковки. Более ощутимый результат для сайтов с узкой тематикой.

Установить виджет для новых тем Contempo Soho Emporio Notable


1). В разделе Тема - Изменить HTML перед закрывающим тегом </head> добавьте строку:

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'/>

2). Найдите строку ]]></b:skin> перед ней вставьте код:
/* 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;}

3). Найдите код:
<div class='post-bottom'><div class='post-footer float-container'><b:include name='footerBylines'/><b:include cond='data:widget.type == &quot;Blog&quot;' data='post' name='postFooterAuthorProfile'/></div> <b:if cond='data:view.isSingleItem'> <b:include data='{ shareButtonClass: &quot;post-share-buttons-bottom invisible&quot;, overridden: true }' name='maybeAddShareButtons'/><b:else/><b:include data='post' name='postFooterJumpLink'/></b:if></div>

встречается 3 - 4 раза в зависимости от темы, отсчитайте 3 и после него вставьте следующий код:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<span class='odd-pager'><ul class='mbt-pager'>
        <li class='next'> 
<b:if cond='data:olderPageUrl'> 
<a class='newer-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;'/> 
<b:else/> 
<a><strong/> <span>Последний пост</span></a> 
</b:if> 
</li>
    <li class='previous'> 
<b:if cond='data:newerPageUrl'> 
<a class='older-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;'/> 
<b:else/> 
<a><strong/> <span>Первый пост</span></a> 
</b:if> 
</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>Следующий пост</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>Предыдущий пост</strong> <span>'+$(data2).find('.post .entry-title').text()+'</span></div>');    
    },"html");

})(jQuery); 
//]]> 
</script>
</b:if>

4). Сохраните тему, проверьте работу виджета.

Установка виджета для обычных шаблонов

Для обычных шаблонов blogger будет сложнее, потому как нужно найти место куда вставить код виджета и в каждом другом шаблоне эти места могут отличаться.

Сперва попробуйте найти строку <data:post.body/> и после нее добавить код из 3 пункта по установке виджета в новых темах. Если не будет срабатывать попробуйте разместить скрипт после следующих строк:  <div class='post-footer'> или <div class='post-footer-line post-footer-line-1'></div>


Пагинация Предыдущее Следующее с кнопками 

Если вы хотите установить в блог обычный виджет с кнопками? без использования JS и библиотек jquery, тогда используйте следующие CSS и HTML кода, а так же следуйте указаниям на видео ниже.

<style>
nav.navigation.post-navigation.hidden-xs{width:100%;}
.pagination{display:inline-block;padding-left:0;margin:20px 0;border-radius:4px}.pagination&gt;li{display:inline}.pagination&gt;li&gt;a,.pagination&gt;li&gt;span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:#337ab7;text-decoration:none;background-color:#fff;border:1px solid #ddd}.pagination&gt;li:first-child&gt;a,.pagination&gt;li:first-child&gt;span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination&gt;li:last-child&gt;a,.pagination&gt;li:last-child&gt;span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination&gt;li&gt;a:focus,.pagination&gt;li&gt;a:hover,.pagination&gt;li&gt;span:focus,.pagination&gt;li&gt;span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination&gt;.active&gt;a,.pagination&gt;.active&gt;a:focus,.pagination&gt;.active&gt;a:hover,.pagination&gt;.active&gt;span,.pagination&gt;.active&gt;span:focus,.pagination&gt;.active&gt;span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination&gt;.disabled&gt;a,.pagination&gt;.disabled&gt;a:focus,.pagination&gt;.disabled&gt;a:hover,.pagination&gt;.disabled&gt;span,.pagination&gt;.disabled&gt;span:focus,.pagination&gt;.disabled&gt;span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg&gt;li&gt;a,.pagination-lg&gt;li&gt;span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg&gt;li:first-child&gt;a,.pagination-lg&gt;li:first-child&gt;span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg&gt;li:last-child&gt;a,.pagination-lg&gt;li:last-child&gt;span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm&gt;li&gt;a,.pagination-sm&gt;li&gt;span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm&gt;li:first-child&gt;a,.pagination-sm&gt;li:first-child&gt;span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm&gt;li:last-child&gt;a,.pagination-sm&gt;li:last-child&gt;span{border-top-right-radius:3px;border-bottom-right-radius:3px}.pager{padding-left:0;margin:20px 0;text-align:center;list-style:none}.pager li{display:inline}.pager li&gt;a,.pager li&gt;span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li&gt;a:focus,.pager li&gt;a:hover{text-decoration:none;background-color:#eee}.pager .next&gt;a,.pager .next&gt;span{float:right}.pager .previous&gt;a,.pager .previous&gt;span{float:left}.pager .disabled&gt;a,.pager .disabled&gt;a:focus,.pager .disabled&gt;a:hover,.pager .disabled&gt;span{color:#777;cursor:not-allowed;background-color:#fff}
.pagination{margin:22px 0 0;float:none;display:inline-block;width:auto}
.pagination&gt;li&gt;a:hover,.pagination&gt;li&gt;a:focus,.pagination&gt;.active&gt;a,.pagination&gt;.active&gt;span{color:#fff!important;background:#ff6858!important}
.pagination{position:relative;width:100%}
.pagination&gt;li:first-child&gt;a,.pagination&gt;li:first-child&gt;span{border:0}
.pagination&gt;li&gt;a,.pagination&gt;li&gt;span{display: block; border: 0; float: left; margin: 1px 1px 0px 0; padding: 2px 25px; text-decoration: none; width: auto; color: #fff; background: #0e0e0e; min-width: 55px; text-align: center; line-height: 32px; border-radius: 4px!important;}
.single .pagination &gt; li &gt; a,.single .pagination &gt; li &gt; span,.mfp-content .pagination &gt; li &gt; a,.mfp-content .pagination&gt;li&gt;span{margin:0;color:#BCC2C9;background:none;line-height:normal;min-height:inherit}
.pagination span.page-of{float:right}
.pagination&gt;li&gt;a:hover,.pagination&gt;li&gt;a:focus,.pagination&gt;.active&gt;a,.pagination&gt;.active&gt;span{color:#000;background:#fff}
.single .pagination &gt; li &gt; a:hover,.single .pagination &gt; li &gt; a:focus,.single .pagination &gt; .active &gt; a,.single .pagination&gt;.active&gt;span{color:#F36639;background:none}
.pagination .current,.pagination span.page-of{background:#F36639;color:#fff}
.single .pagination .current,.single .pagination span.page-of{color:#F36639;background:none} a#Blog1_blog-pager-older-link {float: right;}
</style>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<nav class='navigation post-navigation hidden-xs' role='navigation'>
<ul class='pagination'> <li> <b:if cond='data:newerPageUrl'> <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><span class='meta-nav'>
 <i class='fa fa-angle-left'/> Предыдущий пост </span></a> </b:if> </li> <li> <b:if cond='data:olderPageUrl'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><span class='meta-nav'> Следующий пост
<i class='fa fa-angle-right'/> </span></a> </b:if> </li> </ul></nav></b:if>



Поделиться в социальных сетях:
Facebook Twitter Vkontakte

Рекомендуем

5 Коммент.

Оставить комментарий
avatar
travel
апреля 09, 2018

У меня тема Emporio. Кода, после которого надо вставить виджет (часть JS), нет вообще. Пробовала как для обычных шаблонов - нашла первых две строки, после обеих пробовала вставлять. В сообщениях появляются только слова Предыдущий пост и Следующий пост, без ссылок и картинок.

Ответить
avatar
Марк Корвин
апреля 10, 2018

Не для всех тем будет срабатывать. В некоторых случаях нужно подстраивать код виджета под разметку шаблона.

Ответить
avatar
Andrey Tiron
декабря 04, 2019

Здравствуйте Марк!

Можно вас попросить, чтобы вы разместили здесь, на своем блоге похожую тему с кнопками ПРЕДЫДУЩАЯ/СЛЕДУЮЩАЯ, так как в интеренете мало, где можно найти информацию об этом виджите для Blodger. Вот, примерно как здесь на сайте: https://danteizm.blogspot.com/2016/11/super-fast-blogger-template.html

Так как этот виджет на данной странице не как не могу установить... уже загрузил последнею библиотеку JQ.. нашел куда вставить все коды... но при сохранении, - кнопки отображаются не корректно.

Спасибо вам заранее!

Ответить
avatar
Mark Korvin
декабря 04, 2019

Здравствуйте. Хорошо, что-то придумаем, постараюсь в течении следующих двух недель оформить. И да, библиотеки jquery нужны данному виджету только тогда, когда он использует javascript для отображения заголовков сообщений и их картинок, а так, для отображения кнопок библиотеки вовсе не нужны.

Ответить
avatar
Andrey Tiron
декабря 04, 2019

Спасибо большое!

Непременно буду ждать! Спасибо вам за ваш труд... вы делаете то, что не могут другие... я постоянно пользуюсь вашими советами...

Ответить