loading

친절한효자손 취미생활

제 블로그를 살펴보시면, 관련글 부분이 어느 순간부터 다른 디자인으로 이루어져 있다는걸 확인하실 수 있습니다. 아직 잘 모르시겠으면 여기를 방문하셔서 관련글들의 디자인을 살펴보실 수 있습니다. 다른 블로그와의 차별성을 두기 위해, 혹은 좀 더 개성넘치지만 과하지 않은 디자인을 생각하다보니 이렇게 구성을 해 봤습니다.


관련글 마크1 사용방법

1. 먼저 본 페이지에서 제공하는 첨부파일을 다운로드 받습니다.

2. 첨부파일 안에 있는 CSS 내용을 자신의 티스토리 스킨의 CSS에 붙여넣기를 합니다.

3. 글 작성시, 수동으로 div로 감싸줍니다.


크게 이 세가지로 진행됩니다. 2번까지는 쉽습니다. 3번에서는 좀 더 추가설명을 드리도록 하겠습니다.


HTML <head> 안쪽에 폰트어썸 CDN 세팅하기

아이콘 세팅을 위한 단계입니다. 자신의 스킨안에 있는 HTML 카테고리에서 <head> 안쪽에 다음의 주소를 입력해 주시기 바랍니다.


<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


참고로 친효스킨에는 위의 링크가 기본 세팅되어 있습니다. 다른 스킨을 사용하시면 꼭 세팅해 두시기 바랍니다. 아래에 텍스트 파일로 올려두도록 하겠습니다.


부트스트랩 폰트어썸 CDN.txt


CSS 세팅하기

먼저 아래의 첨부파일의 메모장을 다운로드 해주시기 바랍니다.


친효애드온-관련글(CSS).txt


다운로드 받은 CSS의 내용을 살펴보시면 다음과 같습니다.


/* 친효애드온 : 관련글 마크1 시작 */

.rgyTextBox {

    overflow: hidden;

    padding: 10px;

    box-shadow: 5px 5px 15px 0 #555;

}


.rgyTextBox > p {

    overflow: hidden;

    background: #f00;

    transform-origin: right;

}


.rgyTextBox > p a {

    display: inline-block;

    width: 100%;

    height: auto;

    padding: 5px;

    color: #555;

    transform-origin: right;

    transition: all 0.15s;

    -webkit-transition: all 0.15s;

    -moz-transition: all 0.15s;

    -o-transition: all 0.15s;

    -ms-transition: all 0.15s;

    background: #eee;

}


.rgyTextBox > p:hover a {

    box-sizing: border-box;

    font-weight: bold;

    color: #222;

    transform: scaleX(0.97);

    -webkit-transform: scaleX(0.97);

    -moz-transform: scaleX(0.97);

    -o-transform: scaleX(0.97);

    -ms-transform: scaleX(0.97);

    background: #ddd;

}


.rgyTextBox > p a::before {

    content: "\f105";

    font-family: FontAwesome;

    margin-right: 10px;

    color: #222;

}

이 모든 내용을 자신의 스킨안의 CSS에 아무곳에나 붙여넣기를 해주세요.


저는 상단의 @font-face 관련 요소 아래에 붙여넣기를 해서 사용하고 있습니다. 참고만 해주세요.


HTML 사용법

먼저 플러그인에서 "이전 글 넣기" 기능이 활성화 되어 있어야겠습니다. 아니면 수동으로 글을 작성하시고 링크를 걸어두셔도 상관 없습니다. 개인적으로는 이전글넣기가 훨씬 편해서 늘 이용하고 있습니다. 대체로 저는 본문 맨 마지막에 관련글을 넣으므로 마지막 부분에 이렇게 작성을 해둡니다.


제 글의 마무리는 늘 "친절한효자손 취미생활" 을 검색! 이라는 문구가 있습니다. 바로 위에 저렇게 태그를 임시로 작성해 두었습니다. 빨간색 부분이고요, 초록색 빈 공간에 바로 관련글을 첨부해 두는 것 입니다. 아까 말씀드린대로 플러그인의 이전 글 넣기 기능을 이용해서 현재 이 글과 관련이 있는 글들을 빠르게 넣을 수 있습니다. 실제로 이 글을 작성하면서 방금 관련글을 넣었는데 모습은 이렇습니다.


