Fastboot v1.6.2 사이드바 추천글 모듈 설치 및 수정하기

티스토리에는 인기 게시글(?) 목록 치환자가 없나봐요.

설령 있다해도 인기의 기준이 모호하겠지만요. 

굳이 한다면 공감버튼 카운팅해서? 음...

원하지 않는 글이 인기글이 될 수도 있겠구요. 

블로그 최적화 문제도 있다고 하네요.

 

이런 목마름을 해결하라고

Fastboot 제작자 readiz님께서 사이드바 추천 포스트 모듈 추가하는 방법을 설명해주셨습니다.

그동안 혼자서 뻘짓하면서 Fastboot 스킨 커스터마이징을 해왔는데....

보다보니 이것저것 도움되는 포스팅이 있었어요.. 주르륵

 

http://blog.readiz.com/228  

 

 

 

전 이렇게 추천글 모듈을 사용 중입니다.

추천글 모듈은 직접 html을 입력하여 각각의 포스팅을 불러오도록 되어있기 때문에

필요한 용도에 따라 다양하게 활용이 가능할 것 같아요. 임의의 주제로 그룹화 할 수 있으니까요.

 

 

 

 

#1. 사이드바 추천글 모듈 html

 

텍스트 파일을 열면 아래 그림과 같은 코드가 적혀있습니다.

FastBoot 사이드바 추천글 모듈 html.txt

 

아래 그림의 노랗게 체크 되어 있는 부분만 수정해주시면 됩니다.

 

a href="포스트 링크 주소" 

img src="썸네일 주소"

alt="썸네일 텍스트 설명" 

 

<li></li>의 태그로 묶여있는 빨간 박스가 한 개의 리스트를 나타냅니다.

추천글 리스트 10개 만들고 싶다면 빨간박스 10개 반복하면 돼요.

위의 예시대로면 4개의 추천글이 보여지겠죠.

<span></span>으로 묶여있는 초록박스는 뱃지입니다.

방문자들로 하여금 호기심을 유발하여 페이지뷰를 늘릴 수 있도록 하는 마케팅 효과를 노립니다.

 

 

포스트 주소는 게시글 주소창을 보면 아래와 같이 숫자나 entry/문자로 되어있으니 확인하시면 됩니다.

 

썸네일 주소는 너무도 잘 아실테지만 혹시나 해서...

포스팅한 사진의 마우스 오른클릭 하셔서 속성을 보시면 URL이 나옵니다.

썸네일 관련 포스팅을 보셨다면, 이를 응용하여 직접 이미지 파일을 티스토리에 업로드하여 나타내게 할 수도 있겠죠?

 

☞ Fastboot v1.6.2 기본썸네일 이미지 변경하기

 

 

readiz님 포스팅에서는 썸네일 주소에 /original/이 있어서 그 부분을 /C80x80/으로 바꾸라고 했는데요.

지금은 그 부분이 없고 대신 /image/ 가 있습니다.

워낙 옛날 글이라서......

썸네일을 알아서 작은사이즈로 불러오게끔 변경되었는지... 어쩌는지 저도 잘 모르겠어요.

이럴 땐... 미심쩍으므로.. 그냥 /image/를 /C80x80/으로 바꿔주었습니다.

/C80x80/으로 바꾼다고 해서 실제로 썸네일 로딩 사이즈에 영향을 주는지는 확인은 못했습니다만,

되면 땡큐고 안 되면 할 수 없구요.

왠지 로딩이 빨라지는 건 기분탓?..................하하하

 

 

태그 입력위치는

사이드바 모듈 부분 아무데나 넣어도 됩니다만, 이왕이면 아래 그림의 ②번 위치에 넣어주세요.

추천 글이니만큼 맨위로 올라오는게 좋기도 하고, 어차피 순서는 관리 < 사이드바 에서 간단히 수정할 수도 있구요.

 

관리 < 꾸미기 < HTML/CSS 편집 < HTML 에서

[ 블로그 설명 모듈 ]을 검색하면 빨리 찾습니다.

 

 

 

#2. 사이드바 추천글 모듈 뱃지 속성 변경하기

 

이번에는 CSS를 볼게요. 썸네일과 뱃지에 관련한 스타일을 다루고 있습니다.

readiz님이 제공해주신 코드에 마우스 오버시 뱃지 색상이 변경되는 것을 추가했습니다.

 

FastBoot 사이드바 추천글 모듈 css.txt

 

#recommended span.name>span 부분이 뱃지의 기본 속성입니다.

뱃지 배경색과 텍스트 색상을 비롯하여 기타 속성을 변경하고 싶으시면 저 부분들을 수정해주시면 됩니다.

 

그리고 마지막 제가 덧붙인 #recommended ul li:hover span.name>span 태그는

마우스오버시 뱃지 배경색과 텍스트색이 변경되는 태그 입니다.

전 뱃지를 사용하지 않기 때문에 개의치 않았는데 효자손님이 궁금해하셔서 추가했습니다.

원치 않는다면 해당 속성을 삭제하시면 돼요!

 

태그 입력 위치는 그냥 CSS 맨 밑에 삽입해주시면 됩니다.

스샷은 따로 올리지 않을게요. 히히..... 귀찮아서가 아니에요 절대...

 

적용 후 어떻게 바뀌었는지 볼까요.

테스트 블로그에서 뱃지 달아보니 잘 되네요.  만족만족!

 

블로그에 포스팅 된 양질의 글이

묻히지 않고 많은 방문자들에게 노출이 되게끔 설정할 수 있는 모듈이니

적극적으로 활용하시면 좋을 것 같습니다.

여러분도 잘 적용하시길 바라요!