Material T 커스텀 강좌 - 사이드바 추가하기
적용가능 버전:mark1,2,3,4,5
material T스킨에 원하는 사이드바 요소를 추가하는 방법입니다.
아래는 리스트 형식의 사용자 모듈 예제입니다.
<!-- 사용자 모듈 Mark1,2용 -->
<div class="card">
<div class="card-header ripplelink lessed">
<i class="ic-more_vert"></i>
<h3><i class="ic-info"></i> 사용자 모듈</h3>
</div>
<div class="card-listed-content">
<ul>
<li class="ripplelink" onclick="window.open('url')">내용</li>
</ul>
</div>
</div>
<!-- 사용자 모듈 (Mark 3 이후버전용) -->
<div class="card">
<div class="card-header ripplelink lessed">
<i class="ic-more_vert"></i>
<h3><i class="ic-info"></i> 사용자 모듈</h3>
</div>
<div class="card-listed-content">
<ul>
<li class="getThumb">
<a class="buttonAnchor ripplelink" href="url">내용
</a>
</li>
</ul>
</div>
</div>
첫줄부터 빨간색 글자에 대한 설명입니다.
-사용자 모듈 : 모듈의 이름을 정해서 입력합니다.
-lessed : 그대로 쓰면, 사이드바가 기본으로 접힘상태로 나타나며, 클릭했을 때 펼쳐지게됩니다. 기본을 펼침으로 쓰려면 지우세요.
-ic-info : 사이드바 제목 왼쪽에 나오는 아이콘입니다. 사용할 수 있는 아이콘 목록은 아래 파일에서 확인하세요.
material-desigin-icons-demo.html
-사용자 모듈: 사이드바의 제목입니다.
-card-listed-content : 리스트형식의 사이드바일경우 사용합니다. 리스트형식이 아닌 경우 "card-content ripplelink"로 바꿔 쓰시면 됩니다.
※리스트 형식이 아닌 경우 <ul>~</ul>을 삭제하고 넣고싶은 html코드를 넣으면 됩니다.
-url:리스트를 클릭했을 때 이동할 url을 입력합니다.
-내용:리스트 내용을 입력합니다.
리스트를 추가하려면 <li class=~~ 내용 </li>을 </ul>위로 한줄씩 추가하면 됩니다.
수정을 마친 후에 전체를 복사해서
관리화면에서 HTML배너 사이드바를 하나 추가합니다.
편집창을 열어서 수정한 코드를 붙여넣습니다.
위치를 조정하고 저장을 누르면 끝입니다.
추가된 사이드바의 예시입니다.
2015.03.26 21:54 신고
터무니 없는 질문일 수 있습니다. 잘 몰라라서요 ㅎ... 친절한 설명대로 따라하니 카드는 추가가 되었는데 javascript 코드는 그 내용 표현이 원래 안나타나는 건가요? 제겐 필요한 거라 별도의 카운트 소스 코드를 가져와 넣었는데 표현이 안 되는군요...
2015.03.26 22:12 신고
자바스크립트에 따로 표현함수가 있다면 표시되는게 정상입니다~
2015.03.26 22:27 신고
참고로 여쭤보려고 소스코드를 넣으니 댓글이 달리지가 않는군요 금칙어가 있다면서... 표현함수가 뭔지 모르는데... 자꾸 깊이 빠져들면 곤란한데... 머리 아파서요 ㅎ 따로 찾아봐야겠군요. 암튼 감사요
2015.03.26 22:38 신고
네..^^ 해당 스크립트 사용법을 잘 알아보세요~
2015.03.28 16:01 신고
생성된 카드에서 컨텐츠가 들어가는 부분의 카드 높이를 수동으로 지정해 줄 수 있는 방법이 있습니까?자바스크립트 소스가 들어갔는데 처음 디폴트는 높이가 작지만 누군가 방문을 하면서 늘어나거든요. 그런데 카드가 거기 맞춰서 늘어나질 않아서 그럽니다. 도움 말씀 부탁드릴게요...
2015.03.28 23:28 신고
높이를 제한하고 있진 않습니다..
컨텐츠가 늘어나면 카드도 늘어나는게 정상인데요.
지금은 스킨을 바꾸셨는지 확인해드릴수가없네요
2015.03.28 23:53 신고
하단에 'Live Traffic feed'입니다. 수고스럽겠지만 언제 시간 나시면 뭐가 문제인지 도움될 만한 게 있으면 알려주십시오. 감사합니다 항상...ㅎ
2015.03.29 00:38 신고
카드들은 로딩되면서 컨테이너 2개에 나눠 이동하게되는데, 그과정중에 스크립트가 실행되면서 자신의 위치를 찾지못해서 그랬던것 같네요.
<div id="sidebar-col1" class="sidebar-col"></div>
의 사이에 (</div>앞에)
모듈을 삽입해놓으면 됩니다.
예를들면
<div id="sidebar-col1" class="sidebar-col">
<s_sidebar_element>
<!-- 사용자 모듈 -->
<div class="card">
<div class="card-header ripplelink">
<i class="ic-more_vert"></i>
<h3><i class="ic-info"></i> 사용자 모듈</h3>
</div>
<div class="card-content ripplelink">
<script type="text/javascript" src="http://feedjit.com/serve/?vv=1515&tft=3&dd=0&wid=&pid=0&proid=0&bc=FFFFFF&tc=545454&brd1=CCCCCC&lnk=6AA5C4&hc=878787&hfc=FFFFFF&btn=62BBDE&ww=300&wne=10&srefs=1"></script><noscript><a href="http://feedjit.com/">Live Traffic Stats</a></noscript>
</div>
</div>
</s_sidebar_element>
</div>
이런식으로 삽입하면 될겁니다. 하지만 이 경우 이 카드의 순서를 바꾸기는 어렵습니다
2015.03.29 09:32 신고
말씀하신대로 코드 수정을 해놨는데 변화가 없는 것 같습니다
2015.05.04 07:33 신고
안녕하세요 뭐하라님.
사이드바에 카테고리를 삽입해보려고 하는데, 티스토리 치환자는 해당 코드 안에서 작동하지 않네요. 혹시 카테고리를 우른쪽 사이드바에서 카드 형태로 불러올 수 있는 방법이 있을까요?
2015.05.05 11:52 신고
늦어서 죄송합니다 본문에 내용추가했습니다^^
2015.06.12 12:55 신고
뭐하라님 항상 수고 많으십니다! 올려주신 코드로 카테고리 모듈을 만들었는데 제목만 뜨고 카테고리 리스트가 뜨지 않네요 ㅜㅜ 치환자를 인식 못 하는 것 같은데 다른 분들은 잘 되시는건가요? 도움 부탁드립니다!
2015.06.13 00:12 신고
아 그렇네요..
카테고리 치환자는 html에서 한번만 불러올수있게 되어있네요
간단히 추가할 수 있는 부분이 아니었군요.
다음버전에서 개선해보는 수 밖에 없겠습니다..
2015.06.13 00:14 신고
html에서 한 번만 불러올 수 있다는 것은
Drawer에서 이미 썼기 때문에 못 쓴다는 건가요?
일단은 당장 급한 것은 아닙니다^^
빠른 답변 감사합니다!!
2015.06.13 00:35 신고
네 그렇습니다..
2015.06.13 00:37 신고
그렇군요 ㅜㅜ
여러가지 여쭙고 싶은 것이 많지만
인내심을 갖고 다음 업데이트 기다려보겠습니다!
덕분에 Material Design에 대해서도 굉장히 흥미를 갖게 되었습니다.
다시 한 번, 좋은 스킨 공유해주셔서 정말 감사합니다~
2015.07.10 17:14 신고
##
2015.07.15 23:56 신고
글약간 내렸을때 오른쪽 하단에서 이건어때요? 뜨는건 어떻게하나요?
2015.07.15 23:59 신고
addthis라는 플러그인입니다~
2016.05.23 22:30 신고
HTML 배너출력이 없는데 어떻게 추가하나요??
2016.05.25 02:01 신고
사이드바메뉴에서 추가하시면됩니다
2016.05.25 08:58 신고
사이드바메뉴에서도 HTML 배너출력이 없습니다..보관함에도 없고 기본모듈에도 없습니다 ㅠ ㅠ
2016.05.25 09:01 신고
플러그인에서 활성화되어있는지 확인해보세요~
2016.05.27 17:39 신고
감사합니다!!
2017.01.19 11:43 신고
Material T Skin Mark5를 잘 사용하고있는데요~ 혹시 http://whos.amung.us/ 이 사이트의 동시접속자 표시 위젯을 적용할 순 없을까요?
2017.01.19 15:16 신고
내용부분에 위젯을 넣으시면될것같습니다
2017.01.20 11:44 신고
Material T Skin Mark5 를 사용하려고 하는데 사이드바가 오른쪽에 있습니다 아래로 어떻게 옮기죠... 4시간 동안 헤메네요
2017.01.20 15:07 신고
5.2말고 5 사용하시는것맞나요? 5사용중이시라면 스킨설치를 처음부터 다시해보시길 바랍니다
2017.08.01 02:58 신고
덕분에 큰 도움 얻어서 추천 포스트 사이드바를 추가했습니다. 근데 몇 가지 궁금한 점이 생겨서 질문을 좀 드리려고 합니다.
사이드바에 있는 링크나 포스트를 클릭했을 때 현재 창 말고 새 창에서 열리게 하는 방법이 혹시 있나요?
그리고 게시글에 i class="ic-info" 항목에 사용할 수 있는 아이콘 목록을 보려면 '여기'를 누르라고 되어 있는데 링크가 안 열리네요,,
2017.08.04 10:20 신고
<a class="buttonAnchor ripplelink" href="url">내용
</a>
이부분을
<a class="buttonAnchor ripplelink" href="url" target="_blank">내용
</a>
이렇게 넣으시면 새창에서 열립니다
아이콘 목록은 수정했습니다감사합니다
2017.08.04 12:22 신고
귀찮으실텐데 하나하나 답변해주셔서 정말 죄송하고 감사합니다 ㅠㅠㅠ