Как сделать пронумерованную навигацию страниц в Blogger

Вы все еще задаетесь вопросом, как большинство популярных блогов на Blogger используете пронумерованную навигацию страниц, вместо стандартных кнопок навигации с надписями «Предыдущие и Следующие» в нижней части каждой страницы архивов Blogger?

Как сделать пронумерованную навигацию страниц в Blogger?

Я сам использую на своем блоге постраничную навигацию довольно долгое время, и по моему опыту, это делает навигацию блога в 10 раз лучше, чем стандартные кнопки с надписями «Предыдущие и Следующие». Она более удобна для пользователей, привлекательна и оптимизирована. Большинство создателей шаблонов Blogger заранее добавляют постраничную навигацию, но если в вашем шаблоне стоит стандартная навигация, этот пост именно для вас. В этой статье я покажу вам, как добавить пронумерованную навигацию страниц на свой блоггер блог.

Что такое нумерованная постраничная навигация?

Пронумерованная постраничная навигация – это меню навигации с номерами, которая обычно присутствует в нижней части страницы, чтобы показывать посетителю весь архив блога. Он делит весь ваш блог на множество страниц, как страницы в книги. Пользователи могут просто перемещаться по страницам через числа 1, 2, 3, 4 и т. д. Я предлагаю посмотреть скриншот ниже, так чтобы вы смогли легко понять, о чем идет речь.

Навигация страниц в Blogger

Как добавить пронумерованную постраничную навигацию в Blogger

Первое что нужно сделать, это войти в свой аккаунт Google. После входа в систему перейдите в панель инструментов Blogger >> Шаблон >> Изменить HTML и найти тег скина ]]></b:skin>. После нахождения скин тега, прямо над ней вставьте следующий фрагмент кода.

.showpageNum a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpage a {
background: #02ab68;
padding: 5px;
padding-left: 10px;
border: 1px solid #b9b9b9;
padding-right: 10px;
margin-right: 5px;
color: #000;
font-weight: bold;
}
.showpageArea {
float: left;
}
.feed-links {
display: none;
}
.showpageArea a {
float: left;
font-size: 15px;
color: #fff!important;
padding-left: 15px;
padding-right: 15px;
}
.showpagePoint {
float: left;
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
}
.showpageArea a {
text-decoration: none;
}
.showpageArea {
float: left;
width: 363px;
margin-top: 10px;
}

Теперь, как только таблица стилей была добавлена в шаблон, нужно добавить JavaScript код, который превратит обычный кнопки на страницах «Предыдущие и Следующие» в надежную и удобную пронумерованную навигацию страниц. Найдите окончание тега </body> и только выше него вставьте следующий JavaScript код. Как только все будет сделано, жмем кнопку «Сохранить шаблон», расположенную на верху экрана.

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->

Поздравляю: Вы успешно добавили постраничную навигацию в Blogger. Сейчас сделайте предварительный просмотр своего блога, чтобы увидеть удивительную навигацию в действии. А с небольшой модификацией CSS, каждый сможет настроить его под свой блог, изменив форму, цвет и. д. как вам нужно.

Надеюсь, что этот простой урок, помог вам узнать, как сделать пронумерованную навигацию страниц в блоггере. Если у кого-то сложности с установкой, то не стесняйтесь задавать свои вопросы в комментариях ниже.

2 Комментариев к “Как сделать пронумерованную навигацию страниц в Blogger

  1. Андрей

    а если у меня блог на вп, как там сделать? плагин у меня почему-то не ставит, а кодом я попробовал, но нумерация получилась без кнопок, просто цифры. как бы эти циферьки в кнопулечки запихнуть, не подскажешь?

    1. Садыков ИльшатСадыков Ильшат Post author

      не совсем тебя понял, но как ты наверное видел у меня цифры:), а так только через код и можно это сделать, либо надо приобрести премиум плагин.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>