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

В качестве наглядного пособия я приведу стиль оформления, который сам использую в этом блоге. Оформил я ссылку "Дальше »", как вы видите на скриншоте, в виде своеобразной кнопки. Хочу сразу, предвосхищая вопросы, уточнить, что если вы в настройках смените название для этой кнопки, например, на "Продолжение статьи", это никак не повредит нижепредставленному стилю - он автоматически адаптируется под новый текст.
/* 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". Вуаля!
Здравствуйте! Спасибо большое за статью. Уточните пожалуйста
ОтветитьУдалитьmargin: 5px 17px 0 0; /* отступы кнопки от внешних элементов */
какая цифра за что отвечает. Менять положение "методом тыка" страшновато :)
И в margin, и в padding, когда указаны все 4 отступа, они выстроены по часовой стрелке, начиная с верхнего края. То есть здесь отступ сверху 5 пикселей, справа - 17 пикселей, снизу и слева - нулевые.
УдалитьИ не бойтесь экспериментировать. Вы же не делаете ничего, что бы нельзя было вернуть к исходному виду :-)
Еще раз большое спасибо! Просто я абсолютно далекий от программирования человек и исправлять то, что я могу случайно испортить, рядом некому
ОтветитьУдалитьНичего страшного. Если что - обращайтесь :-D
Удалитьsunctorus - у меня вопрос: если нету строчки "/* Posts" что при этом делать?
ОтветитьУдалитьА строчка "]]>" есть? Если есть, тогда можно ориентироваться на нее. Только тут уже не под ней публиковать, а НАД НЕЙ.
УдалитьСпасибо все получилось, вот только криво так что придется поискать ещё.
ОтветитьУдалитьЧто именно криво? В чем это выражается? И на каком браузере?
УдалитьЗдравствуйте! Большущее спасибо за статью, все хорошо работает. НО сейчас добавила виджет похожих статей (вот этот http://www.linkwithin.com/learn?ref=widget) и он тоже становится того же цвета, что кнопка "Дальше". Можно как-то этого избежать?
ОтветитьУдалитьЯ задействовал 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". Не рассчитывал я, что в комментариях буду код писать - вот и не учел этот нюанс с автозаменой.
Урааа, получилось!!! Спасибо огромное!!!
ОтветитьУдалитьP.S.: веселый код со смайликами, настроениеподнимательный)))
Рад был помочь и поднять настроение :-p
Удалить=)))))
ОтветитьУдалитьЗдравствуйте, не могу найти блок "/* Accents. Не подскажите где он находится?
ОтветитьУдалитьВ верхней части кода шаблона, там где задаются все CSS-стили.
Удалитьа можно ли картинку как-то вставить вместо этой колонки?
ОтветитьУдалитьВ смысле, "вместо этой колонки"? Под колонкой Вы подразумеваете прямоугольник с текстом? Да, разумеется можно. Можно воспользоваться свойством background-image.
УдалитьЗдравствуйте!
ОтветитьУдалитьКак сделать так, чтобы после нажатия на кнопку "Дальше" открывалась вся страница новости, а не продолжение после анонса?
Спасибо.
Открываем редактор шаблона (Дизайн->Изменить HTML), ставим галочку напротив "Расширить шаблоны виджета", после чего находим этот код:
Удалить<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
...и удаляем подсвеченный код.
P.S. Под смайликом :р прячется двоеточие и латинское р.
Большое спасибо!
УдалитьВсё сработало.
Удачи! :-)
УдалитьХоть убейте :wall: нет у меня такой строки "/* Accents...что делать,а?!
ОтветитьУдалитьНичего страшного. Главное, чтобы Вы разместили код над строкой "]]>".
УдалитьСпасибо за оперативные ответы..пошла искать!И еще вопросик:кнопка Дальше у меня стоит вправом нижнем углу..вроде как полагается..но стоит она после Похожих статей...так и просится, чтоб ее подняли чуть вверх..скажите я на правильном пути?или мне надо менять что то другое?
ОтветитьУдалитьЕсли честно, то я у Вас в блоге не вижу "Похожих статей".
УдалитьКак не видите??Ну они может не похожи между собой))У меня установлен виджет linkwithin.
ОтветитьУдалить[img]http://i25.fastpic.ru/big/2012/1010/59/6a11a3795dbe2a30946430846b0ee259.jpg[/img]
УдалитьИ где он здесь?
Так я хочу,что б это было сразу под фото:-[
ОтветитьУдалитьТак и не понял, где там linkwithin... А как переместить ссылку "Дальше" выше, я Вам на пальцах не смогу объяснить. Тут надо смотреть непосредственно шаблон.
ОтветитьУдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьЗдравствуйте! У меня своя кнопка дальше как её вставить в шаблон и вручную
ОтветитьУдалитьтак как я хочу менять кнопки под каждую статью ставить новую, возможно ли это
Откуда ж мне знать, как вставить Вашу кнопку? Вы ее разработали - Вам и карты в руки.
УдалитьМеханизма смены вида кнопки в зависимости от вида статьи в механизме Blogger не предусмотрено. Теоретически, это можно организовать при помощи скриптов в тексте самой статьи - это да. Но как это реализовать автоматом в движке Blogger и исходя из каких критериев, мне неизвестно.
спасибо!! понятно
ОтветитьУдалитьПодскажите, пожалуйста, а то что русским написано (/* привязка текста к правому краю кнопки */ и т.п.) тоже вставлять? или это вы написали, что бы нам было понятно что за что отвечает?
ОтветитьУдалитьНет, этот текст необязателен. Это мои пояснения, чтобы Вы понимали, какая строка за что отвечает и могли адаптировать код под свое видение подобной кнопки.
УдалитьЯ не нашла не "/* Accents... не "]]>"
ОтветитьУдалитьС дужками нашла только вот такое
]]>
]]>
// ]]>
Подскажите, пожалуйста, что еще можно сделать в такой ситуации?
Какая разница между тем, что Вы, типа, не нашли и первым и вторым пунктом того,что нашли?
УдалитьСпасибо! разобралась и все работает :thanks:
ОтветитьУдалитьПодскажите, пожалуйста, а как у себя на блоге разместить окошечки, после каждого поста "Похожие сообщения" или их еще называют "You might also like", как тут, например?
Это специальный гаджет. На страницах моего блога он не обсуждался.
УдалитьПоищите в сети!
Спасибо! попробую поискать
ОтветитьУдалитьЯ ранее установила номерацию страниц вместо "Главная страница" и "Предыдущая" внизу страницы. С добавлением кода кнопки "Дальше" нумерация слетела. Не подскажите в чём может быть причина и как это устранить?
ОтветитьУдалитьТут только в угадайку играть. Скриптов, добавляющих нумерацию страниц в Blogger с десяток. Что и с чем конфликтует я так понять не могу. Могу только предположить, что какой-то из классов, который я задействовал при создании кнопки "Дальше" используется и в том скрипте...
УдалитьЗдравствуйте. А где можно поменять надпись "Дальше »" на "Продолжение статьи" или свой текст ?
ОтветитьУдалитьЭто только при написании сообщения нужно каждый раз переходить в HTML и "more" менять на что-то другое ? (Пробовала ставить туда другой текст, но ничего не отображается..)
Это стандартная опция Blogger. Зайдите в настройки блога. Там Дизайн -> Сообщения блога -> Изменить -> Текст ссылки на страницу сообщения.
УдалитьПод тегом Дальше ведь прячется название статьи. Я повторила его открыто - это лишний раз ключевое слово употребить, не сочиняя его в тексте. Но эта строчка у меня очень мелкая. Не подскажете, как увеличить шрифт? Спасибо!
ОтветитьУдалитьПосмотрите на стиль .jump-link a. Там есть параметр отвечающий за размер шрифта. Воспользуйтесь этой конструкцией.
УдалитьА у меня вообще не получилось ничего(( "Расширить шаблоны виджета" - у меня нету. Acces тоже нету, есть // ]]>, над ней я код и вставила, но кнопка осталась на месте и такой как была. Подскажите в чем может быть проблема?
ОтветитьУдалить"Расширить шаблоны виджета" в современном варианте уже отсутствует. Когда писалась статья, оно было.
УдалитьСудя по тому, что я вижу в Вашем блоге, Вы все-таки сумели воспользоваться моей инструкцией. Вот и хорошо :-)
Как и все подобные варианты с Linkwithin не работает.)
ОтветитьУдалитьНу, я и не гарантировал совместимость данного метода со сторонними виджетами.
УдалитьСпасибо помогло, догадалась в поиске набрать more* и вставила ниже класс!
ОтветитьУдалитьСпасибо огромное за статью! Кнопку вставила! Цвет ее поменяла! День удался! Пусть у вас будет много много подписчиков!
ОтветитьУдалитьРад был помочь :-)
УдалитьЗабыла добавить, если кому-то захочется чтобы текст в кнопке был написан "жирным шрифтом" (как мне) то надо добавить еще одну стоку
ОтветитьУдалитьfont-weight: 600;
под строкой font-size: 14px;
Здравствуйте!
ОтветитьУдалитьСтыдно признаться, я не сберег стандартную запись. Не подскажете ли, как вернуть?
Спасибо.
Создайте еще один блог - тестовый. В нем выберите ту же тему, что изначально была выбрана у вас. Оттуда перекопируйте нужный код.
Удалить