ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Кнопка читать далее на вид материала

Кнопка читать далее на вид материала

Создаем красивую кнопку читать дальше на вид материала новостей. Так как там все можно сделать по умолчанию, здесь сами выставляем. Как знаем на этом модуле нет краткого описание, и в админ панели мы выставляем, сколько должно быть знаков показано, но а потом идет надпись "Читать далее..." где нажимаем и переходим на основной материал. Теперь вместо этой надписи, сделаем красивую кнопку на чистых стилях, где вы можете ее выстраивать по дизайн и оттенку цвета под свою стилистику. Если кто не знал, то в в новостях есть системная переменная СUT, так что краткий текст возможно там и не так нужен, но все же будем учитывать.

Но и на модуле блог идет по той же системе, который основном можно увидеть на главной странице. Так что будем добавлять оригинальную кнопку в CMS UCOZ с иcпользованием CCS.

Так что будем редактировать все виды материалов, где у нас есть у системы модуля "краткий текст", но нет кнопки "Далее", а это блог, каталог статей и доска объявлений.

Так примерно будет на светлом интернет ресурсе.

Начнем установку:

Идем в админ панель к примеру "доска объявлений" у вас может быть другой каталог. И там нам нужно найти оператор, который будем выводит описание.

Код

$MESSAGE$

И вот только после него ставим код:

Код

<div style="text-align:right;">
<a href='$ENTRY_URL$' title="$TITLE$" class="more-lin">
<b>Читать далее...</b></a></div>

Для остальных модулей, кроме объявление:

Модуль » Настройки модуля » поставьте галочки напротив краткого и полного текста материала
УП » Редактирование шаблонов » Вид материалов
Копируем предоставленный код
И здесь также находим и после ставим код, который предоставлен выше.

Код

$MESSAGE$

Теперь осталось прописать стили, это можно сделать в самом CSS, а также в самом вид материала, поставить в низ основного скрипта. Только заключить его обязательно в style чтоб все отображалось и работало.

Код

Вот этот:

Код

.more-lin{ background: url(/Aben/Abryn/export.png) no-repeat right center #F2B879;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif !important;
  font-size: 16px !important;
  line-height: 13pt; font-weight:400;
font-style:italic !important; padding: 5px 16px 5px 5px;
  border:1px solid #EA9750;
  border-radius: 5px;
  box-shadow: 2px 3px 5px #BE7035;}
/*стиль при наведении*/
.more-lin:hover{ background: url(/Aben/Abryn/export.png) no-repeat right center #F2B777;
font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif !important;
  font-size: 16px !important;
  line-height: 13pt; font-weight:400;
font-style:italic !important; padding: 5px 16px 5px 5px;
  border:1px solid #A73223; border-radius: 5px;
  box-shadow: 2px 3px 5px #BE7035;
  text-decoration:none;}

Здесь прописана одна ссылка не небольшую кнопку, но это вам решать оставлять или нет, если не нужно, то просто убираем и все.

PS - вы видите как смотрится на темном и на светлом сайте, проверял на каталоге новостей.

10 Декабря 2016 Просмотров: 2728 Комментариев: (7)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 7
Порядок вывода комментариев: Kosten 10 Декабря 2016 23:13¹ 0 Здесь проверялся код и стили на модуле новостей, потому и дублируется читать далее, возможно как то можно в стилях запретить. Kolinkor 10 Декабря 2016 23:24² 0 Вообще новости редко можно увидеть, чтоб был на главной странице, но это не означает, что этот модуль не подключают. Просто давно читал, что каталог этот должен индексироваться быстрей чем остальной материал. А так кнопку если настроить под свой сайт, и здесь на главную можно поставить, но явно лучше чем идет. tsakonter 10 Декабря 2016 23:48³ 0 Так намного красивее смотрится, и видать должны эффекты при нажатие на кнопку. -SAM- 11 Декабря 2016 00:21⁴ 0 Опять написали непонятно чего. Если скрин посмотреть (не ваш тестовый, а как вы увидели на том светлом сайте у людей), то там идёт смещение вправо {float:right;} самой ссылки с "Читать далее...", а не дописывание еще одной довеском в вид материалов (как и стили - пихать такое в вид материалов нельзя). То есть, я имею в вижу, что цепляются стили на анкор с классом .entryReadAll. Это во-первых. А во-вторых, если ставить еще одну ссылку (ставить после $MESSAGE$, а не как тут написано после <?endif?>), то это оправдано лишь в том случае, когда нужно вывод ее делать во всех материалах, а не только в тех, где использовалась подрезка (лишь после нее дописывается "..." с этой ссылкой). Тогда родную можно убрать так: Код .entryReadAll {display:none;} Чтобы не было дублирования ссылок (именно ссылок, к кнопкам отношения здесь никакого нет). Кстати, можете еще написать как сделать вывод "читать далее" картинкой, не прибегая к установке дополнительных ссылок\кнопок в вид материалов. Делается это той же стилизацией (размер шрифта - под ноль, прописывается задний фон, смещение в нужную сторону, ширина\высота... таким образом достигается внешнее сходство с кнопкой какой-то, как пример). Kosten 11 Декабря 2016 00:33⁵ 0 А почему ставить перед условием ?endif? но уже после MESSAGE, так интерес! -SAM- 11 Декабря 2016 00:46⁶ +3 Вы не можете знать окружен ли $MESSAGE$ в условный оператор, по умолчанию - как раз и не окружен, если уж прописано в чьем-то виде материалов <?if($MESSAGE$)?>$MESSAGE$<?endif?>, то ясен пень, что ставить нужно под оператор - когда описания нет, чтобы "левых" читать дальше не было (чего читать дальше, когда описания вообще нет? тут просто ссылка есть на страницу полного материала и комментариев к нему, как правило - нажатие на название материала). Исходя из этого будет правильнее в статье убрать "$MESSAGE$ <?endif?>", написав лишь $MESSAGE$ (чтобы искали его и прописывали после, по месту вывода у себя). Kosten 11 Декабря 2016 01:00⁷ 0 Спасибо за поправку, исправил.