친효애드온 : 관련글 모듈 마크4

오랜만에 친효애드온을 하나 만들어 봤습니다. 관련글 모듈입니다. 이번이 네번째 버전이 되겠습니다. 어떤 스타일을 가지고 있는지 한번 살펴보도록 하겠습니다. 아래에 예시로 올려봤습니다. 마우스를 한 번 올려보시기 바랍니다.

기본 스타일은 기존과 동일합니다. 하지만 마우스를 올려보시면 입체적으로 해당 링크가 살짝 튀어나온 것 처럼 보여지게 연출을 해 봤습니다. 개성 넘치지 않습니까? 예전부터 이런 스타일로도 한번 만들어봐야겠다고 생각했는데 계획대로 잘 된 것 같아서 기분이 좋습니다. 이제 세팅을 해봅시다.

CSS 세팅하기

먼저 CSS 부터 세팅하도록 하겠습니다. 아래의 첨부파일을 받아 주시기 바랍니다.

친효애드온 - 관련글 모듈 마크4 CSS.txt

이 파일을 자신의 스킨 CSS에 빈 공간을 확보하고 전체를 그대로 붙여넣기 해주시면 됩니다.

웹폰트 세팅하기

아래의 주소를 스킨의 HTML 문서 안에 있는 <head>와 </head> 사이에 붙여넣기를 합니다. 이미 자신의 스킨에 이 링크가 등록되어 있다면 굳이 이 작업은 필요 없습니다.

사용 방법 (HTML 세팅)

마지막으로 사용 방법 입니다. 기존에 설명드렸던 친효애드온 : 관련글 방법과 동일합니다. 먼저 글을 다 작성하시고 삽입하고자 하는 위치에서 이전 글 넣기 플러그인으로 관련글 링크를 불러옵니다. 혹은 수동으로 링크글을 넣으셔도 됩니다.

</div>

여기에서 <p><a href="#" target="_blank">글 제목</a></p> 태그 부분이 바로 입력한 링크글 입니다. 이 링크글 꾸러미를 노란색 태그처럼 감싸주시기만 하면 됩니다. 티스토리 글쓰기 에디터에서는 HTML 수정 모드도 제공하고 있으니까 해당 기능을 이용해서 감싸주면 됩니다. 이렇게 하시면 글쓰기 모드에서는 표시가 되지 않지만 미리보기나 발행 버튼을 누르고 완성된 글 문서를 보시면 잘 적용이 되어 있다는것을 확인하실 수 있습니다. 끝.

이 글도 읽어보세요

친효애드온 관련글 마크1 업데이트 - 소제목 넣기 기능 추가

티스토리와 함께 정신없이 달려온 2019년 지난 날을 돌아보다

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