Функции виджета: Связывает между собой сообщения блога, тем самым выполняя функцию перелинковки. Более ощутимый результат для сайтов с узкой тематикой.
Установить виджет для новых тем 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 == "Blog"' data='post' name='postFooterAuthorProfile'/></div> <b:if cond='data:view.isSingleItem'> <b:include data='{ shareButtonClass:
"post-share-buttons-bottom invisible", overridden:
true }' name='maybeAddShareButtons'/><b:else/><b:include data='post' name='postFooterJumpLink'/></b:if></div> встречается 3 - 4 раза в зависимости от темы, отсчитайте 3 и после него вставьте следующий код:
<b:if cond='data:blog.pageType != "index"'>
<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 + "_blog-pager-older-link"'/>
<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 + "_blog-pager-newer-link"'/>
<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>li{display:inline}.pagination>li>a,.pagination>li>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>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{z-index:2;color:#23527c;background-color:#eee;border-color:#ddd}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{z-index:3;color:#fff;cursor:default;background-color:#337ab7;border-color:#337ab7}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}.pagination-lg>li>a,.pagination-lg>li>span{padding:10px 16px;font-size:18px;line-height:1.3333333}.pagination-lg>li:first-child>a,.pagination-lg>li:first-child>span{border-top-left-radius:6px;border-bottom-left-radius:6px}.pagination-lg>li:last-child>a,.pagination-lg>li:last-child>span{border-top-right-radius:6px;border-bottom-right-radius:6px}.pagination-sm>li>a,.pagination-sm>li>span{padding:5px 10px;font-size:12px;line-height:1.5}.pagination-sm>li:first-child>a,.pagination-sm>li:first-child>span{border-top-left-radius:3px;border-bottom-left-radius:3px}.pagination-sm>li:last-child>a,.pagination-sm>li:last-child>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>a,.pager li>span{display:inline-block;padding:5px 14px;background-color:#fff;border:1px solid #ddd;border-radius:15px}.pager li>a:focus,.pager li>a:hover{text-decoration:none;background-color:#eee}.pager .next>a,.pager .next>span{float:right}.pager .previous>a,.pager .previous>span{float:left}.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span{color:#777;cursor:not-allowed;background-color:#fff}
.pagination{margin:22px 0 0;float:none;display:inline-block;width:auto}
.pagination>li>a:hover,.pagination>li>a:focus,.pagination>.active>a,.pagination>.active>span{color:#fff!important;background:#ff6858!important}
.pagination{position:relative;width:100%}
.pagination>li:first-child>a,.pagination>li:first-child>span{border:0}
.pagination>li>a,.pagination>li>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 > li > a,.single .pagination > li > span,.mfp-content .pagination > li > a,.mfp-content .pagination>li>span{margin:0;color:#BCC2C9;background:none;line-height:normal;min-height:inherit}
.pagination span.page-of{float:right}
.pagination>li>a:hover,.pagination>li>a:focus,.pagination>.active>a,.pagination>.active>span{color:#000;background:#fff}
.single .pagination > li > a:hover,.single .pagination > li > a:focus,.single .pagination > .active > a,.single .pagination>.active>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 == "item"'>
<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 + "_blog-pager-newer-link"' 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 + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><span class='meta-nav'> Следующий пост
<i class='fa fa-angle-right'/> </span></a> </b:if> </li> </ul></nav></b:if>Переходим к просмотру видео:
Виджет Предыдущее Следующее с названием заголовков сообщений
Blogger - Blogspot делаем стильные кнопки под ссылки Предыдущее - Следущее на страницах с постами и заодно выставляем их под правильное направление.
Всем привет. Итак сегодня без прелюдий, сразу перейдем к обсуждаемой теме. по собственному опыту знаю и с неохотой вспоминаю, как меня бесили эти несуразные ссылки Предыдущее и Следующее к тому же они по стандарту находятся в непривычном для нас расположении, Следующее с левой стороны, Предыдущее с правой и это еще не все, по идеи они должны появляться сразу по окончинаии текста поста, а не под комментаримями. Так же под стандартнимы ссылками не отображается название следующего и предыдущего постов (сообщений) И сегодня мы с вами одним выстрелом положим даже не двух, а сразу четырех зайцев. Если вкратце, то мы выставим правильное расположение этих ссылок и придадим им более стильный вид.Для начала переходим в раздел Шаблон - Изменить HTML ищем код
<head> и после него вставляем:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=georgia' rel='stylesheet' type='text/css'/>Затем ищем код
]]></b:skin> и перед ним выставляем следующий код:.mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd; 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; 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:georgia, sans-serif, arial; margin-bottom:10px;}
.mbt-pager li a span { font-size: 15px; color: #666; font-family:georgia,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:15%; margin-left:5%; }
.mbt-pager li.next i { float: right;
margin-top: 15%;
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;}Следующий шаг, ищем код <data:post.body/> их может быть два нам нужен тот, который располагается ниже и после него вставляем код:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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 + "_blog-pager-newer-link"' rel='next'/>
<b:else/>
<i class='fa fa-chevron-right'/><a rel='next'><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 + "_blog-pager-older-link"' rel='previous'/>
<b:else/>
<i class='fa fa-chevron-left'/><a rel='previous'><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 h3.post-title').text()+'</span>');
},"html");
$.get(olderLink.attr('href'), function (data2) {
olderLink.html('<strong>Предыдущий пост</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');
},"html");
})(jQuery);
//]]>
</script>
</b:if></b:if> <b:includable id='nextprev'> и после него нам нужно вставить код:<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:if cond='data:mobileLinkUrl'>
<div class='blog-mobile-link'>
<a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
</div>
</b:if>
</div>
<div class='clear'/>
</b:if></b:if>Если готово, тогда сохраняем шаблон и передвигаемся к своему сайту - блогу, открываем любой пост и радуемся уже не ссылкам, а кнопкам Предыдущий пост и Следующий пост.
Второй вариант виджета с заголовками
Продолжим тему, на предлагаю более простой вариант виджета, который так же отображает названия следующего и предыдущего сообщения. Для установки используем видео инструкцию ниже и следующий код:Используем CSS:
.pagernav {margin-top: 20px; background:#fff;padding:10px 0;border:1px solid #eee;border-top:0;}
.turn-left{width:50%;float:left;margin:0;text-align:left;color:#bbb;transition:all .3s ease-out;}
.turn-right{width:50%;float:right;margin:0;text-align:right;color:#bbb;transition:all .3s ease-out}
.turn-right:hover .pager-title-left,.turn-left:hover .pager-title-left{color:#ddd!important;}
.turn-left a,.turn-right a{color:#999;}
.turn-right a:hover,.turn-left a:hover{color:#666!important;}
.turn-left a,.turn-right a{font-size: 22px; font-weight: 700; text-transform: uppercase;}
.pager-title-left{font-family: 'Open Sans',sans-serif;font-size:22px;font-weight:700;text-transform:uppercase;transition:all .3s ease-out}
.blog-left{margin:0}
.blog-right{margin:5px 10px 10px}
#blog-pager-newer-link{float:left;padding:0 0 0 15px;}
#blog-pager-older-link{float:right;padding:0 15px 0 0;}
.blog-pager,#blog-pager{clear:both;text-align:center} Используем HTML:
<b:if cond='data:blog.pageType == "item"'>
<div class='pagernav'>
<div class='blog-pager' id='blog-pager'>
<div class='turn-left'>
<div class='blog-left'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<span class='pager-title-left'>Предыдущий пост</span><br/>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« Prev Post</a>
</span>
<b:else/>
<span class='current-pageleft'><span class='pager-title-left'>Первый пост</span></span>
</b:if>
</div>
</div>
<div class='turn-right'>
<div class='blog-right'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='pager-title-left'>Следующий пост</span><br/>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next post »</a>
</span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>Последний пост</span></span>
</b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
</b:if>Используем JS:
<script type='text/javascript'>
//Pager
$(document).ready(function(){
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
});
</script> Используем Jquery:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>Для старых тем используем код:
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='pagernav'>
<div class='blog-pager' id='blog-pager'>
<div class='turn-left'>
<div class='blog-left'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<span class='pager-title-left'>Предыдущий пост</span><br/>
<a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>« Prev Post</a>
</span>
<b:else/>
<span class='current-pageleft'><span class='pager-title-left'>Latest</span></span>
</b:if>
</div>
</div>
<div class='turn-right'>
<div class='blog-right'>
<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<span class='pager-title-left'>Следующий пост</span><br/>
<a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>Next post »</a>
</span>
<b:else/>
<span class='current-pageright'><span class='pager-title-left'>First</span></span>
</b:if>
</div>
</div>
</div>
<div style='clear: both;'/>
</div>
<script type='text/javascript'>
//Pager
$(document).ready(function(){
var olderLink = $("a.older-link").attr("href");
$("a.older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.older-link").text();
$("a.older-link").text(olderLinkTitle);
});
var newerLink = $("a.newer-link").attr("href");
$("a.newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.newer-link").text();
$("a.newer-link").text(newerLinkTitle);
});
});
</script>
</b:if></b:if>