Изменить вид страничных переходов Blogger(Blogspot)

Постраничные переходы в Blogger(Blogspot)Чего только не вытворяют с постраничной навигацией в Blogger-блогах, "прикручивая" всевозможные, громоздкие, часто не нужные, виджеты и скрипты. А между тем, при помощи CSS можно до неузнаваемости изменить блок переходов между сообщениями и ссылки "Следующие", "Главная страница" и "Предыдущие". Придать ей более респектабельный вид, соответствующий стилю вашего блога. В данной статья приведен список основных селекторов блока и примеры готовых стилей для стандартного BlogPager в блоге на Blogger.
  Итак, начнем с основных селекторов к которым можно добавить CSS, их всего четыре:
- .blog-pager - весь блок постраничных переходов, внутри которого и находятся ссылки.
Если нужно задать одинаковый стиль всем ссылкам блока, можно использовать такую запись: .blog-pager a, но это не помешает, при необходимости, добавить дополнительные элементы к каждой ссылке в отдельности по их собственным селекторам.
- .blog-pager-older-link - ссылка "Предыдущее".
- .blog-pager-newer-link - ссылка "Следующие".
- .home-link - ссылка "Главная страница".
  В некоторых случаях лучше использовать следующие варианты записи селекторов:
- a.blog-pager-older-link;
- a.blog-pager-newer-link;
- a.home-link, соответственно.
  Для стилизации ссылок можно использовать различные варианты оформления - цвет, градиент, изображения с анимацией и спрайты.
В шаблоне, по умолчанию эти селекторы и правило стилей для них уже записаны, они находятся ниже строки:
/* Accents
---------------------------------------------- */
Если вы прописываете селекторы с стилем самостоятельно, лучше закомментировать(/*...*/) уже имеющиеся, чтобы не возникало противоречий стилей.
  Вот первый пример готового стиля, в котором все ссылки оформлены одинаково и с помощью CSS градиента:
