Итак, начнем с основных селекторов к которым можно добавить 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, соответственно.
Для стилизации ссылок можно использовать различные варианты оформления - цвет, градиент, изображения с анимацией и спрайты.
В шаблоне, по умолчанию эти селекторы и правило стилей для них уже записаны, они находятся ниже строки:
Вот первый пример готового стиля, в котором все ссылки оформлены одинаково и с помощью CSS градиента: /* Accents
---------------------------------------------- */
Если вы прописываете селекторы с стилем самостоятельно, лучше закомментировать(/*...*/) уже имеющиеся, чтобы не возникало противоречий стилей.---------------------------------------------- */
.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 будет примерно таким: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;
}
Второй пример, с применением спрайтов с анимацией(.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWMx8S2GH6Kh4qYuPBdGh_X5rpBTDZAQt65L1CM1YW2jXgxnmyk0qDhcnDRCW7m5WAVPBSzKpUDJSBzbo0pfUMULWGd58zhHgcZ-7yHYsa8EG7N6AvyGSs7np6QQGNapNcPyleMDJK-mS7/s1600/vpered.gif');
}
a.blog-pager-newer-link {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrjUe3m9mOcCAQoXnusPtniaiUvBQGCaxY3dalhr9vuS-OrM_oetjqAuwleCyR6IgdxXYXsukliclg1zpie6nL9ZcgcQ2IIQTylAV01Hwp7e5XAMm0gfM8PVpa4TI805sAWQwerYs-qwYB/s1600/nazad.gif');
}
a.home-link {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6UmEcQ331SxcSQ182547qBy1Cs4rA0jE1ApKYkqOAheZ_jw0Sa6SFLcM2JrRaaSUCPaGO79YqBDrf3h4x0fsUqwzhY8ipsLM9FY9tFqtdykU37vUMNy5vuo0M0S8fuIWQQazGgpbpLED/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;
}
Так будет выглядеть блок с этим стилем: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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWMx8S2GH6Kh4qYuPBdGh_X5rpBTDZAQt65L1CM1YW2jXgxnmyk0qDhcnDRCW7m5WAVPBSzKpUDJSBzbo0pfUMULWGd58zhHgcZ-7yHYsa8EG7N6AvyGSs7np6QQGNapNcPyleMDJK-mS7/s1600/vpered.gif');
}
a.blog-pager-newer-link {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrjUe3m9mOcCAQoXnusPtniaiUvBQGCaxY3dalhr9vuS-OrM_oetjqAuwleCyR6IgdxXYXsukliclg1zpie6nL9ZcgcQ2IIQTylAV01Hwp7e5XAMm0gfM8PVpa4TI805sAWQwerYs-qwYB/s1600/nazad.gif');
}
a.home-link {
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm6UmEcQ331SxcSQ182547qBy1Cs4rA0jE1ApKYkqOAheZ_jw0Sa6SFLcM2JrRaaSUCPaGO79YqBDrf3h4x0fsUqwzhY8ipsLM9FY9tFqtdykU37vUMNy5vuo0M0S8fuIWQQazGgpbpLED/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;
}
В итого имеем вот такой результат:#blog-pager-older-link {
float: left;
}
/*идентификатор контейнера ссылки .blog-pager-newer-link*/
#blog-pager-newer-link {
float: right;
}
Дальше по теме
Хороший мануал. Когда менял кнопки, опирался на этот пост!
ОтветитьУдалитьСпасибооо
ОтветитьУдалитьАлександр Громов., Спасибо, за статью!
ОтветитьУдалитьЗдравствуйте!
ОтветитьУдалитьСкажите пожалуйста, как изменить цвет стрелочек? Или как самой сделать дизайн? Я не профи :)
Заранее спасибо!
Загрузить другую картинку или изменить в специальной программе эту :)
УдалитьО, как здорово, что я Вас нашла! Я, можно сказать, нахожусь в детском садике (относительно всей этой премудрости), но любопытна. Буду изучать. По этой теме вопрос: на фоне ссылок просматривается Ваш заголовок, он хорош, но хочется свой :-) Кроме того, хочется "изучить" и применить кое-что из дизайна правой колонки, например, раздел "Дополнительно" (скрыть ярлыки и т.п.) Что почитать у Вас об этом?
ОтветитьУдалитьПолупрозрачная надпись "MagentaWAVE" на картинках, это всего лишь водяной знак на данном изображении, так сказать, защита от воришек, чтобы наглядное пособие не тырили, на это обращать внимания не стоит.
УдалитьПро вкладки в боковой колонке есть статья :
http://www.magentawave.com/2013/02/tabs-in-sidebar-on-blogger.html
Ясно, спасибо! Статью в сайдбаре прочла, но, боюсь, дела там сложные. Страшно даже браться, но , возможно, доберусь. Хорошо было бы, если б уже в шаблоне (в Дизайнере) это было предусмотрено...
УдалитьКогда вы проделаете манипуляции описанные в ней, то это появится в шаблоне :) Поверьте это лишь кажется сложным, главное не забывать сохранить резервную копию шаблона перед внесением изменений.
УдалитьПро то, как поменять местами следующее и предыдущее, только у Вас есть. Внедрил у себя в блоге сразу с небольшими модификациями, конечно. Спасибо Вам большое.
ОтветитьУдалитьДобрый день, надеюсь Вы мне поможете. У меня проблема с количеством постов на главной странице. Когда я добавляю новое сообщение с изображениями, последнее сообщение пропадает (скрывается за пределы). Такое впечатление что нехватает места на странице. В дизайне сообщения указано более 30 сообщений и в коде Html http://clip2net.com/s/j0rbgj . Шаблон который я использевал для основы сайта http://btemplates.com/2010/blogger-template-dione/ .А вот и сам сайт http://www.logik.com.ua/ . Зарание благодарен!
ОтветитьУдалитьУ меня почему-то отображается только главная страница и предидущие. И можно ли изменить их название?
ОтветитьУдалитьНа главной так и будет, ссылка на "следующую" страницу появится на "предыдущей". Изменить название можно, найдите в шаблоне :
Удалить" <a class='blog-pager-older-link' expr: .... " (естественно без кавычек и многоточия)
и впишите в ссылку любое название вместо &rsaquo;
Привет.
ОтветитьУдалитьПри фильтрации по Label всегда висит кнопка "Предыдущие", независимо от того сколько сообщений с этим Label.
В итоге если с Label только один пост, то ниже висит кнопка "Предыдущие", которая ведет на пустую страницу.
Нет мыслей как избавиться от кнопки "Предыдущие" при фильтрации по Label?
Если уж совсем избавиться, то только так
Удалить<b:if cond='!data:blog.searchLabel'>
<!-- здесь касок кода который включает blog-pager (в шаблоне icludable prevnext)-->
</b:if>
Спасибо, все замечательно!
ОтветитьУдалитьДобрый день! Подскажите, пожалуйста, возможно ли убрать с главной страницы блога цикличную ссылку на саму себя в навигации (переходы по страницам): оставить только следующее и предыдущее, а на остальных страницах, чтобы ссылка на главную оставалась. Или хотя бы вообще убрать эту надпись в переходе "главная страница". Но лучше, конечно, чтобы эту ссылку убрать только с главной, чтобы максимально избавиться от цикличных ссылок на странице. Заранее, спасибо.
ОтветитьУдалитьДа, такое можно сделать. Обратите внимание на эту статью:
Удалитьhttp://www.magentawave.com/2012/10/most-popular-conditions-tags.html
Большое спасибо - все оказалось проще, чем я думала)
Удалить