Урок 14. Встроєні елементи HTML у вашому блозі

Сьогодні я продовжую тему корисних дрібничок, про які потрібно знати кожному «просунутому» (продвінутому) блогеру.

Пропоную уважніше придивитися до цього блога і відзначити невеличкі зміни, які з ним відбулися:

а) Замість простого RSS-лінку в шапці блога розташувався веселий графічний значок;

б) Закладки блога також змінили свій вигляд з лінків на графічні.

Як цього можна досягти 🙂

Змінюємо RSS-лінк блога

1. Знайдіть у інеті зображення RSS, яке буде пасувати до вашого блога, або розробіть його самі. Краще за все обирати картинку у форматах gif або png.

2. Завантажте цю картинку до файлів блога, скопіюйте її адресу.


Примітка: Зручніше працювати разом з відкритим простим текстовим редактором, до якого тимчасово вставляються клаптики коду, з яким ви наразі працюєте. 

3. У Панелі Редагування клацніть на Вигляд > Елементи.

4. Додайте код за таким зразком:

RSS-адреса вашого блога» target=»_blank»> — буде відкриватися у окремому віконці;
Адреса картинки
» border=0 div style=»position: absolute; right: 460px; top: 230px;» — вказується позиція графічного лінку у вашому блозі, позиція змінюється експериментально. Замість властивостей right і top ви можете використовувати left і bottom.
alt=»Підпишись на оновлення блога»>

5. Знайдіть у CSS-коді блога селектор #BlogRss і допишіть до нього команду:

#BlogRss { visibility: hidden; — сховає простий лінк на Rss.

6. Перевірте ці зміни у різних браузерах — розміщення елементу може відрізнятися. Підредагуйте розміщення іконки так, щоб воно вдовольняло вас у всіх браузерах.

Таким чином ви можете змінювати розміщення будь-якого HTML-елемента блога. Наприклад, розміщення контекстної реклами.

Додаємо графічні закладки

1. Підготуйте малюнки до закладок. Заради ошатного вигляду блога вони мають бути однакових розмірів.

2. Завантажте малюнки до файлів блога, скопіюйте їх адреси та адреси ресурсів, які додаєте до закладок, у тимчасово відкритий текстовий редактор.

3. У Панелі Редагування клацніть на Редагування > Закладки > Додати і редагувати закладки.

4. Запишіть у обидва поля закладки (Назва і URL) однакові рядки коду:

Посилання на ресурс, до якого веде закладка«>Посилання на зображення закладки» />

5. Ви можете швидко впорядкувати закладки, вставляючи пробіли до коду після команди . Згори опиниться та закладка, у коді якої менше пробілів. Ось як це виглядає (пробіли у коді замінила на крапки):

Посилання на ресурс,
Посилання на ресурс,
Посилання на ресурс,

Бажаю вдалих експериментів!

Урок 13.CSS — унікальний календар

На попередніх уроках ми вивчили достатньо матеріалу для того, щоб ви без проблем мали змогу розробити власний CSS дизайн для блога. Сьогодні я б хотіла поговорити про маленькі деталі, які також не слід оминати при розробці дизайну. Подивіться на малюнок нижче — це принтскрін звичайного блогівського календарика, одна з тих дрібничок, що може додати індивідуальності вашому блогу.
*Увага! Братися за цей урок рекомендую тим, хто хоч наполовину вивчив попередні 🙂 *
Давайте поетапно розберемо, як зробити такий календарик.
1. Знайдіть такий малюнок, щоб вам подобався і підходив до тематики блога.
2. Зменште його розміри у простому графічному редакторі приблизно до розмірів календарика.
3. Зробіть з малюнка підложку, якщо потрібно (підложка — це прозоре фонове зображення, воно майже не насичене кольором).
4. За допомогою сполучення клавіш Ctrl+F  знайдіть у тексті CSS блога такий селектор:
TABLE.Calendar
5. додайте код:
background-image: url(адреса обраної вами картинки); background-repeat: no-repeat; background-position: center bottom (замість цієї позиції можна поставити ту, у якій картинка буде виглядати якнайкраще); border: solid black (вставляємо рамку для календаря, якщо потрібно); border-top-width: thin; border-bottom-width: thin (також значення для рамок);
6. У цьому селекторі також можна змінити колір та розмір шрифту календаря, якщо потрібно.
7. Знайдіть селектор TD.Month.
8. Впишіть рядки коду:
background: #f9f9f9 (колір фона); border: solid black; border-width: thin (властивості рамок);
9. Поекспериментуйте з іншими частинами коду календаря. Я просто впевнена, що у вас вийде щось надзвичайне!

Урок 12. CSS — Рамки блоків ІІ

У цьому уроці ми дізнаємося про різні види оздоблення рамок блоків.

Що таке рамки, ви можете дізнатися з попереднього уроку.

Нижче знаходиться перелік можливих властивостей, які ви можете застосувати для зміни дизайну рамок у своєму блозі.

border-width — товщина рамки;

