Section 25 - 티스토리 반응형 스킨 만들기 - [사이드바] 링크

이번 섹션에서는 "링크"를 다뤄보겠습니다.

링크는 내가 추가한 블로그나 사이트를 내 블로그에 표시하는 기능으로 웹브라우저 북마크를 블로그에서 관리하고 접속한다고 생각하시면 됩니다.
또한 다른 티스토리 블로그에서 내 티스토리 블로그를 추가하면 누가 내 블로그를 링크 추가했는지도 확인이 가능하므로 모니터링이 가능한 장점이 있습니다.
제 개인적인 생각이지만 네이버에 서이추(서로 이웃 추가)가 있다면 티스토리 블로그에는 서링추(서로 링크 추가) 기능이 있는 거라고 보시면 되겠네요;;;

이런 링크 목록을 아무곳에나 출력하기보다는
내가 추가한 블로그나 사이트를 블로그 목록을 다소곳하게 보이게 하려면 글 본문보다는 사이드바에 위치하여 어느 페이지에서도 접근하기가 용이하게 만들기위하여 사이드바 모듈로 만들도록 하겠습니다.

그럼 하나하나씩 순차적으로 진행해보겠습니다.

 

 

 

STEP 1. 내 링크 추가하기

• 블로그 관리 -> 링크 -> 내가 링크 메뉴로 접근합니다.
• "내가 링크" 페이지에 접근하여 "+ 링크 추가" 버튼을 클릭합니다.

링크 추가하기 1

 

 

링크 추가하기 2

1. 추가할 블로그나 사이트의 웹 주소를 입력합니다.
2. 추가한 웹주소의 이름을 입력합니다.
3. "추가" 버튼을 클릭합니다.

 

 

링크 추가완료

• 블로그나 사이트를 추가하면 위와같이 자동으로 저장이 완료됩니다.
• "+ 링크 추가" 버튼을 클릭하여
• 이제 링크 사이드바 모듈을 만들준비는 끝났습니다.

 

 

 

STEP 2. skin.html 사이드바 링크 모듈 코드 추가

                    
                        
                        

                            
LINKS
                            

                                
                                    

                                
                            
                        
                    

• <s_link_rep></s_link_rep> : 링크가 반복 출력되는 영역 지정
• : 링크 사이트로 이동할 주소
• : 링크 사이트 이름

 

 

 

STEP 3. 사이드바에 링크 모듈 추가

• skin.html에 링크 모듈 코드를 추가한 후 사이드바 영역에 링크 모듈을 추가합니다.
• 블로그 관리 -> 꾸미기 -> 사이드바 설정

사이드바에 링크 모듈 추가

1. "링크" 모듈을 사이드바 영역이 지정합니다.
2. "변경사항 저장" 버튼을 클릭하여 저장
   ※ 위의 그림처럼 모듈 지정 및 순서를 똑같이 하실필요 없습니다.
   링크 모듈만이라도 잘 나오게 하셔야 화면과 코드를 비교하실 수 있으므로 사이드바 추가 방법을 알려드리는 것입니다.

 

 

 

STEP 4. skin.html 사이드바 링크 모듈 구조

사이드바 링크 모듈 코드 구조

1. <s_link_rep></s_link_rep> 영역안에는 링크의 주소와 이름이 추가한만큼 반복적으로 출력되는 영역입니다.
2. 치환자는 링크 주소, 링크명 두개만 사용합니다.

 

 

 

STEP 5. style.css 사이드바 링크 모듈 스타일 추가

/* links */
.links {}
.links ul {margin:6px 0 0; padding:5px 0 0; border-top:1px solid #e9e9e9; list-style:none}
.links ul li:before {font-weight:bold; content:"· "}
.links ul li:after {display:block; clear:both; content:''}
.links ul li {font-size:0.875em}
.links ul li a {display:inline-block; padding:4px 0 0;}
.links ul li a:hover, .links ul li a:active, .links ul li a:focus {color:#ff8149; text-decoration:none}
.links ul li a .cnt {font-size:0.75em; color:#ff8149}

태그 클라우드 모듈 스타일(.tags-box) 아래에 추가합니다.

 

 

 

STEP 6. 사이드바 링크 모듈 결과 확인

사이드바 링크 모듈 최종 결과

 

 

링크 사이트를 추가한 결과

• 블로그 관리 -> 꾸미기 -> 사이드바 - 사이드바 설정에서 "링크명" 글자수 설정이 가능합니다.
• 링크명의 글자수는 최대 30글자까지 표시합니다.(기본 30글자)
• 30글자 이상의 링크명을 사용시에는 위의 그림처럼 링크명의 30글자 뒤에 ".."으로 표시됩니다.

 

 

티스토리 블로그 사이드바 링크 모듈이 완성되었습니다.
다음 섹션에서는 "방문자수(counter)" 모듈에 대해 알아보겠습니다.

수고하셨습니다~