웹 페이지를 아래로 스크롤했는데 그 항목이 이동하지 않았다면 CSS 위치 태그가 작동하는 것을 목격 한 것입니다. 이 태그를 템플릿에 추가하는 Tumblr 블로거는 블로그에서 동일한 효과를 만들 수 있습니다. 이것을 시도하기 좋은 곳은 사이드 바입니다. 블로그의 HTML 코드에 위치 태그를 추가하면 사람들이 블로그 페이지를 위아래로 스크롤 할 때 사이드 바가 고정 된 상태로 유지됩니다.

Tumblr 대시 보드를 방문한 다음 설정 아이콘과 업데이트 할 블로그 이름을 클릭합니다. 블로그가 하나 뿐인 경우 이름을 클릭합니다.

"사용자 지정"을 클릭 한 다음 "HTML 추가"를 클릭합니다. Tumblr는 테마를 열고 HTML 코드를 표시합니다.

코드 내부를 클릭하고 "Ctrl-A"를 누른 다음 "Ctrl-C"를 눌러 코드를 Windows 클립 보드에 복사합니다. 새 메모장 문서를 열고 코드를 문서에 붙여 넣습니다. 이 단계는 원본 템플릿의 백업 복사본이 있는지 확인합니다.

Tumblr HTML 코드로 돌아가 "Ctrl-F"를 눌러 검색 창을 엽니 다. 검색 창에 "사이드 바"를 입력 한 다음 "Enter"를 누르십시오. Tumblr는 "사이드 바"의 첫 번째 항목을 찾아 해당 단어가 포함 된 코드 섹션을 표시합니다. 찾은 코드는 다음과 유사해야합니다.

wrapper #sidebar {color : {color : Background}; }

코드의 첫 번째 줄에는 #wrapper #sidebar라는 단어가 포함됩니다. 이러한 단어 뒤에는 왼쪽 대괄호가 표시됩니다.

코드의 첫 번째 줄 바로 아래에 다음 코드를 붙여 넣습니다.

위치 : 고정; 오른쪽 : 100px;

position 속성은 스크롤 할 때 이동하지 않도록 사이드 바를 수정하도록 브라우저에 지시합니다. right 속성은 웹 페이지의 오른쪽 여백에서 사이드 바의 오른쪽 가장자리를 배치 할 픽셀 수를 브라우저에 알려줍니다. 이 예에서 right 속성의 값은 100px입니다.

변경 사항의 미리보기를 보려면 "미리보기 업데이트"를 클릭하십시오. 창의 스크롤바를 위아래로 드래그하면 사이드 바가 움직이지 않는 것을 볼 수 있습니다. 변경 사항을 저장하려면 "저장"을 클릭하십시오.

팁

사이드 바의 수평 위치를 조정하려면 오른쪽 속성에 대해 다른 값을 실험 해 볼 수 있습니다. 예를 들어 값을 100px에서 50px로 변경하면 사이드 바가 오른쪽으로 50 픽셀 씩 이동합니다.

경고

실수로 기존 코드를 변경하면 페이지 레이아웃에 큰 영향을 미칠 수 있으므로 HTML 편집기에서 작업 할 때주의하십시오. 코드를 변경했는데 변경 사항을 실행 취소하는 방법을 알 수없는 경우 언제든지 HTML 편집기에서 모든 항목을 삭제하고 복사 한 백업 코드를 편집기에 붙여 넣어 원래 상태로 복원 할 수 있습니다.