Красиво оформляем ссылку "Дальше »"

MoreДумаю, многие пользователи платформы Blogger (Blogspot) знают о ссылке "Дальше »" (в английской версии "Read more »"). Она появляется при использовании специального тэга <!--more-->. Тэг этот можно прописать как вручную, так и воспользоваться кнопкой "Вставить ссылку "Дальше" в WYSIWYG-редакторе, используемом в Blogger для публикации статей. Применение этого тэга обусловлено желанием автора блога существенно обрезать статью на главной странице, оставив ссылку на полную статью. Подобное полезно, чтобы излишне не растягивать интерфейс главной страницы полновесными статьями.

Опция, на мой взгляд, очень нужная. Но вот ее оформление подкачало... Для начала хочу напомнить, что традиционная манера чтения у большинства народов слева направо, сверху вниз. Посему "завершающую точку", коей является ссылка "Дальше »", логичнее всего было бы расположить в правом нижнем углу публикуемого на главной странице отрывка статьи. Тем не менее, разработчики решили поместить ее в левом углу. Еще одним неудачным решением было оформить "Дальше »" в виде простой, ничем не примечательной ссылки. Порой, читатель ее просто не замечает, и полагает, что перед ним вся статья. Что ж, исправим эти упущения разработчиков - зададим свой, более грамотный стиль оформления для этой ссылки.

Далее

В качестве наглядного пособия я приведу стиль оформления, который сам использую в этом блоге. Оформил я ссылку "Дальше »", как вы видите на скриншоте, в виде своеобразной кнопки. Хочу сразу, предвосхищая вопросы, уточнить, что если вы в настройках смените название для этой кнопки, например, на "Продолжение статьи", это никак не повредит нижепредставленному стилю - он автоматически адаптируется под новый текст.
/* Accents
----------------------------------------------- */
.jump-link {
   text-align: right; /* привязка текста к правому краю кнопки */
   float: right; /* привязка кнопки к правому краю статьи */
   margin: 5px 17px 0 0; /* отступы кнопки от внешних элементов */
}

.jump-link a {
   padding: 4px 5px; /* отступ текста внутри кнопки от ее краев */
   background: #1e8fce; /* основной цвет фона кнопки */
   color: #fff; /* цвет шрифта, используемого в кнопке */
   text-decoration: none; /* отсутствие у ссылки подчеркивания */
   font-size: 12px; /* размер текста кнопки */
   text-shadow: 0 1px 0 #2f84a1; /* толщина и цвет тени текста кнопки */
}

.jump-link a:hover {
   background: #86accc; /* цвет фона кнопки при наведении курсора */
}
Теперь, предварительно доработав предложенный мной стиль под себя, идем в редактор шаблона и добавляем этот код в блок, начинающийся с "/* Accents". Вуаля!