이렇게 되어있습니다. 친효애드온 관련글 두개를 넣었습니다. 이제 거의 다 끝났습니다. 태그 정리만 해주시면 됩니다.


태그 수정을 위해서 오른쪽 상단에 있는 HTML에 체크합니다. 그러면 현재 글 작성하는 모드가 HTML 태그 모드로 변경되는것을 확인하실 수 있습니다. 맨 아래쯤에서 rgyTextBox 를 찾으세요.


찾으셨나요? 저기 빨간색 박스 부분이 아까 미리 입력해둔 태그이며, 초록색이 방금 이전 글 넣기로 입력해둔 관련 링크글 부분입니다. 이제 빨간색 태그만 정리해주시면 됩니다. 아래에 태그 부분을 한번 더 자세히 적어보겠습니다.


<div class="rgyTextBox">

    <p><a href="URL주소" target="_blank">링크글 제목</a></p>

    <p><a href="URL주소" target="_blank">링크글 제목</a></p>

</div>

최종적으로 이렇게 만들어 주시면 됩니다. 한 마디로 rgyTextBox 라고 하는 클래스명을 가진 div로 링크글을 감싸주시면 됩니다. 주황색 부분 처럼 말입니다.


네. 이렇게 작성해 주시면 끝납니다. 그러면 다시 HTML 체크를 풀고 글 작성 모드로 돌아와서 관련글 부분을 확인해 보세요.


아까 미리 작성해 두었던 태그가 사라진것을 확인하실 수 있습니다. 이렇게 되면 정상입니다. 이제 미리보기를 하셔서 잘 적용이 되었는지 확인해보시면 됩니다.


보시는 것 처럼 잘 적용이 된 것을 확인하실 수 있습니다. 조금 복잡해 보여도 익숙해지면 금방 적응하실 수 있으실 것입니다. 여기 본문 맨 아래에 실제 관련글이 있습니다. 마우스로 올려보시면 애니메이션 효과도 나타납니다. 직접 살펴봐주세요.


관련글에 소제목 넣기

이 방법은 div 안쪽에 <span> 태그를 활용하여 넣어주기만 하면 됩니다.


<div class="rgyTextBox">

    <span>이 글도 읽어보세요</span>

    <p><a href="URL주소" target="_blank">링크글 제목</a></p>

    <p><a href="URL주소" target="_blank">링크글 제목</a></p>

</div>

이렇게 주황색 태그 부분처럼 입력해주시면 적용 됩니다. 그리고 "이 글도 읽어보세요" 부분의 텍스트는 사용자 임의대로 변경해서 사용하면 됩니다.


앞으로 친효애드온은 이런 식으로 사용하게 될 것입니다. 제가 코딩에 대해 더 많은것을 알게되면 좀 더 사용하기 편리하도록 제작하겠지만 지금은 이게 한계입니다. (울음) 그래도 많이 이용해 주시고 다양한 애드온을 만들도록 좋은 아이디어 있으시면 댓글로 많이 알려주시면 감사하겠습니다. 끝.

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 우와 너무 신기해요! 쉽게 알려주셔서 저도 도전해볼 수 있을 것 같습니다^^
    2019.01.04 09:57 신고
  2. 비밀댓글입니다
    2019.01.28 20:15
    • 안녕하세요! red 라고 되어 있는 부분을 원하시는 16진수 코드로 변경하시면 됩니다.
      2019.01.29 00:25 신고
  3. 이전글 보기 이뻐서 적용해봅니다. 감사합니다. 아 최신 에디터에서는 p 태그때문에 한칸식 밀리네요 ㅠㅠ
    2019.06.27 21:57 신고
    • 이전 에디터를 사용해보시기를 바랍니당. 최신에디터는 버그가있어서 쓰지않고있어요.
      2019.06.28 03:29 신고
  4. 이런 좋은 팁을 공유해주셔서 정말정말 감사합니다. ^^

    책도 구매하려고 하는데 제가 갔던 서점은 품절이더군요. ㅎㅎ

    인터넷으로 구입하겠습니다.
    2019.08.27 13:44 신고
  5. 좋은 스킨과 좋은내용 잘 사용하겠습니다. 항상 감사합니다.
    2020.02.23 20:42 신고
  6. 왜저는 안될까요!! ㅠ_ ㅠ
    2020.04.30 11:36 신고