Персонализирайте секцията Header на вашия блог Blogger.com

Април 20, 2024

В последния урок персонализирахме секцията Връзки за вашия Blogger^TM уеблог. Сега ще персонализираме секцията Header в горната част на блога. Заглавката съдържа заглавието и описанието на вашия блог. Ще променим шрифта или шрифта на текста и ще добавим цветен фон.

Както в последния урок, ние ще направим тези подобрения, като променим няколко реда от HTML кода на шаблона. Кликнете върху раздела Шаблон в менюто в горната част на страницата, който ще ви отведе до секцията Редактиране на текущия шаблон. В полето по-долу ще намерите HTML кода за шаблона. Ще направим няколко промени в кода на CSS стил. (За да разберете повече за Cascading Style Sheets, следвайте връзката по-долу.) Превъртете надолу кода, докато стигнете до секцията Header в тага на CSS style. Както можете да видите, стикерният маркер е много дълъг, а секцията Header на стиловия маркер има шест части.

@media всички
@media handheld
#заглавие на блога
# блог-заглавие a
# блог-заглавие a: задръжте курсора
#description

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

@media всички {
#header {
цвят на фона: # EFE3EF;
...
След това ще променим шрифта за заглавието на популярния, ежедневен стилен шрифт, наречен Comic Sans MS. Разбира се, можете да използвате всеки шрифт, който харесвате. Следващите три части от CSS кода на шаблона (# блог-заглавие, # блог-заглавие a, # блог-заглавие a: задържане на курсора) контролират характеристиките за заглавието на блога. Първата част контролира общите характеристики, а другите две части контролират външния вид на текста, когато той функционира като хипервръзка. За да зададете шрифта или шрифта на заглавието за всички случаи, към първата част (# блог-заглавие) ще добавим CSS кода за семейството шрифтове. Тъй като името на шрифта ни съдържа интервали, то също ще трябва да бъде поставено вътре в кавички („comic sans ms“).

#заглавие на блога {
семейство шрифтове: "comic sans ms";
...
Накрая ще работим над CSS кода за описанието на вашия блог (#description). Това е последната част от оригиналната шестица. Както можете да видите по-долу, целият CSS код, който контролира характеристиките на шрифта за текста на описанието, е посочен заедно на един ред. Всичко, което трябва да направим, е да добавим „comic sans ms“ в предната част на списъка с шрифтове, което ще направи Comic Sans MS стандартният шрифт за текста на описанието.

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

Когато приключите, щракнете върху бутона Преглед, за да визуализирате промените и след това затворете прозореца на браузъра, за да се върнете към предишната уеб страница. Кликнете върху бутона Запиши промените в шаблона. Когато видите съобщението за потвърждение, показващо, че промените са запазени, кликнете върху бутона Republish. За да проверите дали вашият блог е актуализиран, щракнете върху раздела Преглед на блога в менюто в горната част на страницата. Може да се наложи да обновите уеб страницата на блога си, за да видите промените.

Снимките на екрана, препечатани с разрешение от Google Inc. Google^TM, Blogger^TM и BlogSpot^TM са или регистрирани търговски марки или търговски марки на Google Inc. в САЩ и / или други страни.

Инструкции Видео: Building Dynamic Web Apps with Laravel by Eric Ouyang (Април 2024).

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

Предишна Статия

Следваща Статия

Свързани Статии

компютри

XBox Driver Controller

Април 2024

Аз съм огромен фен на шофьорските игри - винаги съм карал Mustangs в реалния живот и съм карал много други през моите години на шофиране. Имах един от комбинациите на волана / педала на PlayStation...

компютри

Наполеонови войни - преглед на компютърни игри

Април 2024

"Наполеоновите войни" е официално подкрепен мод за Mount & Blade Warband, доставящ бой от 19-ти век в двигателя на добре познатата средновековна игра. Той струва 10 долара на Steam и изисква...