14 февраля 2013

Делаем кнопку подробнее для Blogger

В похожей статье я описывал способ добавления названия статьи к ссылке "Подробнее", сейчас мы узнаем, как на Blogger/Blogspot сделать красивую кнопку "Подробнее" или "Читать дальше" вместо простой ссылки. Созданную нами кнопку можно расположить с правой стороны статьи, что более удобно для читателей. Меняя настройки, можно задать кнопке необходимый вид, указав нужный цвет и размер шрифта, менять расстояние отступа от правого или левого края, делая кнопку более заметной и вписывающейся в общий дизайн шаблона.

Делаем кнопку подробнее для Blogger



Чтобы сделать кнопку "Подробнее" или "Читать дальше" на Blogger/Blogspot нужно:
Зайти в Шаблон > Изменить 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

найдите код:

]]>

и ниже вставьте выше расположенный код кнопки "Подробнее" или "Читать дальше" на Blogger/Blogspot.

Делаем кнопку подробнее для Blogger

1 комментарий:

  1. Спасибо...огромное...только у Вас ошибки и так просто не поставить! Не каждый догадается куда нужно ставить! Те кому интересно...заходите в шаблон,изменить HTML, ищете там (у меня 13 строчка сверху)раскрываете его стрелочкой слева (черная) и мотаете в самый низ,до тега ]]> и уже перед ним с лева вствляете этот код

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