Кожна окрема частина рамки може мати свою товщину. Властивість для правої частини рамки можна записати таким чином:

border-right-widht

А для верхньої — таким:

border-top-width

Якщо замість тор у цей клаптик коду вставити left або bottom, ми отримаємо властивість для лівої або нижньої частини рамки. Можливо, вам не хочеться підбирати товщину у пікселях. Тоді гарно можуть послугувати такі властивості:

thin — тонка рамка:

medium — рамка середньої товщини;

thick — товста рамка.

border-style — відповідає за стиль дизайну вашої рамки.

none — якщо надати властивості border-style таке значення, рамки не буде.

dotted — рамка формується за допомогою крапок.

dashed — рамка формується за допомогою пунктиру.

dot-dash — крапка-пунктир-крапка-пунктир…

dot-dot-dash — дві крапки, один пунктир. Якщо продовжувати далі, можна перетворити рамку на абетку Морзе.

solid — рамка з однієї безперервної лінії.

double — подвійна лінія.

groove — ввігнута рамка(для цієї опції слід ставити більшу товщину.

ridge — ввігнута назовні (також ставте більшу товщину).

inset — надає ефект пониження змісту блока.

outset — надає ефект підвищення змісту блока.

wave — хвиляста рамка.

Урок 11. CSS — Рамки блоків

Ми знаємо, що структура кожного HTML-документу блокова. Є блок вузької шпальти, на якій знаходяться архів або календар та інші елементи блога. Є блок широкої шпальти, що вміщує наші замітки, є блок з назвою блога. І у кожного з цих блоків існують рамки. У деяких шаблонах ми можемо їх побачити, у деяких — ні. Рамки — дуже важливий елемент дизайну блога, вони можуть його докорінно змінити. Знов таки, це доволі велика тема, і я вирішила поділити її на дві частини — як попередні уроки про шрифти. Сьогодні ми спробуємо змінювати ширину та колір рамок нашого блога.
За рамки окремого блока відповідає властивість border.
border-color — вказує на колір рамки
За допомогою властивості border ви можете прикрашати сторони блоків у будь-якій послідовності. Тобто, рамка може з’явитися у вигляді підкреслення тільки згори та знизу блока, або по боках. Кожній стороні рамки також можна призначити особисті товщину і колір:
border-top — верхня сторона рамки;
border-left — ліва сторона рамки;
border-right — права сторона рамки;
border-bottom — нижня сторона рамки.
Невелика вправа.
1. Знайдіть у CSS-коді свого блога селектор #BlogBodyBox
2. Додайте до нього такі рядки коду:
BORDER-RIGHT: lime 10px solid;
BORDER-TOP: yellow 5px solid;
BORDER-LEFT: lime 10px solid;
border-bottom: yellow 5px solid;

Властивість solid вказує на суцільну лінію рамки.
Таким чином також можна експериментувати з рамками таких селекторів, як BlogNarrowColumn, BlogWideColumn та BlogTitleBox.
Ви можете вказати рамки і до зображень, які вставляєте у свої блоги. Для цього треба знайти такі, або схожі рядки коду:
.BlogEntryContent img {
background: #f9f9f9;
— відповідає за колір всередині рамки;
padding:15px; — товщина внутрішньої рамки;
border:1px solid #eee;
}

#BlogWideColumn .BlogEntryBox .BlogEntryContent img {
border: 2px solid #666;
— відповідає за товщину і  колір зовнішньої рамки.
Дякую запитанню Zebra за цей невеличкий додаток до уроку 🙂 .

Урок 10. CSS — Шрифт II

*Увага! Рекомендую ознайомлюватися зі змістом цього уроку після прочитання уроку номер 8.*

Я продовжую тему про шрифти переліком можливих для них тегів і властивостей:

font-style — вказує на спосіб написання шрифта і може приймати одно з наступних значень:

normal — звичайний текст;

italic — курсив;

oblique — курсив разом з напіввиділеним написанням.

font-weight — встановлює ступінь виділення об’єктів тексту і може приймати одне з наступних значень:

normal — звичайний текст;

bolder — напіввиділений;

bold — виділений;

lighter — послаблений (світліший).

text-decoration — встановлює тип підкреслення тексту:

overline — надкреслення;

line-through — перекреслення;

underline — підкреслення;

blink — ефект блимання.

font-color — встановлює колір шрифта. Можна записувати за допомогою англійських означень кольору, у форматі RGB або за допомогою спеціальних констант (див. попередні уроки).

Приклад:

font-color: #A0A0A0;

Де і який текст буде змінюватися у коді:

BODY — установки для усього тіла документа;

a, a:hover — установки для посилань;

#BlogTitleText h1 — установки для назви блога у шапці;

#BlogTitleDescription — установки для опису блога у шапці;

.BlogEntryPublishDate — установки дати замітки;

.BlogEntryItemTitle — установки назви замітки;

#BlogCalendarBox — установки для календаря;

#BlogTitleBoxLastEntries — установки для останніх заміток (у лінках);

#CommentBox і далі з позначкою Comment — установки для коментарів.