Главная » Гаджеты » Навигация на блоггер
Навигация на блоггер
![Навигация на блоггер Навигация на блоггер](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvTVJjalP6sc9HGsk7BAvfXZskra_9WzE7AFbTh0ZBzdOw3nlahQBJvDhtKZ8g8bJQBueBC3hUFehb0YJyYuYnDMDLfvScRfT2j8ui66UVB2UA9Qv8ju1ygCcqQetAI7z-ZERrfOnUXd_PdDP7w6XOm7kA8tbLDHK005bvnF5VC5ajQaj7ORlZ6SDG1A/w320-h27-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-1008-2022.jpg)
Не всем нравятся вид ссылок — слишком скучные. Можно заменить их на более интересный вид навигации — всплывающие ссылки статей.
Кстати, ещё о навигации на Блоггер можно прочитать в статье:
https://inshabashka.blogspot.com/2019/11/nastrojki-bloga-urok-9.html
Всплывающие ссылки статей
Выглядит гаджет так:
![Всплывающие ссылки статей Всплывающие ссылки статей](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhax2lKI1-1gIPI-QWPN9emlvLyGwcag_e2K5ESJRg_cfp5jU7ohIkXYhUsNblH8c5QxbHnfp30E4JiQFNNLUUBmJRy-GBEQg_I_e-qnLUShQnmBDj8B6bnAXALzx3f3mr8OwCTgbTl2WOBzk8uoPKb3R6fVjseTCoQY2oq45XtBxHCDOO1X6PDT5Q81A/w320-h137-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-1009-2022.jpg)
Устанавливаем код. Заходим в шаблон, ищем строку <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'><!--#blog-pager-box {box-shadow: 0 0 3px #AEAEAE;z-index:9;}#blog-pager-box h4 {margin:0;padding:0;color:#4898B9;font-size:16px;}#blog-pager-newer-link {float:left;clear:both;line-height:30px;}#blog-pager-older-link {float:left;clear:both;line-height:30px;}.home-link {display:none;}.blog-pager-older-link, .blog-pager-newer-link {background-color: transparent !important;background-image: none !important;border:0 !important;color: #4B4B4B !important;float: left;width: 500px;clear:both;}a.blog-pager-older-link:hover, a.blog-pager-newer-link:hover {text-decoration:none !important;}a.blog-pager-newer-link:before {content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDTtKC8x5HsKyKIp3Hk60QFllrvuu1p4BVPU_xzNHIuA2ShYIu6-aruPsfcY1fjyyYaS-xFbAKVaro_7KtMcFN46Wg0-gNHTZVY3zhv48SmS39flGUorXhd477iUw9kxGhUVp5SOg9X4M/s1600/back.png);float:left;}a.blog-pager-older-link:before {content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBfhbmEBzJimmaRbUSPES40sjumFTP96xL3sm9iCaCw7vEH3i6vxjmbkxBlw-cmOL6yvfwcmBAfEI8Ro4wXuz28pfvFGJvs6pr72LPehhtGtscX3h4of6OyHwhA3HIHi4f2xrOGh8NV4/s1600/forward.png);float:left;}#blog-pager {width:500px;background-color: transparent !important;background-image: none !important;border:0 !important;text-align:left;}#blog-pager div {color:#0577AB;font-weight:bold;margin-bottom: -5px;}a#blog-pager div:hover {text-decoration:none !important;color:#4898B9;}--></style></b:if>
Примечания к коду:
Розовый — цвет текста.
Голубой — цвет текста названия гаджета.
Салатовый — цвет ссылок.
Фиолетовый — размер шрифта.
Оранжевый — расстояние в пикселях, когда появится гаджет при прокрутке вниз.
Синий — ссылки на картинки-стрелки.
Красный — ссылка на картинку-текстуру.
Ярко-фиолетовый — меняете текст на свой.
Бордовый — ширина и высота гаджета — можно уменьшить и увеличить.
Гаджет хорош тем, что картинку и иконки стрелок можно установить свои.
Несколько примеров:
![Несколько примеров Несколько примеров](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwoq_OTzjDzpdje-wFp7K3CjVAcM2jO-YSHcUgm0jAH9pWFu1loMTSncF7dASZWO75TLtLkho0CnOKs0AAWrpnXBNI4t_qpOg1dnYmLrA6fF3Gnopm5L5cy8mbwOS1gxnjn-Kvd4rwxREYGlQj2R308hy1To34xH9nSinLozV0eBSCfBYAmlSyVgI0Gg/w320-h317-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-1010-2022.jpg)
![Смотрится без картинок гаджет не хуже Смотрится без картинок гаджет не хуже](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGzKVlEWSm5EZ2Qs_hqY0Fgs2hlqBYc_zTGwo83YsWp8XjB3Isfd3jttqAz1-fnv6-yMM4fKek8lvqBO1OtmzvPTYYs--hFTWpiVInm8wlqprQBf9oj9Ht4IkCcjARp_r7mTN_CeLRsGqZCrwkYrNSgBK9gfkYQsgIJAeGHUaxBUcm8FMOJfWg9-WPbQ/w320-h186-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-1011-2022.jpg)
![гаджет выглядит так гаджет выглядит так](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_jEa8ojcSSeoLLf3Y-tdGQTdWMPYWB3fhJC9zDODCztbnq2_4yuagD0DrdH3mo5GceR1EGbwf_bpPEHzqQtccgdgUeYgf0Uo1fYwIvECN8jhi3eCQtwLwPc1CktY4so8unB6FLYmydervCFdenoW4onPLsKQM_lt3ljVHwuaUQn7A4PBVOfmq7ERVsQ/w320-h235-rw/%D1%81%D0%BA%D1%80%D0%B8%D0%BD%D1%88%D0%BE%D1%82-1012-2022.jpg)
Комментарии со спамом удаляются.