Оформляем Следующая, Главная и Предыдущая страницы blogspot

Как изменить привычное оформление навигации “Следующая страница, Главная, Предыдущая”, заменить на картинки, кнопки, иконки, создать плавающие кнопки и прописываем в кнопках название предыдущего и следующего поста.
- убрать навигацию Следующие, Главная, Предыдущие страницы
- изменить названия
- заменить на картинки
- изменить следующая, предыдущая названием поста
- плавающие кнопки
- стили
Читайте также урок по оформлению кнопки читать дальше
- Убираем ссылки на следующую, главную и предыдущую страницы. Находим в шаблоне блога отрезок кода “nextprev” и удаляем из шаблона код:
<b:includable id='nextprev'> <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> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> <b:else/> <b:if cond='data:newerPageUrl'> <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a> </b:if> </b:if> </div> <div class='clear'/> </b:includable>
- Если вы не хотите убирать ссылки на предыдущую и следующую страницы блога, то вы можете изменить их названия. Например, назвать их шутливо “туда”, “сюда”, “вперед”, “назад” или дать английские названия “Newer Posts" , “Home”, "Older Posts. Для того, чтобы изменить название для Следующей страницы, найдите в шаблоне блога код <data:newerPageTitle/> и измените его на ваше название страницы.
Меняем название предыдущей странице – изменяем код шаблона <data:olderPageTitle/> на ваше название.
Главная страница определяется в шаблоне <data:homeMsg/>, этот код находим и меняем. - Для того, чтобы заменить ссылки навигации на картинки, например на иконки или анимацию, нужно коды, указанные в пункте 2 заменить на код изображения вида <img src=”URL картинки”/>
- В пункте 2 и 3 мы заменяли названия страниц на постоянный текст. С помощью jQuery кода, мы можем изменить названия предыдущей и следующей записи на заголовки соответствующих постов. Так, на странице отдельного сообщения вместо кнопки “Предыдущая” будет, например, Горизонтальное выпадающее меню, а вместо “Следующая” – Кнопка Pinterest на изображениях блога. На главной же странице блога, страницах ярлыков и архивов названия “Предыдущая” и “Следующая” страницы блога сохранятся. Как установить:
- Сначала нужно подключить библиотеку jQuery, если у вас она не подключена. Иными словами, ищите в шаблоне код скрипта:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Если у вас этот код отсутствует, то прописывайте его перед тегом </head>
- Теперь найдите в шаблоне блога </body> и вставьте перед ним код:
<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> $(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").text(); $("a.blog-pager-newer-link").text("" + 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(); $("a.blog-pager-older-link").text(olderLinkTitle + "");//rgt }); }); </script> </b:if>
- Сначала нужно подключить библиотеку jQuery, если у вас она не подключена. Иными словами, ищите в шаблоне код скрипта:
- Устанавливаем плавающие кнопки навигации страниц.
Вместо статичных вы можете установить плавающие кнопки по краям вашего шаблона.
Вначале добавим стили для новых кнопок. Для этого найдите код
]]></b:skin> и добавьте перед ним:.arrowLeft a {position: fixed;z-index: 100;left: -5px;top: 45%;padding: 25px 20px;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;}.arrowLeft a:hover {left: 0;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;color: #fff;}.arrowRight a {position: fixed;z-index: 100;right: -5px;top: 45%;padding: 25px 20px;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;}.arrowRight a:hover {right: 0;-webkit-transition: .2s ease-in;-moz-transition: .2s ease-in;-o-transition: .2s ease-in;transition: .2s ease-in;color: #fff;}.arrowNav a {background: #000000;color: #fff;text-decoration: none;font-size: 16px;}
Теперь найдите в шаблоне отрезок кода nextprev при помощи CTRL + F. Таких отрезков может быть несколько, нас интересует именно тот, который заключает код <b:includable ….. </b:includable>. Пример найденного кода ниже:
<b:includable id='nextprev'>
<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:includable>Ваш код может отличаться несколько от моего, но суть остается. Проще всего найти этот код следующим образом. Отформатируйте шаблон (в редакторе шаблона для этого есть специальная кнопка), введите в поиск по шаблону nextprev. Нажимайте enter до тех пор, пока не увидите код, как на скриншоте (кликабелен) ниже:
Вы можете его раскрыть, как показано выше красной стрелкой и выделить весь код от одного треугольника до другого, как на рисунке ниже. Для удобства я отделила код красными линиями. Опытные пользователи могут этот шаг пропустить и заменять код, не раскрывая его.
Замените найденный код на следующий: /*<b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <div class='arrowNav'> <b:if cond='data:newerPageUrl'> <span id='blog-pager-newer-link'> <!-- DHI the newer post --> <div class='arrowLeft'> <a class='prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle' id='nextLink'> <span class='arrow'/> <span class='prevnext'>←</span></a> </div> </span> </b:if> <b:if cond='data:olderPageUrl'> <span id='blog-pager-older-link'> <!-- DHI the older post --> <div class='arrowRight'> <a class='next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle' id='prevLink'> <span class='arrow'/> <span class='prevnext'>→</span><br/> </a></div> </span> </b:if></div> <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:includable>
Если вы все сделали правильно, то увидите в своем блоге две плавающие стрелки.
- Изменяем оформление кнопок. В шаблоне блога за оформление ссылок “Главная, предыдущая и следующая страницы” отвечают стили:
#blog-pager-newer-link {…….
}
#blog-pager-older-link {…….
}
#blog-pager {…….
}
или
.blog-pager-older-link {…….
}
.home-link {…….
}
.blog-pager-newer-link {…….
}
Для того, чтобы изменить внешний вид, изменяем свойства и значения (прописываем в фигурных скобках). Увеличиваем шрифт, делаем жирнее:font-size: 150%;
font-weight: bold;Используем фон или изменяем цвет фона:
background-image:url('URL OF YOUR IMAGE');
background-color:#cccccc;Изменяем цвет ссылок:
color:#B10000
Здравствуйте. Мне очень нужна помощь! Дело в том, что я заменила надписи картинками, но под ними остались видны серые кружочки. Есть ли возможность их убрать? Заранее спасибо!
Grissa, дайте ссылку на блог, чтобы я понимала о каких кружках идет речь )
Спасибо! правда, у меня в шаблоне код гораздо меньше. В итоге,
просто заменила на
То есть спрятала. Так гораздо читабельнее блог.
Evgenia, коды у всех различаются, но когда привыкаешь работать с ними, то видишь идентичные.
Наталья нихао, раскидайте пожалуйста по полочкам как сделать чтобы на стрелках показывалось название следующей статьи. Я вот нашёл (ну вы наверное это и сами уже читали) как мусульмане делают, так прикольно блин, и коды там дают, у кого то получается у кого то нет, делов всего два действия, скопировать и вствить. В общем вот так хотелось бы
http://eutectics.blogspot.ru/2015/01/add-next-previous-post-navigation-in-blogger.html
Или может у вас есть подобный пост?
Наталья давайте вот эту тему с навигацией разберём, чтобы на стрелках отображался заголовок статей, даже коды есть, только вот втыкаешь по инструкции, а толку нет http://eutectics.blogspot.ru/2015/01/add-next-previous-post-navigation-in-blogger.html
К сожалению ваш способ у меня не работал, тема Эмпорио, включился только этот вариант https://support.google.com/blogger/forum/AAAAY7oIW-wGLzTTPsdO2I?msgid=1QzZnx_EBAAJ
может кому то еще поможет
Да, это старая статья. Этот способ не подходит для самых свежих тем Blogger. Спасибо за дополнение.