티스토리 카테고리의 다른글 썸네일 이미지 표시 방법

카테고리의 다른글 썸네일로 표시하고 싶다면

분명히 글로 발행했다고 생각했는데 말입니다. 아무리 찾아봐도 글이 없습니다. 또요. 요즘 이런 일이 자주 생기는데요. 왜 그런지 모르겠네요. 대체 왜 이럴까요? 여튼 어떤 방문자님께서 이메일로 본문 하단에 있는 카테고리의 다른글 썸네일 이미지 표시 방법을 물어 오셨습니다. 그리고 소스를 공유해 달라고 부탁하시더군요. 저도 뜯어온 것이니 뜯어 가셔도 됩니다. 응?



카테고리의 다른글 썸네일 이미지


티스토리 카테고리의 다른글 썸네일 이미지 목록입니다. 카테고리의 다른글 썸네일은 티스토리에서 공개한 반응형 스킨 #2에서 뜯어 온 것입니다. 2년~3년 전에 말이죠.


카테고리의 다른글 썸네일 이미지 목록은 티스토리 스킨이면 구현 가능하니 아래 내용 참고하시고 적용하시면 되겠습니다. 마크쿼리 스킨 사용하신다면 아래 소스를 수정없이 적용하시면 되네요. 그럼 위와 같이 우월한 썸네일 목록으로 보여집니다.



마크쿼리 스파이더웹 카테고리의 다른 글


참고로 마크쿼리 스파이더웹 4.0의 카테고리 다른 글은 위와 같이 나옵니다. 스킨과 전혀 어울리지 않죠.



기본형 카테고리의 다른 글


기본형이 훨씬 깔끔하고 보기 좋습니다. 하지만 카테고리의 다른글 썸네일 이미지가 보기에도 그렇고 클릭율도 월등히 우월한 수준입니다.


카테고리의 다른글을 썸네일 이미지로 표시하는 방법은 생각보다 쉽습니다. 신경써서 다듬으면 더욱 우월하게 만들 수 있지만 귀찮아서 살짝만 수정했었네요. 2~3년 전에 말이죠.



티스토리 카테고리 글 더 보기 플러그인


티스토리 카테고리의 다른글을 썸네일로 보여지게 하고 싶다면 우선 먼저 플러그인에서 카테고리 글 더보기를 비활성 시켜야 합니다. 중복으로 보여지게 해도 되긴하지만 중복이니 좀 거시기 하니 플러그인을 사용 안 함으로 변경해주시고요.



vgal.js


스킨 HTML/CSS 편집에서 HTML에 마지막 부분 </body> 위에 위와 같이 1번 소스를 추가해 줍니다.


이 때 vgal.js은 다운로드 받아 자신의 스킨 파일업로드에 올린 후 해당 파일 경로로 변경해 주는 것이 좋습니다. 다른 블로그에 업로드된 파일을 가져다 사용해도 되긴 하지만 파일이 삭제되면 썸네일 목록이 보여지지 않게 되니까요. 참고로 소소의 var width = 180; 부분 숫자를 변경하여 썸네일 이미지의 가로 크기를 변경할 수 있습니다.



HTML 편집


만약 마크쿼리 스파이더웹 4.0 이외의 다른 스킨에 적용하고 싶다면 2번 소스를 1번 소스 위 혹은 </head> 위에 추가해 주면 됩니다. 제이쿼리 버전은 큰 상관이 없는 것 같으니 1.x 버전이 이미 스킨에 적용되어 있다면 2번 소스는 패스하셔도 됩니다.



카테고리의 다른 글 더 보기


3번 소스를 HTML에 추가해야 하는데, 카테고리의 다른글 썸네일 이미지가 표시될 위치에 추가해 주면 됩니다. 참고로 몽리 블로그는 태그 소스 부분 <div class="entry-tags">의 바로 위에 추가 되어 있습니다.



css 소스


.css 하단에 4번 소스를 추가해줍니다. 마크쿼리 스킨을 사용한다면 수정없이 사용해도 될 것인데요. 자신의 블로그 스킨에 맞게 글씨 색상이나 링크 색상 등을 변경하여 사용하시면 되겠습니다.


카테고리의 다른글 썸네일 이미지 표시 소스


1~4번 소스는 위에서 복사하여 사용하시면 되겠습니다. 수정이고 사용이고 다 맘껏 하시면 되는데요. 제가 귀차니스트이기에 as는 없습니다.



카테고리의 다른 글 모바일


PC에선 글 첫 번째 이미지 혹은 아래에 있는 카테고리의 다른글 보기처럼 표시 됩니다. 모바일에선 위와 같이 지가 알아서 쪼그라들어 2단으로 표시 됩니다. 끝~


©몽리, 꿈속으로(mongri.net), 무단전재 및 재배포 금지. 공유와 직접 링크를 선호합니다.
[저작권 규약, 운영 원칙 및 이용자 준수 사항]