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/> и после нее добавить код из второго пункта по установке виджета в новых темах. Если не будет срабатывать попробуйте разместить скрипт после следующих строк:  <div class='post-footer'> или <div class='post-footer-line post-footer-line-1'></div>


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

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