Fastboot 반응형스킨 사이드바 추천글 모듈 설치 방법
필자의 블로그를 보면, 오른쪽 상단 부분에 추천글 박스가 별도로 있는 것을 확인할 수 있을 것이다. Fastboot 스킨 중 마음에 드는 모에포인트 중 하나로서, 좀 더 자신의 블로그가 전문화되어 보이며 블로그 체류 시간을 조금이나마 늘릴 수 있는 효과를 가지고 온다. 따라서 필자와 같은 Fastboot 스킨을 쓰시는 분들은 무척이나 유용한 모듈이지 않나 싶다.
방법은 다소 복잡할 수 있는데, 차근차근 하나하나 습득해가면서 따라하면 금새 적용시킬 수 있는 방법이므로 편하게 한번 읽어나가며 진행해보도록 하자.
피가되고 살이되는 블로그, 친절한효자손의 취미생활!
글, 사진 및 이미지 ▶ CopyLeft(C) 유길용
#CopyLeft(C) 는 저작권의 반대개념으로, "모든것을 공유한다" 는 뜻 입니다#
#공유라는 개념은 그대로 복붙하시라는 개념이 아니라, 내용을 응용해서 가져가시라는 말씀입니다#
#사진과 이미지의 일부는 퍼온것도 있음을 밝힙니다#
Fastboot 반응형스킨 사이드바 추천글 모듈 설치 방법
우선은 준비해야 할 것 있다. 썸네일 이미지 (사이즈 80X80) 그리고 링크될 주소가 필요하다. 이미지는 보통 글 속에 있는 이미지 아무거나 준비해도 되지만, 보통 글에는 대형 이미지가 대부분인데 큰 이미지를 로딩하면 조금이나마 렉이 있을 수 있으니 필자 같은 경우는 그냥 아예 작은 이미지를 별도 티스토리에 업로드해서 사용하는 것을 권장한다.
FastBoot 사이드바 추천글 모듈.txt첨부파일을 열면, 이렇게 다소 긴 코드가 마련되어 있다. 여기에서는 이것만 기억하면 된다.
1. 파란색 화살표가 가리키는 곳에 링크 주소를 올리면 된다. 자신의 티스토리 링크로 가는 것이라면 /숫자 이렇게만 입력하면 될 것이고, 타사이트로의 이동이라면 http:// 로 시작하는 풀주소를 넣으면 된다.
2. 빨간색 화살표가 가리키는 곳에는 이미지 주소를 넣으면 된다.
3. 초록색 상자 부분은 제목을 입력하면 되는데, 앞에는 두 칸 띄우고 텍스트를 입력한다. 미간상 보기가 좋아지기 때문이다.
또한, <li class="list-group-item"> 부터 </li> 까지는 하나의 칸 이라고 생각하면 된다. 지금 총 네개가 들어 있으므로 필자의 메인화면 추천글 모듈은 총 네 칸이 나타나 있는 것이다. 따라서 해당 코드 부분만 추가적으로 넣으면 칸이 더 생성이 되기도 하고 반대로 뺄 수도 있는 것이다.
그리고 <span> 이 부분은 무엇이냐하면, 일종의 마케팅 효과를 불러일으킬 수 있는 문구를 넣는 태그이다.
바로 이 것이다. 적절히 응용해서 마케팅 효과를 줄 수 있도록 하자.
우선 링크를 걸 주소를 하나 메모장에 복사해두자.
그리고 HTML/CSS편집 으로 들어간다.
파일업로드에서 올리고자 하는 이미지를 업로드 해 둔다.
아래 추가 버튼을 눌러서 80x80 사이즈의 이미지를 업로드 한다.
그리고 미리보기 이미지가 나오면, 마우스 오른쪽 버튼을 눌러 이미지 주소 복사를 해 둔다.
이리하여 이렇게 이미지 주소와 링크 주소 모두를 확보하였다. 이제부터는 아까 위에서 받은 첨부파일에서 작업을 한다.
링크 주소는 앞 부분은 필요 없고 (티스토리 이므로) /1501 부분만 저렇게 큰따옴표 안에 입력한다. 그리고 이미지 주소는 그대로 큰따옴표 안에 붙여넣는다. 제목은 알아서 정하면 되겠다. 이런식으로 나머지 부분도 모두 채워주면 된다.
이제 HTML 부분에서 Ctrl+F를 눌러 s_sidebar 를 검색한다. 그러면 딱 하나가 검색이 된다.
방금 수정한 추천글 코드를 적절한 위치에 붙여넣기를 한다. <s_sidebar> 아래에 넣어야 한다.
아직 끝이 아니다. 첨부파일 내용 중 이 코드도 있을 것이다. 여기는 딱히 수정할 건 없다. 여기도 복사해둔다.
이번엔 CSS 부분으로 와서 적당히 빈 공간을 만들어 붙여넣기만 하면 된다. 그리고 저장을 눌러서 한번 확인해 보도록 한다.
사이드바로 들어오면 이렇게 추천 포스트 모듈 이라고 새로운 모듈이 만들어졌다. 배치하고자 하는 위치로 드래그해서 끌어다 놓으면 끝이다.
이렇게 추천 모듈이 사이드바에 잘 적용이 되었음을 확인할 수 있다. 복잡하게 보이지만, 알고보면 쉽다. 한번 적용시켜 보도록 하자. <ㄲ>
"친절한효자손 취미생활" 을 검색!
