Переключатель страниц для blogger

Во время реализации официального блога сайта blog.arxweb.net, возникла задача сделать навигацию по страницам, отличающуюся от стандартных blogger-ссылок "главная страница", "предыдущее", "следующее". Результат реализации навигации по страницам в виде полосы с нумерацией страниц представлен на рисунке внизу справа или же можно просто перейти на блог и посмотреть вживую.

Для реализации был использован скрипт paginator300, о котором детально можно почитать на сайте автора. Версий использования этого скрипта в интернете было найдено достаточно много, но все как-то не устраивали по разным причинам, поэтому пришлось вносить небольшие изменения для адаптации. Тем более, что собирать рабочие версии пришлось по частям с разных сайтов. Здесь же будет выложен и описан полный комплект для установки. Теперь конкретно и последовательно о том, как установить приведенную на картинке систему постраничной навигации.

Сразу подключим стиль css для переключателя страниц. Для этого в стандартном шаблоне находим строчку с кодом:

]]>

/* Paginator-Navigation ===================================== */
.paginator {
 margin-top:10px;
 font-size:1em;
}
.paginator table {
 border-collapse:collapse;
 table-layout:fixed;
 width:100%;
 margin-bottom:0px;
}
.paginator table td {
 padding:0;
 white-space:nowrap;
 text-align:center;
}
.paginator span {
 display:block;
 padding:3px 0;
 color:#fff;
}
.paginator span strong,
.paginator span a {
 padding:2px 6px;

}
.paginator span strong {
 background:#ff6c24;
 font-style:normal;
 font-weight:normal;
}
.paginator .scroll_bar {
 width:100%; height:20px;
 position:relative;
 margin-top:10px;
}
.paginator .scroll_trough {
 width:100%; height:3px;
 background:#ccc;
 overflow:hidden;
}
.paginator .scroll_thumb {
 position:absolute;
 z-index:2;
 width:0; height:3px;
 top:0; left:0;
 font-size:1px;
 background:#363636;
}
.paginator .scroll_knob {
 position:absolute;
 top:-5px; left:50%;
 margin-left:-10px;
 width:20px; height:20px;
 overflow:hidden;
 background:url(.../slider_knob.gif) no-repeat 50% 50%;
 cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
 position:absolute;
 z-index:1;
 top:0; left:0;
 width:0; height:3px;
 overflow:hidden;
 background:#ff6c24;
}

.fullsize .scroll_thumb {
 display:none;
}
.paginator_pages {
 width:600px;
 text-align:right;
 font-size:0.8em;
 color:#808080;
 margin-top:-10px;
}
]]>

Обратите внимание на строчку с кодом

 background:url(.../slider_knob.gif) no-repeat 50% 50%;

Здесь вам надо указать путь к картинке, которую предварительно следует загрузить куда-то, даже на ваш блог можно. Саму картинку можно взять тут. Теперь надо в код шаблона добавить еще вызов скриптов. Размещать код следует в конце шаблона перед закрывающим тегом: body

А теперь сам код:

Здесь тоже обратите внимание на путь, который вам следует прописать к файлам скриптов. Кроме того, настройте количество страниц: postperpage=3;, которое должно совпадать с числом страниц показываемых на главной в вашем блоге (настройки blogger). Можно поменять и количество показываемых страниц в списке numshowpage=6;. И в завершение, осталось только привести полный комплект файлов для установки. Cкачать архив (zip), в котором находятся два скрипта, файл css, а также картинка можно здесь. Удачной установки.

Оценка

+18

31.07.2013Рубрика: практика Просмотров - 2985 Получить ссылку