티스토리 블로그 스킨 만들기 – 사이드바를 컨텐트 영역의 양쪽에 배치한 스킨으로 수정한 버전(2/18 업데이트됨)

cfile2.uf.1457023A4F3DD9913097F9.zip

사이드바를 컨텐트 영역의 양쪽에 배치한 버전입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 사이드바가 좌측에 있더라도 html 코드상에는 컨텐트 다음에 나오고 검색엔진이 중요시하는 컨텐트가 앞서 나오므로 검색엔진 최적화시킨 스킨입니다. 이곳 의 글을 참고하세요 . 이 스킨은 사이드바에 넓은 사이즈의 광고를 배치할 수 없고 스카이스크래퍼형태의 세로로 긴 광고를 삽입할 수 있습니다. 물론 이전 버전들도 스카이스크래퍼는 배치할 수 있습니다. body 태그의 배경 색상을 변경하고자 하는 경우는 배경이미지 파일을 변경해야하므로 이전 글을 참고하세요.

스카이스크래퍼 형태의 광고를 삽입하려면 다음과 같이 설정합니다.

 
관리센터에서 사이드바 메뉴를 선택하면 사이드바가 두개밖에 없습니다. 처음 설치하고나면 사이드바 1에만 모듈이 있으니 모듈들을 원하는 위치에 배치합니다. 사이드바 1이 블로그화면에서 오른쪽입니다. 카운터모듈, 배너모듈-티스토리, RSS링크모듈은 순서대로 같은 사이드바에 위치해야합니다.

태그입력기를 클릭드래그하여 사이드바의 원하는 위치에 배치합니다. 3의 편집버튼을 클릭하면 태그편집창이 나옵니다. 이름을 입력하고 자신의 구글 애드센스 사이트에서 스카이스크래퍼 광고 스크립트를 복사해와서 붙여넣습니다. 둥근모서리의 배경이미지를 넣으려면 html 편집창에서 코드를 복사해오거나 아래의 예와 같이 입력합니다. 4의 모시리부분을 클릭드래그해서 아래로 내리면 늘어납니다. 코드를 입력하고 사용자 모듈에 저장에 체크한 다음 코드 내부를 클릭하여 Ctrl+A키를 누르면 전체가 선택됩니다. Ctrl+C키를 눌러 복사하고 두번째 태그입력기의 편집창에 붙여넣고 저장하면 됩니다. 다 마친 다음에는 우측 상단의 저장버튼을 클릭해야 완료됩니다.

회색배경부분이 광고코드입니다. 이것을 감싸는 div 태그를 1과 2처럼 삽입합니다. 이것은 위치조정을 위한 것으로 1의 div 태그에 style=”margin-left:-2px;” 을 입력해줘야 균형이 맞습니다. 그리고 이 코드를 감싸는 3과 4의 둥근모서리의 배경이미지를 만드는 코드를 삽입하면 됩니다.

라이브리 댓글달기 기능을 사용하면 메뉴바의 애니메이션이 안됩니다. 라이브리를 해제하고 일반 댓글기능을 사용하거나 메뉴를 일반메뉴로 바꿔야합니다.

cfile2.uf.155842384F46E3842F37CB.zip

서치박스를 사이드바 모듈로 이동한 버전입니다. 서치박스를 이동하고 나면 메뉴바가 왼쪽으로 치우쳐있어서 보기 안좋으므로 오른쪽으로 펼쳐지도록 했습니다. 각 메뉴 폭의 조정은 CSS 편집창에서 #blogMenu li로 검색하면 #blogMenu2 li {margin-right:51px;} 가 있습니다. 수치를 조정하면 됩니다. 기존에 위스킨의 이전 버전을 설치한 경우 skin.html 파일과 style.css 파일을 텍스트 에디터에 열고 모든 내용을 복사해서 블로그의 HTML, CSS 편집창에 붙여넣으면 됩니다.

3의 카운터 모듈과 티스토리 배너모듈, RSS 모듈 세가지는 서로 떨어져 있으면 스킨이 엉망이 되고 항상 붙어다녀야 하므로 하나의 모듈로 수정했습니다. 사이드바 설정창에 보면 4처럼 하나의 모듈로 되어있습니다.

cfile7.uf.1229034F4F46E1051C3593.zip

컨텐트 영역을 630픽셀로 줄이고 사이드바 영역을 늘린 버전입니다. 또한 footer의 폭도 컨텐트 영역의 넓이로 수정했습니다. 컨텐트 영역이 좁아지면서 구글광고 728사이즈는 삽입할 수 없지만 스킨위자드에서 700으로 늘리면 가능합니다. 하지만 전체적인 폭이 넓어지므로 바람직하지 않습니다. 사이드바의 폭이 넓어지면서 스카이스크래퍼 광고가 들어가는 폭이 넓어져서 광고 삽입시 margin을 -2px에서 16px로 수정해야합니다.

Related posts:

  1. 티스토리 스킨 만들기 – 방명록, 태그 제목 리본 수정, 사이드바 제목 리본추가 버전 방명록, 태그, 공지사항, 사이드바 제목 부분에 리본을 추가한 버전입니다.  cfile8.uf.1840A5444F4F585A084528.zip 글자의 색상과 배경색상을 변경하려면 #sidebar h3를 검색하여 색상코드를 바꿔주면 됩니다....
  2. 티스토리 블로그 스킨 만들기 – 3단형 스킨 공개 이전글에서 마무리한 2단형 스킨을 3단형으로 변경하였습니다. 이 3단 스킨을 토대로 여러가지 형태로 변경하여 사용할 수 있습니다. 2단형은 물론 1단형으로도 변경이...
  3. 티스토리 블로그 스킨 만들기 4 – 사이드바 영역 배경이미지 만들기 사이드바 영역의 배경이미지는 가로로 늘어나지 않기 때문에 컨텐트영역의 배경이미지보다는 간단합니다. 하지만 모듈이 여러개 배치되므로 각 모튤마다 배경이미지를 만들어줘야합니다. HTML부분에서는 클래스...
  4. 티스토리 블로그 스킨 만들기 7 – 사이드바와 모듈 이전글에서 티스토리 블로그 스킨의 사이드바는 티스토리 고유의 태그를 사용한다고 했습니다. 그 태그란 <s_sidebar></s_sidebar>로 일반적인 html에서 사용하는 태그 괄호를 사용하므로 태그라고...
  5. 티스토리 블로그 스킨 만들기 – 현재까지 진행된 스킨을 공개합니다. “티스토리 블로그 스킨 만들기”라는 타이틀로 만들고 있는 스킨은 이웃블로거이신 이츠하크님의 요청으로 시작해서 거의 마무리 단계에 있습니다. 지금까지 만든 것으로도 충분히...

댓글 남기기