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

May 18, 2024

В последнем уроке мы настроили раздел «Ссылки» для вашего Blogger^TM веб-журнал. Теперь мы настроим заголовок в верхней части блога. Заголовок содержит заголовок и описание вашего блога. Мы собираемся изменить шрифт или шрифт для текста и добавить цветной фон.

Как и в предыдущем уроке, мы внесем эти улучшения, изменив несколько строк HTML-кода шаблона. Нажмите на вкладку «Шаблон» в меню в верхней части страницы, которая приведет вас в раздел «Изменить текущий шаблон». Вы найдете код HTML для шаблона в поле ниже. Мы сделаем несколько изменений в коде стиля CSS. (Чтобы узнать больше о каскадных таблицах стилей, перейдите по ссылке ниже.) Прокрутите код вниз, пока не дойдете до раздела «Заголовок» в теге стиля CSS. Как видите, тег style очень длинный, а раздел Header тега style состоит из шести частей.

@media all
@media handheld
#Название блога
# blog-title a
# blog-title a: hover
#описание

Первая часть кода (@media all) управляет характеристиками заголовка, включая ширину, поле и размер границы. Вторая часть (@media handheld) наследует эти характеристики от первой части, а также изменяет ширину заголовка до 90 процентов для портативных мониторов. Поскольку мы хотим, чтобы новый цвет фона использовался в обоих случаях, мы добавим строку кода для цвета фона в первой части (@media all). Эта новая строка кода выделена жирным шрифтом ниже. В приведенном ниже примере мы использовали светло-серый цвет, но не стесняйтесь использовать любой желаемый цвет.

@media all {
#header {
цвет фона: # EFE3EF;
...
Далее мы заменим шрифт для заголовка на популярный шрифт в стиле casual под названием Comic Sans MS. Конечно, вы можете использовать любой шрифт, который вам нравится. Следующие три части CSS-кода шаблона (# blog-title, # blog-title a, # blog-title a: hover) управляют характеристиками заголовка блога. Первая часть управляет общими характеристиками, а две другие части управляют внешним видом текста, когда он функционирует как гиперссылка. Чтобы установить шрифт заголовка или шрифт для всех случаев, мы добавим код CSS для семейства шрифтов в первую часть (# blog-title). Поскольку имя нашего шрифта содержит пробелы, его также необходимо поместить в кавычки («comic sans ms»).

#Название блога {
семейство шрифтов: "Comic Sans MS";
...
Наконец, мы будем работать над кодом CSS для описания вашего блога (#description). Это последняя часть оригинальной шестерки. Как вы можете видеть ниже, весь код CSS, который управляет характеристиками шрифта для текста описания, перечислен в одной строке. Все, что нам нужно сделать, это добавить «comic sans ms» в начале списка шрифтов, что сделает Comic Sans MS шрифтом по умолчанию для текста описания.

#описание {
...
Шрифт: 78% / 1.4em "комикс без мс""Требушет М.С.", Требушет, Ариал, Вердана, Сан-Сериф;
...
}

По завершении нажмите кнопку «Просмотр», чтобы просмотреть изменения, а затем закройте окно браузера, чтобы вернуться на предыдущую веб-страницу. Нажмите на кнопку Сохранить изменения шаблона. Когда вы увидите подтверждающее сообщение о том, что изменения были сохранены, нажмите кнопку «Повторная публикация». Чтобы убедиться, что ваш блог обновлен, перейдите на вкладку «Просмотреть блог» в меню в верхней части страницы. Возможно, вам придется обновить веб-страницу блога, чтобы увидеть изменения.

Снимки экрана перепечатаны с разрешения Google Inc. Google^TMBlogger^TM и BlogSpot^TM являются зарегистрированными товарными знаками или товарными знаками Google Inc. в США и / или других странах.

Видео инструкция: Как установить хедер на блоггер (blogspot) (May 2024).

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

Предыдущая статья

Следующая статья

MTV Music Video Awards 2007

May 2024

Я пошел по процессу создания моих предсказаний MVA совершенно новым способом. Я не смотрел телевизор. Я использовал свой ноутбук, iTunes и Napster. Я слушал, и я смотрел без одного рекламного пауза...

компьютеры

Dance Dance Revolution Extreme 2

May 2024

Мне очень нравится серия Dance Dance Revolution. Это очень активный способ играть в видеоигры и оставаться в форме! С DDR Extreme 2 вы получаете новый набор песен и некоторые новые виды деятельности....