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

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

 http://blogohelp.blogspot.com/search?updated-max=2011-02-27T17%3A24%3A00%2B02%3A00&max-results=3

вторник, 15 февраля 2011 г.

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

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

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

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

напишем:


default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
default="#f9f9f9" value="#000000"/>




default="#eeeeee" value="#eeeeee"/>

А перед ]]> укажем:

.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;}

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

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

Можно также поменять слово "Дальше >>". Это фрагмент кода , который на вкладке "Дизайн" - "Изменить HTML" мы изменим на "Читать далее" или подходящее изображение.