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 부분으로 와서 적당히 빈 공간을 만들어 붙여넣기만 하면 된다. 그리고 저장을 눌러서 한번 확인해 보도록 한다.




사이드바로 들어오면 이렇게 추천 포스트 모듈 이라고 새로운 모듈이 만들어졌다. 배치하고자 하는 위치로 드래그해서 끌어다 놓으면 끝이다.




이렇게 추천 모듈이 사이드바에 잘 적용이 되었음을 확인할 수 있다. 복잡하게 보이지만, 알고보면 쉽다. 한번 적용시켜 보도록 하자. <ㄲ>



●관련글 : [친절한효자손] 티스토리 블로그 사용법



"친절한효자손 취미생활" 을 검색!


저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
    • 2017.01.04 21:47
    비밀댓글입니다
    • 안녕하세요, 이 추천글 모듈은 Fastboot 스킨에서 정상적으로 출력되요. 다른 스킨에서는 오작동 합니다.
  1. 반응형 스킨 쓰고 있는데요. 님처럼 광고 넓적하게 나오게할려면 스카이크래퍼? 이걸로 달면 되나요??
  2. 그리고 로딩속도가 엄청 빠르신데 어떻게 하면 이렇게 빠르게 바꿀 수 있나요?? gzip인가 그거써도 안되던데
    • 아이고 답변이 늦었습니다; 이제 봤네요. 로딩속도가 빠르다고요? 저는 아직 이게 느리다고 생각되는데... 빠르다고 하시니..그런가보다 싶네요.ㅎㅎ Fastboot 이 좀 반응속도가 빠른 편인 것 같긴 합니다. 광고 넓적하게 나오는건 반응형 코드를 특정 사이즈 이상에서는 이렇게 나오라고 수정을 한겁니다. 하지만 무조건 큰 광고가 나오진 않고, 간혹 336X280 사이즈로 출력되곤 합니다.
  3. 저 궁금한게 있는데요 현재 fastboot 1.62 반응형스킨을 쓰고 있는데 드롭다운? 효자손님 같이 메뉴 선택하면 밑으로
    좌르르 나오게 하는건 어떻게 하는건지 알수 있을까요?^^
    • 안녕하세요, 메뉴 선택하면 밑으로 좌르르 나오게 하는건....아마 그거겠죠? 구글 웹번역기 모듈 말씀이죠? 그거라면 가로로 세팅해서 하심 됩니다.
  4. 음 그러니까 효자손님 처럼 카테고리를 누루면 그 안에 글들이 나열 되는거처럼 똑같이 하고 싶어요 세부(10) <- 요거를 누루면 10개들들이 제목이랑 간단하게 나열되는거요! 포스팅 하신글은 없는거 같아서요 ^^;
  5. 감사합니다 효자손님 최고에요^^
  6. 정말 감사합니다 :)