친절한효자손 취미생활

티스토리 본문의 마지막을 장식하는 관련글 모듈 입니다. 이번에는 두번째 버전으로 스타일을 다르게 연출해 보았습니다. 현재 친효애드온 중 관련글 모듈은 한 종류밖에 없습니다. 점차 스타일을 변경해서 다르게 만들어 선보이도록 하겠습니다. 친효스킨 뿐만 아니라, 일반적인 모든 티스토리 스킨에서 사용이 가능합니다.


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 편집으로 들어가셔서 빈 공간을 만드시고 붙여넣기 해주세요.


친효애드온_관련글_마크2_CSS.txt




이렇게 그대로 붙여넣기를 해주시면 됩니다. 참고로 주석으로 일부 스타일 요소에 설명을 적어두었습니다. 글자 색상이나 마우스를 올렸을 때 나타나는 밑줄 색상을 변경하고 싶으시면 해당 부분을 직접 수정하시면 됩니다.


사용 방법

티스토리에서 제공하는 "이전 글 넣기" 플러그인을 활용하셔서 링크글을 직접 입력하세요. 그리고 HTML 편집 모드로 변경 후, 링크글들을 <div class="rgyTextBox2">이전 글 넣기</div> 형태로 감싸주시면 됩니다. 기본 형태는 이렇게 됩니다.


<div class="rgyTextBox2">

    <p><a href="#" target="_blank">관련글</a></p>

</div>


위의 검정 태그 부분은 이전 글 넣기를 사용했을 경우 생성되는 태그 형태이며, 빨간색 코드를 수동으로 직접 넣어주시기만 하면 됩니다. 글쓰기 에디터의 오른쪽 상단에 보시면 HTML을 체크해서 편집 모드로 변경할 수 있습니다.




이렇게 화살표가 가리키는 부분만 수동으로 입력하는 것 입니다. 그 안쪽에 있는 <p><a> 태그들은 이전 글 넣기로 넣은 링크 입니다. 이렇게 해서 완성되면 현재 보고 계신 이글의 맨 아래처럼 관련글 모듈이 세팅 완료 됩니다. 끝.





이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.