Tumblr의 테마에 사이드 바 삽입

비즈니스에 사이드 바를 추가하면 Tumblr에서 비즈니스에 대한 추가 정보, 파트너 조직 또는 관련 웹 사이트로의 발신 링크 또는 사이트에서 특정 콘텐츠를 찾기위한 검색 필드를 제공하여 테마에 도움이됩니다. 많은 테마가 사이드 바를 지원하도록 설계되었지만 Tumblr의 HTML 편집기를 사용하여 테마에 하나를 삽입 할 수도 있습니다. 텍스트 편집기로 자신 만의 사이드 바를 만들고 CSS로 스타일을 지정하면 기능과 모양을 완벽하게 제어 할 수 있으므로 모양과 비즈니스 정체성을보다 정확하게 일치시킬 수 있습니다.

사이드 바 마크 업 작성 및 스타일 지정

1

사이드 바에 표시 할 내용을 결정하고 나중에 사용할 수 있도록 일반 텍스트 문서에 사이드 바 내용 초안을 작성합니다.

2

텍스트 편집 응용 프로그램을 사용하여 스타일 지정을위한 태그가있는 새 HTML 문서를 만듭니다. HTML5 페이지 구조는 다음과 같아야합니다.

HTML5 문서 본문에 ID가 "sidebar"인 aside 태그를 삽입합니다. aside 태그는 다음과 같아야합니다.

4

사이드 바용으로 이전에 작성한 콘텐츠를 복사하여 aside 태그에 붙여 넣습니다.

5

표준 준수 마크 업을 사용하여 사이드 바 콘텐츠를 HTML5로 변환합니다. 예를 들어, 머리글은 머리글 태그 안에, 단락 내용은 단락 태그 안에, 링크 텍스트는 하이퍼 링크 참조가있는 앵커 태그에 묶습니다. 이것이 어떻게 작동하는지 확실하지 않은 경우 HTML 참조 가이드를 참조하십시오 (참고 자료 참조).

6

데스크탑에 HTML 문서로 파일 저장

7

웹 브라우저를 열고 "파일"을 선택한 다음 "열기"를 클릭하고 데스크탑에 저장 한 HTML 문서를 선택합니다. 브라우저에 스타일이 지정되지 않은 사이드 바가 표시됩니다.

8

텍스트 편집기로 돌아가서 스타일 태그 사이에 커서를 놓고 "#sidebar"선택기를 사용하여 사이드 바를 대상으로하는 마크 업 스타일을 지정합니다. 사이드 바의 스타일을 지정하는 방법은 취향, 기존 Tumblr 테마의 디자인 및 사이드 바의 마크 업에 따라 크게 달라집니다. CSS3 참조 가이드를 사용하여 속성과 해당 값을 올바르게 구성하고 있는지 확인하세요 (참고 자료 참조).

9

사이드 바를 왼쪽 또는 오른쪽에 둘 것인지 결정하고 그에 따라 float 속성을 할당하십시오. 예를 들어 사이드 바를 기본 콘텐츠의 왼쪽에 배치하려면 "#sidebar"선택기, float 속성 및 값이 다음과 같습니다.

float:left; 

}

10

브라우저에서 새로 고침을 클릭하여 사이드 바의 모양을 테스트하고 모양이 만족 스러울 때까지 마크 업 스타일을 계속 조정합니다.

Tumblr 테마에 사이드 바 삽입

1

Tumblr 대시 보드에 로그인하고 오른쪽 사이드 바에서 블로그 제목을 클릭 한 다음 "사용자 지정"을 클릭하고 "HTML 편집"을 클릭하여 Tumblr 소스 코드 편집기를 엽니 다.

2

열린 HTML 문서에서 CSS를 복사하여 Tumblr 테마의 스타일 영역 끝에 붙여 넣습니다.

Tumblr 편집기에서 기본 콘텐츠 영역에 대한 CSS 선택기를 찾고 중괄호 뒤에 커서를 놓고 사이드 바와 동일한 부동 속성 및 값을 할당합니다. 예를 들어 사이드 바가 오른쪽에 표시되도록하려면 컨테이너 선택기에 "right"값이있는 float 속성을 할당하십시오.

4

텍스트 편집기에서 aside 태그와 그 내용을 복사하여 Tumblr 테마의 body 태그에 붙여 넣습니다. 사이드 바가 주요 콘텐츠의 오른쪽에 나타나도록하려면 해당 컨테이너 뒤에 배치하십시오. 왼쪽에 표시하려면 기본 컨테이너 앞에 붙여 넣으십시오.

5

"미리보기 업데이트"를 클릭하고 "모양"을 클릭 한 다음 "저장"버튼을 클릭하여 테마 변경을 완료합니다.