친효애드온 : 관련글 모듈 (마크2)
티스토리 본문의 마지막을 장식하는 관련글 모듈 입니다. 이번에는 두번째 버전으로 스타일을 다르게 연출해 보았습니다. 현재 친효애드온 중 관련글 모듈은 한 종류밖에 없습니다. 점차 스타일을 변경해서 다르게 만들어 선보이도록 하겠습니다. 친효스킨 뿐만 아니라, 일반적인 모든 티스토리 스킨에서 사용이 가능합니다.
HTML 세팅하기
어썸폰트가 들어가므로 <head> 안쪽의 <title> 태그 아래쪽에 다음의 링크를 삽입해 주시기 바랍니다. 첨부파일로 올려두겠습니다.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
친효애드온_폰트어썸링크_HTML.txt
이렇게 붙여넣기를 해주시면 됩니다.
CSS 세팅하기
첨부파일로 올려드렸습니다. 다운로드 받으시고 메모장에 있는 내용을 모두 복사하시고 사용하시는 티스토리 스킨의 CSS 편집으로 들어가셔서 빈 공간을 만드시고 붙여넣기 해주세요.
이렇게 그대로 붙여넣기를 해주시면 됩니다. 참고로 주석으로 일부 스타일 요소에 설명을 적어두었습니다. 글자 색상이나 마우스를 올렸을 때 나타나는 밑줄 색상을 변경하고 싶으시면 해당 부분을 직접 수정하시면 됩니다.
사용 방법
티스토리에서 제공하는 "이전 글 넣기" 플러그인을 활용하셔서 링크글을 직접 입력하세요. 그리고 HTML 편집 모드로 변경 후, 링크글들을 <div class="rgyTextBox2">이전 글 넣기</div> 형태로 감싸주시면 됩니다. 기본 형태는 이렇게 됩니다.
<div class="rgyTextBox2">
<p><a href="#" target="_blank">제목</a></p>
</div>
노란색 태그를 제외한 <p><a href="#" target="_blank">제목</a></p> 부분이 이전 글 넣기로 생성된 태그 영역입니다. HTML 수정 모드에서 노란색 태그 코드를 수동으로 직접 넣어주시기만 하면 됩니다. 참고로 글쓰기 에디터의 오른쪽 상단에 보시면 HTML을 체크해서 편집 모드로 변경할 수 있습니다.
이렇게 화살표가 가리키는 부분만 수동으로 입력하는 것 입니다. 그 안쪽에 있는 <p><a> 태그들은 이전 글 넣기로 넣은 링크 입니다. 이렇게 해서 완성되면 현재 보고 계신 이글의 맨 아래처럼 관련글 모듈이 세팅 완료 됩니다. 끝.
"친절한효자손 취미생활" 을 검색!
