Whatever스킨 - 사이드바 인기글/최신글 썸네일 추가

안녕하세요! 토미타미입니다. 오늘은 whatever스킨 사이드바 인기글/최신글 모듈에 썸네일을 추가하는 방법을 작성하려고 합니다. 제가 썸네일을 추가한 이유는 단 한 가지예요. 눈에 띄지 않는다! 밑에 사진에서도 확인하실 수 있겠지만 사이드바에 있는 인기글/최신 글에 썸네일 없이 제목만 달랑 있는 건 정말 눈에 띄지 않는 것 같아요. 그래서 예전부터 변경해야지~ 하곤 미루다가 요즘에 들어서야 변경하고 글을 작성하게 됐네요ㅎㅎ.

생각해보면 다른 인기 스킨은 인기글이나 최신글에 썸네일이랑 제목을 같이 나오게 설정이 돼 있어서 따로 이런 고생은 하지 않아도 되던데. Whatever스킨은 블로그보단 홈페이지용으로 제작된 게 아닐까 싶을 정도로 커버는 이쁘게 꾸며져 있는데. 블로그로 사용될 만한 기능은 많이 없는 것 같아요. 정말 이런 거 보면 whatever스킨은 탈출이 답이다. 그럼 포스팅 시작하겠습니다.

 

함께 보면 좋은 포스팅:

[티스토리 블로그] 사이드바에 구글 애드센스 광고 넣는 법

Whatever 스킨 오른쪽에 사이드바 만들기

[티스토리 블로그] whatever스킨 커버 슬라이드 자동 넘김 설정하기

Whatever 왓에버 스킨 헤더 고정하는 법 / 목록 상단 광고 부분 잘림 현상 해결

 

 

 

 

변경 전 / 후 비교

 

변경 전 (왼쪽) 변경 후 (오른쪽)

우선, 변경 전과 변경 후 부터 비교하고 넘어가겠습니다. 변경 전 이미지를 보시면 뭔가 되게 클릭하고 싶지 않게 생기지 않았나요? 굉장히 작은 이미지인데도 이게 이미지가 있고 없고 차이가 엄청 심한 것 같아요. 그만큼 썸네일이 있는 게 중요하다! 그리고 사실 외관상 보기에도 훨씬 더 깔끔한 느낌이 들어요. 이번 건 크게 어려운 작업은 아닙니다. 필요한 기본적인 코드는 텍스트 파일에 저장해뒀으니 아래 텍스트 파일을 다운받아주세요!

 

↓↓↓다운받아주세요↓↓↓

whatever스킨 인기글 썸네일 구현.txt

0.00MB

 

 

 

 

CSS 추가

 

HTML 편집을 하기 전에 CSS를 먼저 추가해주도록 할게요. [스킨 편집-HTML 편집-CSS] 순으로 들어가 주세요. Whatever스킨 기준으로 찾기 기능으로 aside를 검색해주시고 다운받은 텍스트 파일에서 CSS 부분을 복사해서 붙여 넣기 해주시면 됩니다. 

#aside .box-recent .list-recent li {
    margin-bottom: 5px;
}

#aside .box-recent .list-recent li:last-child {
    margin-bottom: 0;
}

#aside .box-recent .list-recent .link-recent {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    text-decoration: none;
}

#aside .box-recent .list-recent .thumbnail {
    width: 120px;
    height: 80px;
    margin: 0 12px 0 0;
    background-size: cover;
    background-position: 50% 50%;
}

#aside .box-recent .list-recent .thumbnail+.box-recent{
	width: 60%;
}

#aside .box-recent .list-recent .box-recent {
		width: 100%;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.54;
    color: #333;
}

#aside .box-recent .list-recent .box-recent strong {
    display: block;
    margin-bottom: 2px;
    font-weight: 400;
	 font-size: 15px;
}

#aside .box-recent .list-recent .box-recent span {
    color: #999;
}

 

 

 

HTML 편집

 

[스킨편집-HTML 편집-HTML]순으로 들어가주세요. 이번에도 동일하게 aside를 검색해서 aside 부분으로 넘어가겠습니다. <s_sidebar> 바로 아래 텍스트 파일 HTML편집 부분을 붙여 넣어주시면 됩니다. 글의 게시 날짜를 추가하고 싶으시다면 하단에 를 추가해주면 됩니다.

어디든 넣어도 상관없지만 가장 위에 있는 아래쪽에 넣어주시는 게 찾기도 쉽고 실수도 줄일 수 있습니다. 자세한 구성은 아래에 있는 것과 동일한 형태입니다. HTML 편집을 하기 전엔 꼭 백업을 시키고 하시는 걸 추천드려요! 그럼, 포스팅 여기서 마치겠습니다. 궁금하신 점 있으시면 댓글 남겨주세요!

<s_sidebar_element>
<!-- 최근 포스트 -->

	 <div class="box-recent">
                <h2>최근 포스트</h2>
                  <ul class="list-recent">
                    <s_rctps_rep>
                      <li>
                        <a href="" class="link-recent">
                          <s_rctps_rep_thumbnail>
                            <p class="thumbnail" style="background-image:url('')"></p>
                          </s_rctps_rep_thumbnail>
                          <div class="box-recent">
                            <strong></strong>
                          </div>
                        </a>
                      </li>
                    </s_rctps_rep>
                  </ul>
									
                </div>					
		</s_sidebar_element>

	<s_sidebar_element>
    <!-- 인기 포스트 -->
	
	<div class="box-recent">
  <h2>인기 포스트</h2> 
                  <ul class="list-recent">
                    <s_rctps_popular_rep>
                      <li>
                        <a href="" class="link-recent">
                          <s_rctps_rep_thumbnail>
                            <p class="thumbnail" style="background-image:url('')"></p>
                          </s_rctps_rep_thumbnail>
                          <div class="box-recent">
                            <strong></strong>
                          </div>
                        </a>
                      </li>
                    </s_rctps_popular_rep>
                  </ul>
                </div>				
</s_sidebar_element>