Заголовок следующей и предыдущей статьи для Blogger
Виджет "Заголовок следующей и предыдущей статьи" - это элемент навигации для Blogger, расположенный ниже сообщения, показывающий читателям заголовок следующей и предыдущей записи.
Данные кнопки навигации выглядят очень стильно и делают ваш блог красивее. К тому же, помогают пользователям переходить от одной статьи к следующей.
Установка виджета "Заголовок следующей и предыдущей статьи"
Чтобы установить данный виджет в свой блог на Blogger, необходимо в шаблоне найти строку (может быть несколько данных строк, нужна та, которая находится ниже): <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:skin>. И выше нее добавляем код:
.mbt-pager { border-top: 2px dashed #00FA9A; border-bottom: 2px dashed #00FA9A; 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 #00FA9A; padding:0px; background:none;}.mbt-pager li.previous a { padding-right: 24px; }.mbt-pager li.next:hover, .mbt-pager li.previous:hover {background:#20B2AA; }.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: #0000CD; font-size: 18px; }.mbt-pager li a strong { display: block; font-size: 20px; color: #4B0082; 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: #0000CD; 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: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;}
Затем, находим <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: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 cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
Найденный большой код
</b:if></b:if>
Некорректно отображается виджет "Заголовок следующей и предыдущей статьи"
В некоторых новых темах виджет "Заголовок следующей и предыдущей статьи" может отображаться не совсем корректно: на кнопке вместо одного заголовка отображается несколько заголовков сообщений.
Виной сему явлению служит родной виджет: "Популярные сообщения". Просто удалите его или замените код на старый.
Комментарии