Как изменить стиль элементов блога через 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
====================

напишем:

<variable
default=»normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif» value=»normal normal 12px ‘Trebuchet MS’,Trebuchet,Verdana,sans-serif»/>
<variable
default=»#f9f9f9″ value=»#000000″/>

<variable
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» мы изменим на «Читать далее» или подходящее изображение.

Автор: GospodinPg Рубрика: Blogger

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s