Комментариев: 54

  1. Здравствуйте! Спасибо большое за статью. Уточните пожалуйста
    margin: 5px 17px 0 0; /* отступы кнопки от внешних элементов */
    какая цифра за что отвечает. Менять положение "методом тыка" страшновато :)

    ОтветитьУдалить
    Ответы
    1. И в margin, и в padding, когда указаны все 4 отступа, они выстроены по часовой стрелке, начиная с верхнего края. То есть здесь отступ сверху 5 пикселей, справа - 17 пикселей, снизу и слева - нулевые.

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

      Удалить
  2. Еще раз большое спасибо! Просто я абсолютно далекий от программирования человек и исправлять то, что я могу случайно испортить, рядом некому

    ОтветитьУдалить
    Ответы
    1. Ничего страшного. Если что - обращайтесь :-D

      Удалить
  3. sunctorus - у меня вопрос: если нету строчки "/* Posts" что при этом делать?

    ОтветитьУдалить
    Ответы
    1. А строчка "]]>" есть? Если есть, тогда можно ориентироваться на нее. Только тут уже не под ней публиковать, а НАД НЕЙ.

      Удалить
  4. Спасибо все получилось, вот только криво так что придется поискать ещё.

    ОтветитьУдалить
    Ответы
    1. Что именно криво? В чем это выражается? И на каком браузере?

      Удалить
  5. Здравствуйте! Большущее спасибо за статью, все хорошо работает. НО сейчас добавила виджет похожих статей (вот этот http://www.linkwithin.com/learn?ref=widget) и он тоже становится того же цвета, что кнопка "Дальше". Можно как-то этого избежать?

    ОтветитьУдалить
    Ответы
    1. Я задействовал CSS-классы, встроенные в стандартные шаблоны. Видимо, виджет, по каким-то своим причинам, тоже их использует.

      Можно попробовать обойти эту проблему. Поискать в шаблоне код:

      [q][div class='jump-link']
      [a expr:href='data:post.url + "#more"' expr:title='data:post.title'][data:post.jumpText/][/a]
      [/div][/q]

      ...и дополнить его до, к примеру, такого:

      [q][div class='jump-link']
      [div class='more-link']
      [a expr:href='data:post.url + "#more"' expr:title='data:post.title'][data:post.jumpText/][/a]
      [/div][/div][/q]

      После этого можно будет переориентировать описанное в моей статье с класса jump-link на класс more-link.

      * Квадратные скобки, разумеется, замените треугольными.
      * За смайликами скрывается двоеточие, за которым следует латинское "p". Не рассчитывал я, что в комментариях буду код писать - вот и не учел этот нюанс с автозаменой.

      Удалить
  6. Урааа, получилось!!! Спасибо огромное!!!
    P.S.: веселый код со смайликами, настроениеподнимательный)))

    ОтветитьУдалить
    Ответы
    1. Рад был помочь и поднять настроение :-p

      Удалить
  7. Анонимный27 мая 2012 г., 17:22

    Здравствуйте, не могу найти блок "/* Accents. Не подскажите где он находится?

    ОтветитьУдалить
    Ответы
    1. В верхней части кода шаблона, там где задаются все CSS-стили.

      Удалить
  8. а можно ли картинку как-то вставить вместо этой колонки?

    ОтветитьУдалить
    Ответы
    1. В смысле, "вместо этой колонки"? Под колонкой Вы подразумеваете прямоугольник с текстом? Да, разумеется можно. Можно воспользоваться свойством background-image.

      Удалить
  9. Здравствуйте!
    Как сделать так, чтобы после нажатия на кнопку "Дальше" открывалась вся страница новости, а не продолжение после анонса?
    Спасибо.

    ОтветитьУдалить
    Ответы
    1. Открываем редактор шаблона (Дизайн->Изменить HTML), ставим галочку напротив "Расширить шаблоны виджета", после чего находим этот код:
      <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

      ...и удаляем подсвеченный код.

      P.S. Под смайликом :р прячется двоеточие и латинское р.

      Удалить
    2. Большое спасибо!

      Всё сработало.

      Удалить
  10. Хоть убейте :wall: нет у меня такой строки "/* Accents...что делать,а?!

    ОтветитьУдалить
    Ответы
    1. Ничего страшного. Главное, чтобы Вы разместили код над строкой "]]>".

      Удалить
  11. Спасибо за оперативные ответы..пошла искать!И еще вопросик:кнопка Дальше у меня стоит вправом нижнем углу..вроде как полагается..но стоит она после Похожих статей...так и просится, чтоб ее подняли чуть вверх..скажите я на правильном пути?или мне надо менять что то другое?

    ОтветитьУдалить
    Ответы
    1. Если честно, то я у Вас в блоге не вижу "Похожих статей".

      Удалить
  12. Как не видите??Ну они может не похожи между собой))У меня установлен виджет linkwithin.

    ОтветитьУдалить
    Ответы
    1. [img]http://i25.fastpic.ru/big/2012/1010/59/6a11a3795dbe2a30946430846b0ee259.jpg[/img]
      И где он здесь?

      Удалить
  13. Так я хочу,что б это было сразу под фото:-[

    ОтветитьУдалить
  14. Так и не понял, где там linkwithin... А как переместить ссылку "Дальше" выше, я Вам на пальцах не смогу объяснить. Тут надо смотреть непосредственно шаблон.

    ОтветитьУдалить
  15. Этот комментарий был удален автором.

    ОтветитьУдалить
  16. Здравствуйте! У меня своя кнопка дальше как её вставить в шаблон и вручную
    так как я хочу менять кнопки под каждую статью ставить новую, возможно ли это

    ОтветитьУдалить
    Ответы
    1. Откуда ж мне знать, как вставить Вашу кнопку? Вы ее разработали - Вам и карты в руки.

      Механизма смены вида кнопки в зависимости от вида статьи в механизме Blogger не предусмотрено. Теоретически, это можно организовать при помощи скриптов в тексте самой статьи - это да. Но как это реализовать автоматом в движке Blogger и исходя из каких критериев, мне неизвестно.

      Удалить
  17. Подскажите, пожалуйста, а то что русским написано (/* привязка текста к правому краю кнопки */ и т.п.) тоже вставлять? или это вы написали, что бы нам было понятно что за что отвечает?

    ОтветитьУдалить
    Ответы
    1. Нет, этот текст необязателен. Это мои пояснения, чтобы Вы понимали, какая строка за что отвечает и могли адаптировать код под свое видение подобной кнопки.

      Удалить
  18. Я не нашла не "/* Accents... не "]]>"
    С дужками нашла только вот такое
    ]]>
    ]]>
    // ]]>

    Подскажите, пожалуйста, что еще можно сделать в такой ситуации?

    ОтветитьУдалить
    Ответы
    1. Какая разница между тем, что Вы, типа, не нашли и первым и вторым пунктом того,что нашли?

      Удалить
  19. Спасибо! разобралась и все работает :thanks:
    Подскажите, пожалуйста, а как у себя на блоге разместить окошечки, после каждого поста "Похожие сообщения" или их еще называют "You might also like", как тут, например?

    ОтветитьУдалить
    Ответы
    1. Это специальный гаджет. На страницах моего блога он не обсуждался.
      Поищите в сети!

      Удалить
  20. Спасибо! попробую поискать

    ОтветитьУдалить
  21. Я ранее установила номерацию страниц вместо "Главная страница" и "Предыдущая" внизу страницы. С добавлением кода кнопки "Дальше" нумерация слетела. Не подскажите в чём может быть причина и как это устранить?

    ОтветитьУдалить
    Ответы
    1. Тут только в угадайку играть. Скриптов, добавляющих нумерацию страниц в Blogger с десяток. Что и с чем конфликтует я так понять не могу. Могу только предположить, что какой-то из классов, который я задействовал при создании кнопки "Дальше" используется и в том скрипте...

      Удалить
  22. Здравствуйте. А где можно поменять надпись "Дальше »" на "Продолжение статьи" или свой текст ?
    Это только при написании сообщения нужно каждый раз переходить в HTML и "more" менять на что-то другое ? (Пробовала ставить туда другой текст, но ничего не отображается..)

    ОтветитьУдалить
    Ответы
    1. Это стандартная опция Blogger. Зайдите в настройки блога. Там Дизайн -> Сообщения блога -> Изменить -> Текст ссылки на страницу сообщения.

      Удалить
  23. Под тегом Дальше ведь прячется название статьи. Я повторила его открыто - это лишний раз ключевое слово употребить, не сочиняя его в тексте. Но эта строчка у меня очень мелкая. Не подскажете, как увеличить шрифт? Спасибо!

    ОтветитьУдалить
    Ответы
    1. Посмотрите на стиль .jump-link a. Там есть параметр отвечающий за размер шрифта. Воспользуйтесь этой конструкцией.

      Удалить
  24. А у меня вообще не получилось ничего(( "Расширить шаблоны виджета" - у меня нету. Acces тоже нету, есть // ]]>, над ней я код и вставила, но кнопка осталась на месте и такой как была. Подскажите в чем может быть проблема?

    ОтветитьУдалить
    Ответы
    1. "Расширить шаблоны виджета" в современном варианте уже отсутствует. Когда писалась статья, оно было.

      Судя по тому, что я вижу в Вашем блоге, Вы все-таки сумели воспользоваться моей инструкцией. Вот и хорошо :-)

      Удалить
  25. Как и все подобные варианты с Linkwithin не работает.)

    ОтветитьУдалить
    Ответы
    1. Ну, я и не гарантировал совместимость данного метода со сторонними виджетами.

      Удалить
  26. Спасибо помогло, догадалась в поиске набрать more* и вставила ниже класс!

    ОтветитьУдалить
  27. Спасибо огромное за статью! Кнопку вставила! Цвет ее поменяла! День удался! Пусть у вас будет много много подписчиков!

    ОтветитьУдалить
  28. Забыла добавить, если кому-то захочется чтобы текст в кнопке был написан "жирным шрифтом" (как мне) то надо добавить еще одну стоку
    font-weight: 600;
    под строкой font-size: 14px;

    ОтветитьУдалить

Хотите подписать свой комментарий, но у вас нет аккаунта? Выберите в выпадающем списке Имя/URL.
Вы сможете вписать свои имя или ник. Поле для указания URL можно оставить пустым.

Тэги, допустимые в комментариях