티스토리 skeleton 스킨의 사이드바 구성하기

Tip!/티스토리

티스토리 블러그에 사용 가능한 반응형웹 skeleton 스킨을 자신의 블러그에 적용하고 꾸미기 위한 포스팅을 계속 하고 있습니다.


오늘 내용은 사이드바를 구성하는 것 입니다. skeleton 스킨은 이름에서도 알 수 있듯이 큰 뼈대만을 제공하고 있고, 기타 부수적인 부분들은 사용자가 직접 수정을 해서 사용해야 합니다.


skeleton 스킨을 적용하고 티스토리 관리자 페이지의 사이드바 설정에서 보시면 뭔가 허전한 느낌을 받습니다. 일반적인 스킨과는 다르게 카테고리, 공지사항, 태그, 최근 글, 최근 댓글, 트랙백 외에는 없고, 기본 모듈을 추가해서 사용을 하고자 해도 정상적으로 표시가 되지 않거나, 엉뚱한 곳에 위치되고는 합니다. 글쓴이도 처음 적용시 '이거 왜이래?' 하고 생각을 했지만, 지금은 나름데로의 방법을 찾아서 깔끔하게 꾸몄습니다. 아~ 약간의 수작업이 필요 합니다. =_= 사이드바 관련해서는 제작자이신 Markquery 님께 건의해서 수정이 되도록 해보겠습니다.


NOTE

Markquery 님께 문의 하였더니 HTML 배너 를 이용한 사이드바 추가에 대해서 글을 적어 주셨네요. 도움말 페이지 참고 하시면 좀 더 다양한 사이드바 구성이 가능 합니다.




사이드바 수정에 앞서...


지금부터 티스토리 기본 사이드바의 내용중 빠진 부분들을 추가하고, 자신이 원하는 사이드바 모듈(광고 배너, 네이버 이웃 커넥트 등)을 등록해서 사용하는 방법을 알아 보도록 하겠습니다.


    NOTE

  • skeleton 스킨은 기기의 해상도에 따라서 메뉴, 포스트 등 모든 구성이 최적화되어 자동으로 변경 됩니다. PC 화면에서의 사이드바가 테블릿이나, 모바일에서도 위치는 포스트 아래쪽으로 내려가지만 그대로 표시 됩니다. 중요한 점은 사이드바를 너무 많이 넣게 될 경우에는 모바일 화면에서 볼때 너무 길게 내려가기 때문에 적절히 관리를 하시는게 좋습니다.
  • 모바일 또는 테블릿 화면에서는 특정 사이드바가 표시되지 않도록 설정도 가능 합니다.

사이드바 수정 작업은 관리자 페이지 - HTML/CSS - skin.html 에서 가능 합니다. 앞전에 설명드린거와 같이 에디터에 내용을 복사해서 수정 작업을 진행 하시면 됩니다. 에디터에서 <s_sidebar> 를 검색하시면 사이드바의 모듈 코드가 모여 있는 곳으로 이동이 가능 합니다.


사이드바에 새로운 것을 추가하는 방법은 대부분 동일하고 코드도 비슷 합니다. 그래서 방문자 통계 추가하기에서 자세히 설명을 드리고 이후부터는 코드와 이미지 그리고 간단한 설명만 드리도록 하겠습니다.


NOTE 글쓴이가 사용하고 있는 doobedoo 스킨을 기준으로 작성 되었습니다. spidersweb 스킨에서는 내용이 조금 틀릴수도 있으나 아래 코드를 참고 하시면 수정이 가능할 거라 생각 됩니다.




방문자 통계 추가하기


