TS-Suffusion(2012-02-17)-2.zip사이드바를 컨텐트 영역의 양쪽에 배치한 버전입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 사이드바가 좌측에 있더라도 html 코드상에는 컨텐트 다음에 나오고 검색엔진이 중요시하는 컨텐트가 앞서 나오므로 검색엔진 최적화시킨 스킨입니다. 이곳 의 글을 참고하세요 . 이 스킨은 사이드바에 넓은 사이즈의 광고를 배치할 수 없고 스카이스크래퍼형태의 세로로 긴 광고를 삽입할 수 있습니다. 물론 이전 버전들도 스카이스크래퍼는 배치할 수 있습니다. body 태그의 배경 색상을 변경하고자 하는 경우는 배경이미지 파일을 변경해야하므로 이전 글을 참고하세요.
스카이스크래퍼 형태의 광고를 삽입하려면 다음과 같이 설정합니다.
관리센터에서 사이드바 메뉴를 선택하면 사이드바가 두개밖에 없습니다. 처음 설치하고나면 사이드바 1에만 모듈이 있으니 모듈들을 원하는 위치에 배치합니다. 사이드바 1이 블로그화면에서 오른쪽입니다. 카운터모듈, 배너모듈-티스토리, RSS링크모듈은 순서대로 같은 사이드바에 위치해야합니다.
태그입력기를 클릭드래그하여 사이드바의 원하는 위치에 배치합니다. 3의 편집버튼을 클릭하면 태그편집창이 나옵니다. 이름을 입력하고 자신의 구글 애드센스 사이트에서 스카이스크래퍼 광고 스크립트를 복사해와서 붙여넣습니다. 둥근모서리의 배경이미지를 넣으려면 html 편집창에서 코드를 복사해오거나 아래의 예와 같이 입력합니다. 4의 모시리부분을 클릭드래그해서 아래로 내리면 늘어납니다. 코드를 입력하고 사용자 모듈에 저장에 체크한 다음 코드 내부를 클릭하여 Ctrl+A키를 누르면 전체가 선택됩니다. Ctrl+C키를 눌러 복사하고 두번째 태그입력기의 편집창에 붙여넣고 저장하면 됩니다. 다 마친 다음에는 우측 상단의 저장버튼을 클릭해야 완료됩니다.
회색배경부분이 광고코드입니다. 이것을 감싸는 div 태그를 1과 2처럼 삽입합니다. 이것은 위치조정을 위한 것으로 1의 div 태그에 style="margin-left:-2px;" 을 입력해줘야 균형이 맞습니다. 그리고 이 코드를 감싸는 3과 4의 둥근모서리의 배경이미지를 만드는 코드를 삽입하면 됩니다.
라이브리 댓글달기 기능을 사용하면 메뉴바의 애니메이션이 안됩니다. 라이브리를 해제하고 일반 댓글기능을 사용하거나 메뉴를 일반메뉴로 바꿔야합니다.
서치박스를 사이드바 모듈로 이동한 버전입니다. 서치박스를 이동하고 나면 메뉴바가 왼쪽으로 치우쳐있어서 보기 안좋으므로 오른쪽으로 펼쳐지도록 했습니다. 각 메뉴 폭의 조정은 CSS 편집창에서 #blogMenu li로 검색하면 #blogMenu2 li {margin-right:51px;} 가 있습니다. 수치를 조정하면 됩니다. 기존에 위스킨의 이전 버전을 설치한 경우 skin.html 파일과 style.css 파일을 텍스트 에디터에 열고 모든 내용을 복사해서 블로그의 HTML, CSS 편집창에 붙여넣으면 됩니다.
3의 카운터 모듈과 티스토리 배너모듈, RSS 모듈 세가지는 서로 떨어져 있으면 스킨이 엉망이 되고 항상 붙어다녀야 하므로 하나의 모듈로 수정했습니다. 사이드바 설정창에 보면 4처럼 하나의 모듈로 되어있습니다.
컨텐트 영역을 630픽셀로 줄이고 사이드바 영역을 늘린 버전입니다. 또한 footer의 폭도 컨텐트 영역의 넓이로 수정했습니다. 컨텐트 영역이 좁아지면서 구글광고 728사이즈는 삽입할 수 없지만 스킨위자드에서 700으로 늘리면 가능합니다. 하지만 전체적인 폭이 넓어지므로 바람직하지 않습니다. 사이드바의 폭이 넓어지면서 스카이스크래퍼 광고가 들어가는 폭이 넓어져서 광고 삽입시 margin을 -2px에서 16px로 수정해야합니다.
더보기
'CMS/티스토리 가이드' 카테고리 관련글
