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

вторник, 15 февраля 2011 г.
Доброго утра, дня или ночи! Меня зовут Наталья. Я составляю "Шпаргалку блоггера" для себя и для вас. Мне хотелось бы продолжить статью "Кнопка «читать далее» в 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. Вторым - за добавление настроек в Дизайнер Шаблонов. Честно говоря даже не знал и никогда не задумывался о такой функции, но получилось здорово.

P.S. Постовой. Если вы хотите больше возможностей, то создать блог на вордпресс, наверное, все же более уместно чем в Blogger, только это стоит денег.
Конечно же, после разработки интернет проекта нужна раскрутка сайта в поисковых системах Яндекс и Google для привлечения читателей.
Интернет магазин Линзмастер предлагает обычные и цветные контактные линзы с доставкой по Украине и доступными ценами.
Понравился пост? Подпишись на обновления блога по BlogoHelp RSSRSS, BlogoHelp по EmailEmail или twitter!
Как вам пост?   
Related Posts with Thumbnails