<s_sidebar_element>
<!-- Status -->
<div class="col-sm-4">
<section class="widget">
<div class="widget-inner">
<h3>Status</h3>
<ul>
<li>Total : [##_count_total_##]</li>
<li>Today : [##_count_today_##]</li>
<li>Yesterday : [##_count_yesterday_##]</li>
</ul>
</div>
</section>
</div>
</s_sidebar_element>


사이드바에 넣기 위한 모듈(코드) 와 완성된 사이드바의 캡쳐 화면 입니다. <h3>Status</h3> 부분은 사이드바에 표시되는 이름 입니다. 바로 밑에 있는 <li>Total : [##_count_total_##]</li> 는 티스토리 치환자를 활용해서 전체 누적 방문자 수를 의미 합니다. 그밑에 있는 것은 오늘 방문자 수를 의미하고, 다음은 어제 방문자 수를 의미 합니다. 여기서 StatusTotal, Today, Yesterday 는 사이드바에 표시되는 부분이기 때문에 자신이 원하는데로 수정 하셔도 됩니다. 코드를 그대로 복사해서 사용해도 무관 합니다.


코드를 skin.html 에서 사이드바 모듈이 모여 있는 곳의 적당한 곳에 추가를 하시고 skin.html 파일을 저장 합니다. 관리자 페이지 -꾸미기 - 사이드바 로 이동 하면, 예전과는 다르게 좌측의 기본모듈에 Status 항목이 새롭게 생긴 것을 확인 할 수 있을 겁니다. 드래그해서 왼쪽의 사이드바 1 의 원하는 위치로 이동 시킨후 저장을 하시면 설정이 완료 됩니다.


Archive (글 보관함) 추가하기


<s_sidebar_element>
<!-- archive -->
<div class="col-sm-4">
<section class="widget">
<div class="widget-inner">
<h3>Archive</h3>
<ul>
<s_archive_rep>
<li>
<li><a href="[##_archive_rep_link_##]">[##_archive_rep_date_##] ([##_archive_rep_count_##])</a></li>
</li>
</s_archive_rep>
</ul>
</div>
</section>
</div>
</s_sidebar_element>


코드에서 사이드바 이름정도만 변경해서 바로 사용하시면 됩니다.


달력 추가하기


<s_sidebar_element>
<!-- Calendar -->
<div class="col-sm-4">
<section class="widget">
<div class="widget-inner">
<h3>Calendar</h3>
<p style="text-align: center;">[##_calendar_##]</p>
</div>
</section>
</div>
</s_sidebar_element>


코드에서 사이드바 이름정도만 변경해서 바로 사용하시면 됩니다.


네이버 이웃커넥트 추가하기


<s_sidebar_element>
<!-- Naver -->
<div class="col-sm-4">
<section class="widget">
<div class="widget-inner">
<p style="text-align: center;">자신의 이웃커넥트 Script</p>
</div>
</section>
</div>
</s_sidebar_element>


네이버 이웃커넥트 사이드바의 코드 입니다. <p style="text-align: center;">자신의 이웃커넥트 Script</p> 에 자신의 이웃커넥트 Script 를 넣고 사용을 하셔야 합니다. 자신의 이웃커넥트 Script 는 네이버 이웃커넥트 설치 페이지 를 통해서 위젯을 설치 하시면 Script 를 등록하라고 알려 줍니다.


그리고... 가시기전에 이웃추가 하고 가세요... ㅎㅎㅎ ~ =_=


이미지 광고 배너 추가하기


<s_sidebar_element>
<!-- CPA_1 -->
<div class="col-sm-4">
<section class="widget">
<div class="widget-inner">
<p style="text-align: center;">광고 코드</p>
</div>
</section>
</div>
</s_sidebar_element>


블러그를 운영하다 보면 때론 이렇게 광고를 넣는 경우가 많이 있습니다. 구글의 애드센스, CPA, CPC 이외의 기타 등등등... 기본적인 티스토리 스킨에서는 플러그인에서 HTML 배너 를 활성화 시키고 사이드바에서 간단하게 광고 코드를 넣으면 됩니다. 하지만, skeleton 에서는 HTML 배너 를 사용시 정확한 위치에 표시되지 않고, 전체적인 사이드바에도 영향을 주어 사용이 어렵습니다. 이 부분도 개선이 될거라 생각하고, 사이드바에 광고나 이미지 배너(체험단 엠브런 같은...) 넣기 위해서는 위의 코드를 참고해서 skin.html 을 수정하셔야 합니다. 방법은 위에서 설명드린 것과 동일 합니다. 광고 코드 가 들어가는 부분에 넣고 싶은 광고나 이미지 배너의 코드를 넣고, skin.html 에 추가 하시면 됩니다.




작업을 완료한 모습을 볼까요~


skeleton 스킨에서 기본적으로 제공하는 사이드바 외에 위에서 설명드린 부분들을 모두 추가 해봤습니다. 어떤가요? 나름 깔끔하게 정리된 모습인가요? doobedoo 는 1단형의 스킨으로 사이드바에 해당되는 부분이 포스트 하단으로 내려와 3열로 자동적으로 배치 됩니다. 글을 읽는 분의 주의를 산만하게 만들지 않고, 글에 집중 할 수 있도록 한것과 글을 작성하는 영역이 넓어서 이미지와 글을 잘 배치하면 보다 깔끔하고 가독성 높은 포스트를 작성 할 수 있는 것이 장점 이지만, 사용자 입장에서 사이드바가 좌/우측에 있는 거보다는 조금 불편 합니다. 이를 보완하기 위해서 있는 것이 블러그 상단의 메뉴바 입니다. 메뉴바 를 잘 구성 하시면 사이드바 못지 않는 기능들을 할 수가 있답니다. ^^





PC화면과 모바일 화면에서 사이드바 표시 다르게 하기


자~ 이렇게 해서 열심히 사이드바에 자신의 컨텐츠를 추가하고 꾸몄는데... 문제가 발생 합니다. 뭐냐? 바로 사이드바의 내용들이 모바일 화면에서는 1열로 바뀌어 길게 늘어선다는 겁니다. 이렇게 될 경우 모바일 화면에서 페이지 로딩도 오래 걸리게 되고, 블러그의 화면도 너무 길어진다는 단점이 있습니다. 이런 부분들을 해소하기 위해서 모바일 화면에서는 특정 사이드바를 보이지 않게 할 수가 있습니다. 이 부분은 구글 애드센스 광고를 기재할때에도 유용하게 활용이 가능 합니다.


<s_sidebar_element>
<!-- CPA_1 -->
<div class="col-sm-4">
<section class="widget">
<div class="widget-inner">
<p style="text-align: center;">광고 코드</p>
</div>
</section>
</div>
</s_sidebar_element>

변경전

<s_sidebar_element>
<!-- CPA_1 -->
<div class="visible-md visible-lg">
<div class="col-sm-4">
<section class="widget">
<div class="widget-inner">
<p style="text-align: center;">광고 코드</p>
</div>
</section>
</div>
</div>
</s_sidebar_element>

변경후


변경전과 변경후의 사이드바의 광고 코드 입니다. 달라진 부분이 보이시나요? <div class="visible-md visible-lg"> 컨텐츠 </div> 라는 새로운 코드가 추가 되었습니다. 간단하게 설명 드리면 PC 화면과 같이 해상도가 넓은 화면에서만 광고를 표시 하라는 뜻 입니다. 반대로 <div class="visible-sm visible-xs"> 는 모바일 화면과 같이 낮은 해상도를 가진 화면에서만 표시가 됩니다. 글쓴이 같은 경우는 달력, 글 보관함, CPA 광고, 네이버 커넥터 등은 모바일 화면에서는 굳이 필요가 없어 표시가 되지 않게끔 설정 했습니다. 이 부분을 잘 활용하시면 구글 애드센스 광고에도 적용하여 적절한 광고 배치가 가능 합니다.




마무리


오늘은 skeleton 스킨에서 사이드바를 추가하고 관리하는 방법에 대해서 알아 봤습니다. 사이드바를 잘 활용하시면 각종 컨첸츠를 배치하고, 광고 배너나 엠블런 같은 것을 추가하는게 매우 간편 합니다. 그리고, PC 화면 과 모바일 화면을 구분하여 적절히 사용을 하시면 깔끔한 블러그를 꾸밀 수 있답니다. 언제나 궁금하신 점은 댓글 남겨 주세요~ 성심성의껏 답변 드리도록 하겠습니다. ^^




글쓴이의 다른 포스트 보기