Налаштуйте розділ заголовків свого блогу Blogger.com

Може 2, 2024

В останньому уроці ми налаштували розділ Посилання для вашого Blogger^TM веб-журнал. Тепер ми налаштуємо розділ заголовка вгорі блогу. Заголовок містить назву та опис вашого блогу. Ми будемо змінювати шрифт або шрифт для тексту та додавати кольоровий фон.

Як і в останньому навчальному посібнику, ми вносимо ці вдосконалення, змінюючи кілька рядків HTML-коду шаблону. Перейдіть на вкладку «Шаблон» у меню вгорі сторінки, що перенесе вас до розділу «Змінити поточний шаблон». Ви знайдете HTML-код шаблону в полі нижче. Ми внесемо кілька змін до коду стилю CSS. (Щоб дізнатися більше про каскадні таблиці стилів, перейдіть за посиланням нижче.) Прокрутіть код донизу, поки не досягнете розділу заголовка в тезі стилю CSS. Як бачимо, тег стилю дуже довгий, а розділ заголовка тегу стилю - шість частин.

@media все
@media handheld
# блог-заголовок
# заголовок блогу a
# блог-заголовок a: наведіть курсор
# опис

Перша частина коду (@media all) контролює характеристики заголовка, включаючи ширину, поле та розмір межі. Друга частина (@media handheld) успадковує ці характеристики з першої частини, а також змінює ширину заголовка до 90 відсотків для портативних моніторів. Оскільки ми хочемо, щоб новий колір фону використовувався в обох випадках, у першій частині ми додамо рядок коду для кольору фону (@media all). Цей новий рядок коду є жирним шрифтом внизу. У наведеному нижче прикладі ми використовували світло-сірий колір, але не соромтеся використовувати будь-який колір.

@media все {
#header {
колір фону: # EFE3EF;
...
Далі ми змінимо шрифт для заголовка на популярний, випадковий шрифт у стилі Comic Sans MS. Звичайно, ви можете використовувати будь-який шрифт, який вам подобається. Наступні три частини CSS-коду шаблону (# blog-title, # blog-title a, # blog-title a: наведіть курсор) керують характеристиками для заголовка блогу. Перша частина керує загальними характеристиками, а дві інші частини контролюють вигляд тексту, коли він функціонує як гіперпосилання. Щоб встановити шрифт або шрифт заголовка для всіх примірників, до першої частини (# blog-title) ми додамо CSS-код для сімейства шрифтів. Оскільки наша назва шрифту містить пробіли, її також потрібно буде розміщувати всередині лапок ("comic sans ms").

# заголовок блогу {
сімейство шрифтів: "comic sans ms";
...
Нарешті, ми будемо працювати над кодом CSS для опису вашого блогу (#description). Це остання частина первісної шести. Як ви бачите нижче, весь код CSS, який керує характеристиками шрифту для тексту опису, перерахований разом в одному рядку. Все, що нам потрібно зробити, - це додати "comic sans ms" внизу списку шрифтів, що зробить Comic Sans MS шрифтом для тексту опису за замовчуванням.

#description {
...
шрифт: 78% / 1,4ем "comic sans ms", "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
...
}

Закінчивши, натисніть кнопку Попередній перегляд, щоб переглянути зміни, а потім закрийте це вікно веб-переглядача, щоб повернутися до попередньої веб-сторінки. Натисніть кнопку Зберегти зміни шаблону. Коли ви побачите повідомлення про підтвердження, яке вказує на те, що зміни збережено, натисніть кнопку "Відкрити". Щоб переконатися, що ваш блог оновлено, натисніть на вкладку Переглянути блог у меню вгорі сторінки. Можливо, вам доведеться оновити веб-сторінку свого блогу, щоб побачити зміни.

Знімки екрана передруковані з дозволу від Google Inc. Google^TM, Blogger^TM та BlogSpot^TM є або зареєстрованими торговими марками, або товарними знаками Google Inc. в США та / або інших країнах.

Відео Інструкція: Introducing new and improved AdSense Auto ads (Може 2024).

Налаштуйте розділ заголовка свого блогу Blogger.com, HTML, змініть назву та опис свого блогу Blogger, змініть шрифт для шаблону Blogger, додайте кольоровий фон до шаблону Blogger, змініть CSS-код для шаблона Blogger, додайте CSS-код у шаблон Blogger. , Шрифт шаблону Blogger, сімейство шрифтів шаблонів Blogger, теги стилів CSS

Попередня Стаття

Наступна Стаття

Схожі Статті

комп’ютери

Стрес, ергономіка та комп’ютерні травми

Може 2024

Співробітник, можливо, мав найкращі ергономічні втручання і все ще відчуває ознаки синдрому зап'ястного каналу або інші повторювані деформації. Методи роботи та загальні проблеми зі здоров’ям також...

комп’ютери

Фотошоп Photoshop CS6 Що нового

Може 2024

Якщо ви використовували AppleR iMovieR щоб створити фільми зі своїх відеокліпів, ви знаєте, як легко використовувати це програмне забезпечення порівняно з більш надійним програмним забезпеченням,...