.blog-pager {
 background: #fcfcfc;
 border: 2px solid #ccc;
 border-radius: 3px;
 padding: 5px;
 margin: 0px;
 height: auto; /*указываем что высота блока определяется автоматически*/
 width: 100%;
}
.blog-pager a {
 display:inline-block;
 background: #f7f7f7;
 background: -moz-linear-gradient(top, #f7f7f7 10%, #cecece 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#f7f7f7), color-stop(100%,#cecece));
 background: -webkit-linear-gradient(top, #f7f7f7 10%,#cecece 100%);
 background: -o-linear-gradient(top, #f7f7f7 10%,#cecece 100%);
 background: -ms-linear-gradient(top, #f7f7f7 10%,#cecece 100%);
 background: linear-gradient(to bottom, #f7f7f7 10%,#cecece 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#cecece',GradientType=0 );
 border: 1px solid #666;
 border-radius: 3px;
 font: normal normal 13px/20px Arial, sans-serif;
 color: #1c1c1c;
 padding: 5px 10px;
/*
в данном случаи, задавая одинаковые отступы сверху и снизу,
выравниваем элемент по вертикали
*/

 margin-top: 15px;
 margin-bottom: 15px;
 width: auto;
}
.blog-pager a:hover {
 background: #f7fbff;
 background: -moz-linear-gradient(top, #f7fbff 10%, #99dbff 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#f7fbff), color-stop(100%,#99dbff));
 background: -webkit-linear-gradient(top, #f7fbff 10%,#99dbff 100%);
 background: -o-linear-gradient(top, #f7fbff 10%,#99dbff 100%);
 background: -ms-linear-gradient(top, #f7fbff 10%,#99dbff 100%);
 background: linear-gradient(to bottom, #f7fbff 10%,#99dbff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbff', endColorstr='#99dbff',GradientType=0 );
 border: 1px solid #449ed6;
 text-decoration: none;
 color: #000;
}
  Итог применения данного CSS будет примерно таким:
Измененный блок постраничной навигации
Второй пример, с применением спрайтов с анимацией(.gif) и без, для каждой ссылки используется своя картинка:
.blog-pager {
 background: #fcfcfc;
 border: 2px solid #ccc;
 border-radius: 3px;
 padding: 5px;
 margin: 0px;
 height: auto;
 width: 100%;
}
a.blog-pager-older-link,
a.blog-pager-newer-link,
a.home-link {
 display: inline-block;
 color: transparent;
 font-size: 0;
 margin-top: 5px;
 margin-bottom: 5px;
}
a.blog-pager-older-link,
a.blog-pager-newer-link {
 height: 50px;
 width: 120px;
}
a.blog-pager-older-link {
 background-image: url('http://1.bp.blogspot.com/--7aWCC7P_VI/T9Ls6Wn5ppI/AAAAAAAABs4/jHCTa8ggEg0/s1600/vpered.gif');
}
a.blog-pager-newer-link {
 background-image: url('http://3.bp.blogspot.com/-P4OaHJhPnDk/T9Ls4Anpi6I/AAAAAAAABsw/u_h3gFh8ig0/s1600/nazad.gif');
}
a.home-link {
 background-image: url('http://1.bp.blogspot.com/-6XALDChfhps/UUoxh9PZ1MI/AAAAAAAAFgY/igznTUmu6og/s1600/go-topo.png');
 height: 50px;
 width: 48px;
}
a.blog-pager-older-link:hover ,
a.blog-pager-newer-link:hover {
 background-position: -120px 0;
}
a.home-link:hover {
 background-position: -48px 0;
}
a.blog-pager-older-link:hover,
a.blog-pager-newer-link:hover,
a.home-link:hover {
 text-decoration: none;
}
  Так будет выглядеть блок с этим стилем:
Измененный блок постраничной навигации
  Ссылки "Следующие" и "Предыдущие" сделаны с приминием анимированного спрайт-изображения, при наведении стрелка, если так можно сказать, оживает :).
  Если будете применять данный стиль не забудьте перегрузить изображения к себе и брать по своей ссылке.

Как поменять местами ссылки "Следующие" и "Предыдущие"

  Иногда возникает желание изменить расположение ссылок в блоке постраничной навигации, так чтобы "Следующие" было справа, а "Предыдущие" слева, оно и понятно, так как читаем и пишем мы пока что слева направо, то такое желание вполне логично.
  Сделать это можно также, используя лишь CSS. Код добавляется отдельно и будет таким:
/*идентификатор контейнера ссылки .blog-pager-older-link*/
#blog-pager-older-link {
 float: left;
}
/*идентификатор контейнера ссылки .blog-pager-newer-link*/
#blog-pager-newer-link {
 float: right;
}
  В итого имеем вот такой результат:
Поменять местами ссылки "Следующие" и "Предыдущие"
Дальше по теме

13 комментариев:

  1. Хороший мануал. Когда менял кнопки, опирался на этот пост!

    ОтветитьУдалить
  2. Человек21.09.13, 17:14

    Александр Громов., Спасибо, за статью!

    ОтветитьУдалить
  3. Здравствуйте!
    Скажите пожалуйста, как изменить цвет стрелочек? Или как самой сделать дизайн? Я не профи :)
    Заранее спасибо!

    ОтветитьУдалить
    Ответы
    1. Загрузить другую картинку или изменить в специальной программе эту :)

      Удалить
  4. О, как здорово, что я Вас нашла! Я, можно сказать, нахожусь в детском садике (относительно всей этой премудрости), но любопытна. Буду изучать. По этой теме вопрос: на фоне ссылок просматривается Ваш заголовок, он хорош, но хочется свой :-) Кроме того, хочется "изучить" и применить кое-что из дизайна правой колонки, например, раздел "Дополнительно" (скрыть ярлыки и т.п.) Что почитать у Вас об этом?

    ОтветитьУдалить
    Ответы
    1. Полупрозрачная надпись "MagentaWAVE" на картинках, это всего лишь водяной знак на данном изображении, так сказать, защита от воришек, чтобы наглядное пособие не тырили, на это обращать внимания не стоит.

      Про вкладки в боковой колонке есть статья :
      http://www.magentawave.com/2013/02/tabs-in-sidebar-on-blogger.html

      Удалить
    2. Ясно, спасибо! Статью в сайдбаре прочла, но, боюсь, дела там сложные. Страшно даже браться, но , возможно, доберусь. Хорошо было бы, если б уже в шаблоне (в Дизайнере) это было предусмотрено...

      Удалить
    3. Когда вы проделаете манипуляции описанные в ней, то это появится в шаблоне :) Поверьте это лишь кажется сложным, главное не забывать сохранить резервную копию шаблона перед внесением изменений.

      Удалить
  5. Про то, как поменять местами следующее и предыдущее, только у Вас есть. Внедрил у себя в блоге сразу с небольшими модификациями, конечно. Спасибо Вам большое.

    ОтветитьУдалить
  6. Добрый день, надеюсь Вы мне поможете. У меня проблема с количеством постов на главной странице. Когда я добавляю новое сообщение с изображениями, последнее сообщение пропадает (скрывается за пределы). Такое впечатление что нехватает места на странице. В дизайне сообщения указано более 30 сообщений и в коде Html http://clip2net.com/s/j0rbgj . Шаблон который я использевал для основы сайта http://btemplates.com/2010/blogger-template-dione/ .А вот и сам сайт http://www.logik.com.ua/ . Зарание благодарен!

    ОтветитьУдалить
  7. У меня почему-то отображается только главная страница и предидущие. И можно ли изменить их название?

    ОтветитьУдалить
    Ответы
    1. На главной так и будет, ссылка на "следующую" страницу появится на "предыдущей". Изменить название можно, найдите в шаблоне :
      " <a class='blog-pager-older-link' expr: .... " (естественно без кавычек и многоточия)
      и впишите в ссылку любое название вместо &amp;rsaquo;

      Удалить

Следующее Предыдущее

BestProject