워드프레스 쇼핑몰, 웹사이트

사이트 이미지
쇼핑몰

남성의류 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
웹사이트

회원관리 사이트

회원관리 프러그인을 이용한 학회 홈페이지.

사이트 이미지
쇼핑몰

면도기 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

사이트 이미지
쇼핑몰

해외 쇼핑몰

해외 대상 쇼핑몰. 다양한 플러그인 사용됨.

사이트 이미지
쇼핑몰

강아지 용품 정기결제 쇼핑몰

우커머스의 정기결제(Subscription) 플러그인을 이용한 쇼핑몰.

포트폴리오 보기

커스텀 디자인

여러 종류의 플러그인을 이용해 페이지와 콘텐츠를 커스텀 디자인

Brizy Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Elementor Pro

페이지 빌더

다양한 콘텐츠를 만들 수 있는 프론트 엔드 페이지 빌더

Advanced Custom Field Pro

사용자 정의 필드

커스텀 콘텐츠 작업에 필요한 플러그인

Pods

사용자 정의 콘텐츠 타입

기본 콘텐츠 타입외에 다양한 형태의 콘텐츠 생성.

블로그




사이드바를 컨텐트 영역의 양쪽에 배치한 버전입니다. 이곳 을 클릭하면 테스트 블로그로 이동합니다. 사이드바가 좌측에 있더라도 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로 수정해야합니다.

댓글 (10)

댓글 목록

이츠하크 access_time

역쉬 멋집니다. 본문크기를 700으로 늘려도 상관이 없겠지요? 베누시안님...
요것은 제 블로그 스킨으로 써야 겠습니다. 이거 맨날 날로 먹는 기분이라서 죄송한 마음 금할 길 없습니다. 베누시안님의 홍보대사 역할은 해 내도록 노력해 보겠습니다. ^^

베누시안 access_time

안녕하세요. 기본이 본문 게시글 700으로 되어있으니 그대로 사용하시면 되고 스킨위자드에서 늘리거나 줄여도 사이드바를 제외하고 자동으로 모든 영역의 크기가 바뀌게 되어있습니다.

잉여토기 access_time

와, 이거 좋네요.
양 옆을 다 사이드바로 쓸 수 있으니.
캡처의 광고배치 광고가 본문도 안 해치고 좋을 거 같은데요.

베누시안 access_time

안녕하세요. 반갑습니다. 사이드바를 양쪽으로 배치한 것을 선호하는 것 같습니다. 좋게 봐주셔서 감사합니다.

까움이 access_time

호오, 역시 베누시안님,
재밌게 읽었습니다.
어느정도 공부를 하다 보니 슬슬 눈에 보이는군요 ㅎㅎ

베누시안 access_time

안녕하세요. 까움이님. 이제 재미를 느끼시는군요. 웹페이지가 내마음대로 된다는게 정말 재미있는 일이죠.^^

까움이 access_time

저..그러면 본문과 사이드바를 포함한 전체가 몇px나 되는건가요?..
제가 이거 보고 무작정 따라하려다가 많이 실패를 하네요 T.T
뭘 잘못했는지 본문을 700픽셀로 잡으니까 사이드바가 축 쳐지고요...
흐미야..... 힘듭니다 ㅋ_ㅋ

베누시안 access_time

블로그 스킨만들기는 처음하면 뭐가뭔지 모르게 됩니다. 되도록이면 CSS 기초부분을 보시고 레이아웃에 대한 이해를 하신다음에 스킨만들기를 해보시는 것이 좋습니다. 하다가 계속 막히게 됩니다.

까움이 access_time

혹시 하실까봐 ... leader35.tistory.com에 테스트로 개설해 놨습니다.
CSS가 생각보다 많이 헷갈리네요.
Div도 건들기만 하지 제대로 만들지도 못하구요 ㅠㅠ

*참! 블로그는 언제부터 시작하신건가요? 궁금합니다 ㅎㅎ*

베누시안 access_time

블로그 만들기만 하시려면 되도록 베이직 스킨을 설치하고 그대로 해보세요. 블로그는 작년 6월부터 했답니다.