Изменяем стиль элементов блога через CSS и Дизайнер Шаблонов

Доброго утра, дня или ночи! Меня зовут Наталья. Я составляю «Шпаргалку блоггера» для себя и для вас. Мне хотелось бы продолжить статью «Кнопка «читать далее» в Blogger» и посмотреть как скорректировать стиль этой надписи. Начальный вид:

Исходный вид сообщения под катом

Для простоты использования добавим новый пункт в «Дизайнер шаблонов». Для этого заходим в админку Blogger в раздел «Дизайн» — пункт «Изменить HTML» и после:

/* Variable definitions
====================

напишем:

<Group description=»Читать далее» selector=».jump-link»>
<Variable name=»rm.font» description=»Font» type=»font»
default=»normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif» value=»normal normal 12px ‘Trebuchet MS’,Trebuchet,Verdana,sans-serif»/>
<Variable name=»rm.color» description=»Color» type=»color»
default=»#f9f9f9″ value=»#000000″/>
<Variable name=»rm.h.color» description=»Hover Color» type=»color» default=»#000000″ value=»#000000″/>
</Group>

<Group description=»Фон Читать далее» selector=».jump-link»>
<Variable name=»rm.bg.color» description=»Color [www.betatemplates.com]» type=»color»
default=»#eeeeee» value=»#eeeeee»/>
</Group>

А перед ]]></b:skin> укажем:

.jump-link { font: $(rm.font); background: $(rm.bg.color); }
.jump-link a, .jump-link a:visited { color: $(rm.color); }
.jump-link a:hover { color: $(rm.h.color); }

Промежуточный этап

Для того, чтобы переместить кнопку вправо и закруглить края фона, изменяем первую предложенную строку на:

.jump-link { font: $(rm.font); background: $(rm.bg.color); text-align: center; float: right; width: 104px; line-height: 20px; -moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;}

Слово «Дальше» в виде кнопки

Но мне кажется, что это пока всё ещё скучно, поэтому добавим рамку.

.jump-link {font: $(rm.font); background: $(rm.bg.color); text-align: center; float: right; width: 104px; line-height: 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #b09f79; border-right: 1px solid #f0cf84; border-bottom: 1px solid #f0cf84;}

Обратите внимание на значение после символа # — это цвет краёв рамки, который вы сможете подобрать на своё усмотрение. Кнопка сразу преобразиться:

Дальше »

Также здесь будет уместно сделать тень тексту с помощью CSS, а буквы — строчными жирным очертанием:

.jump-link {font: $(rm.font); background: $(rm.bg.color); text-align: center; float: right; width: 104px; line-height: 20px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #b09f79; border-right: 1px solid #f0cf84; border-bottom: 1px solid #f0cf84; text-shadow: 1px 1px 1px rgb(255, 255, 255); text-transform: lowercase; font-weight: bold;}

Итог:

Читать далее

Для того, чтобы убрать подчёркивание при наведении на ссылку, вторую строку заменим на:

.jump-link a, .jump-link a:visited { color: $(rm.color); text-decoration: none;}

Дизайнер шаблонов. Новый пункт

Сохраняем и переходим в «Дизайнер шаблонов», где теперь можем изменять шрифт, размер и фон надписи.

Можно также поменять слово «Дальше >>». Это фрагмент кода <data:post.jumpText/>, который на вкладке «Дизайн» — «Изменить HTML» мы изменим на «Читать далее» или подходящее изображение.

——

Что ж, большое спасибо Наталье за такое подробное руководство. Оно определенно пригодиться как новичками, так и продвинутым пользователям. Первым за счет конкретного примера редактирования стилей и оформления элементов блога через CSS. Вторым — за добавление настроек в Дизайнер Шаблонов. Честно говоря даже не знал и никогда не задумывался о такой функции, но получилось здорово.