Blogger.com 블로그의 헤더 섹션 사용자 정의

할 수있다 19, 2024

마지막 튜토리얼에서 Blogger에 대한 링크 섹션을 맞춤 설정했습니다.^TM 웹 로그. 이제 블로그 상단에서 머리글 섹션을 사용자 정의합니다. 헤더에는 블로그 제목과 설명이 포함되어 있습니다. 텍스트의 서체 또는 글꼴을 변경하고 배경색을 추가하겠습니다.

마지막 자습서에서와 같이 템플릿 HTML 코드의 몇 줄을 변경하여 이러한 기능을 개선 할 것입니다. 페이지 상단의 메뉴에서 템플릿 탭을 클릭하면 현재 템플릿 편집 섹션으로 이동합니다. 아래 상자에 템플릿의 HTML 코드가 있습니다. CSS 스타일 코드를 약간 변경하겠습니다. CSS 스타일 시트에 대한 자세한 내용을 보려면 아래 링크를 따르십시오. CSS 스타일 태그 내의 헤더 섹션에 도달 할 때까지 코드를 아래로 스크롤하십시오. 보시다시피, 스타일 태그는 매우 길고 스타일 태그의 헤더 섹션에는 6 개의 부분이 있습니다.

@ 미디어 모두
@ 미디어 핸드 헬드
#블로그 제목
# 블로그 제목 a
# blog-title a : 마우스
#기술

코드의 첫 번째 부분 (@media all)은 너비, 여백 및 테두리 크기를 포함하여 헤더의 특성을 제어합니다. 두 번째 부분 (@media 핸드 헬드)은 첫 번째 부분에서 이러한 특성을 상속받으며 핸드 헬드 모니터의 경우 헤더 너비를 90 %로 변경합니다. 두 경우 모두에 새 배경색을 사용하기를 원하므로 첫 번째 부분 (@media all)에 배경색에 대한 코드 줄을 추가합니다. 이 새로운 코드 줄은 아래에 굵게 표시되어 있습니다. 아래 예에서는 밝은 회색을 사용했지만 원하는 색상을 자유롭게 사용할 수 있습니다.

@media all {
#머리글 {
배경색 : # EFE3EF;
...
다음으로 제목의 서체를 Comic Sans MS라는 인기있는 캐주얼 스타일 글꼴로 변경합니다. 물론 원하는 글꼴을 자유롭게 사용할 수 있습니다. 템플릿 CSS 코드의 다음 세 부분 (# blog-title, # blog-title a, # blog-title a : hover)은 블로그 제목의 특성을 제어합니다. 첫 번째 부분은 일반적인 특성을 제어하고 다른 두 부분은 텍스트가 하이퍼 링크로 작동 할 때 텍스트의 모양을 제어합니다. 모든 경우에 제목의 서체 또는 글꼴을 설정하기 위해 첫 번째 부분 (# blog-title)에 글꼴 모음의 CSS 코드를 추가합니다. 글꼴 이름에 공백이 포함되어 있기 때문에 따옴표 안에 넣어야합니다 (“comic sans ms”).

#블로그 제목 {
글꼴 모음 : "comic sans ms";
...
마지막으로 블로그 설명 (#description)을 설명하기 위해 CSS 코드를 작성합니다. 이것은 원래 6의 마지막 부분입니다. 아래에서 볼 수 있듯이 설명 텍스트의 글꼴 특성을 제어하는 모든 CSS 코드가 한 줄에 함께 나열됩니다. 폰트리스트 앞에“comic sans ms”를 추가하면 Comic Sans MS가 설명 텍스트의 기본 폰트가됩니다.

#description {
...
글꼴 : 78 % / 1.4em "comic sans ms""Trebuchet MS", Trebuchet, Arial, Verdana, 산세 리프;
...
}

완료되면 미리보기 버튼을 클릭하여 변경 사항을 미리 본 다음 해당 브라우저 창을 닫아 이전 웹 페이지로 돌아갑니다. 템플릿 변경 사항 저장 버튼을 클릭하십시오. 변경 사항이 저장되었다는 확인 메시지가 표시되면 다시 게시 버튼을 클릭하십시오. 블로그가 업데이트되었는지 확인하려면 페이지 상단의 메뉴에서 블로그보기 탭을 클릭하십시오. 변경 사항을 보려면 블로그 웹 페이지를 새로 고쳐야 할 수도 있습니다.

Google Inc. Google의 허가에 따라 스크린 샷 재 인쇄^TM블로거^TM 및 BlogSpot^TM 는 미국 및 / 또는 기타 국가에서 Google Inc.의 등록 상표 또는 상표입니다.

비디오 지침: How to make Blog Header LOGO AND Header Ads For Blogger.com? Part=04 (할 수있다 2024).

Blogger.com 블로그, HTML의 헤더 섹션 사용자 정의, Blogger 블로그의 제목 및 설명 변경, Blogger 템플릿의 서체 변경, Blogger 템플릿에 컬러 배경 추가, Blogger 템플릿에 대한 CSS 코드 변경, Blogger 템플릿에 CSS 코드 추가 , Blogger 템플릿 글꼴, Blogger 템플릿 글꼴 모음, CSS 스타일 태그

이전 기사

다음 기사

파이널 판타지 VI Screenshots

할 수있다 2024

Final Fantasy VI는 원래 SNES (Super Nintendo) 시스템 용이었습니다. 최근 Playstation을위한 Final Fantasy Anthology의 일부로 다시 릴리스되었습니다. 스크린 샷이 있습니다! 빅과 웨지! 파이널 판타지, 스타 워즈, 빅스와 웨지 파이널 판타지 오리진 리뷰 파이널 판타지...

컴퓨터

뉴스 레터를 온라인 마케팅 도구로 사용

할 수있다 2024

마케팅의 기본 규칙 중 하나는 반복적 인 비즈니스에 고객과 자주 연락하는 것이 중요하다는 것입니다. 매주, 매월 또는 분기 별 온라인 뉴스 레터 (메일 링리스트라고도 함)는 고객과 연락을 유지하는 좋은 방법입니다. 고객이 뉴스 레터 (선택)를 받도록 등록하면 뉴스 레터를 사용하여 현재 판매, 무료 경품, 콘테스트 및 신제품을 알릴 수 있습니다. 이런...