JB Factory 131 반응형 스킨 사이드바 모듈 태그 코드
요청이 있어서 포스팅 합니다. JB-Factory 131 스킨을 사용하시는 분들에게만 해당되는 내용이며, 다른 스킨에서는 소용이 없습니다. 예전 구버전 스킨에서는 작동이 안 될 수 있으며, 제가 작업한 환경은 V0.6.1 입니다. 참고하시기 바랍니다.
이 스킨이 업그레이드 되면서 사이드바에 인기글과 추천글 모듈이 새롭게 생성되었습니다. 드디어 정식으로 나왔네요. 구버전에서는 그냥 개인적으로 만들어서 사용하고 있었는데, 드디어 추천글 모듈을 제대로 사용할 수 있게 되었습니다. 해당 방법은 제작자님께서 직접 홈페이지에서 사용 방법에 대해 작성해 두었으니 읽어보시고 그대로 따라하시면 될 것 같습니다.
현재 제 스킨을 PC화면에서 보시게 되면 이렇게 사이드바쪽에 별도로 넣어놓은 모듈을 확인하실 수 있습니다. 이 글에서는 바로 이 모듈의 기본 형태에 대한 태그를 제공해 드리고 있으며, 어떻게 사용하는지에 대해서 말씀을 드리려 합니다.
JB131 사이드바 모듈.txt위의 첨부파일을 다운받으시고 열어보시면 위처럼 코드가 나와있을 것입니다. 우선 줄친 부분을 기준으로 위와 아래는 각각 용도가 다릅니다. 주황색 부분 태그들은 모두 사이드바에 사용되어지고, 나머지 밑줄 아래의 태그들은 스킨편집의 CSS에 넣어주셔야 합니다. 그리고 수정해야할 부분이 있습니다. 노란색으로 표시된 부분입니다.
먼저 모듈이름은 말 그대로 사이드바에 나타나는 이름 입니다. 원하시는대로 작성하시면 될 것 같습니다. 그리고 "●여기에 코드를 넣으세요●" 이 부분을 모두 지우고 넣고자 하는 위젯코드를 넣으시면 됩니다. 노란색으로 밑줄 표시된 ㅇㅇㅇ 부분은 그냥 영어로 아무거나 넣으세요. 이것을 넣는 이유는 바로 모듈 이름앞에 들어가는 그림 모양의 아이콘 때문입니다.
바로 저 부분입니다. 그래서 모듈을 두 개를 넣고싶다면 ㅇㅇㅇ 부분을 두번째 만들 때에는 서로 다르게 만들어야겠죠? 한 마디로 지금 저 위의 HTML 태그와 CSS 태그가 한 쌍인 것입니다. 이 두개가 정상적으로 작동해야 모듈에 오류가 없습니다. 그리고 ★모양에는 아이콘 코드를 넣으시면 됩니다. 사이트는 주석에 나와있듯 http://astronautweb.co/snippet/font-awesome/ 으로 가셔서 적당한 아이콘을 고르시고 해당되는 코드를 넣으시면 됩니다.
바로 이런 코드들을 말합니다. 주의할점은 큰따옴표를 조심하셔야 합니다. 큰따옴표는 한쌍만 들어갑니다. content : "\f00b" 이런식으로 넣습니다. 참고로 \는 역슬래쉬와 같은 특수문자 입니다.
모두 수정하셨으면 아까 말씀드린대로 점선 위의 태그들은 모두 플러그인의 HTML 소스에 넣고 적용시키시면 됩니다.
그리고 CSS에서도 적용시켜 주세요. 기왕이면 CSS 태그는 순서도 중요하기 때문에 속성이 비슷한 태그들 사이에 넣어주시는게 좋습니다. 저는 보시는 것 처럼 486행 다음쯤 넣었습니다. 참고하세요. 이렇게 하면 이제 여러분들도 원하시는대로 JB 131 스킨의 사이드바에 비슷한 디자인의 모듈을 생성하실 수 있습니다. 끝.
"친절한효자손 취미생활" 을 검색!
