15 ноября 2014 г.

Вставка и оформление ссылки "Читать далее" в сообщениях

Добрый день уважаемые читатели.
Сейчас хочу рассказать вам о такой полезной функции, как ссылка "читать далее" (её можно переименовать в любую). Полезна она тем, что вместо того что бы показывать каждому читателю все статьи целиком, - возможно показать лишь малую часть поста, вставив далее ссылку на полную статью. Тем самым этот процесс снизит время затрачиваемое ранее на полную загрузку всех статей, а т.ж. время на поиск нужного материала...Приступаем
Вставка ссылки на полную страницу на самом деле очень простая, и добавляется она в меню написании сообщения, путём нажатия "Вставить ссылку Дальше"(см. скрин)
Выбирайте область где хотите вставить ссылку, например я  ставлю в первой половине статьи, потому что они у меня не большие. Ставлю так, чтобы читатель мог понять о чем статья не открывая ее. 

Сохраняем, проверяем.(у меня было примерно так как на скриншоте внизу)
 Если Вас устраивает то хорошо, если же нет то придется править код шаблона.. Для этого сделайте резервную копию (вдруг что нибудь удалите не то)
Переходим ниже, где мы с Вами сделаем что нибудь с нашей ссылкой..

Для начала идем в Блог - Шаблон - Изменить HTML
Ищем в коде строку: /* Accents   Находим, и НИЖЕ добавляем вот этот код(после того как его отредактируете для себя), что бы получилось вот так:
/* Accents
----------------------------------------------- */
.jump-link {
   text-align: right; /* привязка текста к правому краю кнопки */
   float: right; /* привязка кнопки к правому краю статьи */
   margin: 7px 19px 0 0; /* Отступы кнопки от других элементов */
}
.jump-link a {
   padding: 6px 7px; /* Отступы от краев кнопки внутри*/
   background: #FF4A80; /* фон кнопки */
   color: #fff; /* цвет шрифта */
   text-decoration: none; /* отсутствие у ссылки подчеркивания */
   font-size: 13px; /* размер текста кнопки */
   text-shadow: 0 1px 0 #211317; /* толщина и цвет тени текста кнопки */
}
.jump-link a:hover {
   background: #A2A2A2; /* Фон при наведении */
}

В моем шаблоне не было /* Accents ... для таких шаблонов нужно сделать немного иначе!
Находим в коде шаблона вот это: ]]></b:skin>
И вставляем тот же код только на этот раз НАД этой строкой..
Жмем сохранить шаблон, открываем блог, обновляем, радуемся=) Пишите у кого что получилось


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

Отправить комментарий