В прошлой статье я рассказал, как сделать ссылку "Читать дальше", но эта была просто ссылка. а не красивая кнопка. К тому же, она находилась в левом углу, что не очень удобно для читателей блога. Я хотел сделать ссылку в виде красивой кнопки и чтобы она находилась в правом углу.
И вот, на блоге я нашел то, что хотел. Теперь у меня присутствует красивая кнопка "Читать дальше".
Как сделать кнопку "Читать дальше"
Заходим в Шаблон->Изменить HTML->Приступить. В HTML-коде ищем строку:
/* 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, то найдите код ]]> и перед ним вставьте код, расположенный
выше Просматриваете. Если кнопка появилась, то сохраняем. Всё.
выше Просматриваете. Если кнопка появилась, то сохраняем. Всё.
