Навигация на блоггер

На сайте https://helplogger.blogspot.com нашла код необычного оформления навигации на Блоггер. В шаблоне блога есть ссылки, по которым читатель переходит, просматривая предыдущие и следующие посты.

Не всем нравятся вид ссылок — слишком скучные. Можно заменить их на более интересный вид навигации — всплывающие ссылки статей.

Кстати, ещё о навигации на Блоггер можно прочитать в статье: https://inshabashka.blogspot.com/2019/11/nastrojki-bloga-urok-9.html

Всплывающие ссылки статей

Выглядит гаджет так:

При прокрутке, ближе к низу сайта, появляется всплывающее окно со ссылками на статьи.

Устанавливаем код. Заходим в шаблон, ищем строку <b: include name= 'nextprev'/>.

Заменяем найденный код, другим:

<b:if cond='data:blog.pageType != "item"'>
<b:include name='nextprev'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='blog-pager-box'>
<h4>Другие посты на блоге:</h4>
<b:include name='nextprev'/>
</div>
</b:if>

Далее ищем в шаблоне </head> и выше него добавляем код:

<script>
// <![CDATA[
$(function() {
$('#blog-pager-box').toggle()
.css({
width: '520px',
height: '150px',
position: 'fixed',
padding: '1em',
bottom: 0,
right: 0,
background: 'url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWeRCJpZcqw_Avuefmza_Qbdl5-9ZgS26wseFNFDlyixab6ak0VvG2i5wjENE-7nqG7E0fBlhs_KwIfQgkUcK0om41cHyEY_QqjukPpMmYVSSLPY374yZQO9RDJU2xYgofwLaRvKN3fkwx/s1600/paper.jpg)'
});
$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$('#blog-pager-box').fadeIn();
} else {
$('#blog-pager-box').fadeOut();
}
});
});
$(document).ready(function(){
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();
$(".blog-pager-newer-link").html("<div>Новые статьи:</div>" + newerLinkTitle);
});
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();
$(".blog-pager-older-link").html("<div>Старые статьи:</div>" + olderLinkTitle);
});
});
// ]]>
</script>
<style type='text/css'>

</style>
</b:if>

Примечания к коду:

Розовый — цвет текста.

Голубой — цвет текста названия гаджета.

Салатовый — цвет ссылок.

Фиолетовый — размер шрифта.

Оранжевый — расстояние в пикселях, когда появится гаджет при прокрутке вниз.

Синий — ссылки на картинки-стрелки.

Красный — ссылка на картинку-текстуру.

Ярко-фиолетовый — меняете текст на свой.

Бордовый — ширина и высота гаджета — можно уменьшить и увеличить.

Гаджет хорош тем, что картинку и иконки стрелок можно установить свои.

Несколько примеров:

А ниже гаджет с белым фоном. Можно не прописывать адрес картинки (оставить скобки пустыми) и будет так же белый фон. Смотрится без картинок гаджет не хуже, чем с текстурами.

На блоге гаджет выглядит так: