저자정보 및 푸터에 사용자 소셜 추가하기

탕비수다 이마고 스킨은 대표적인 소셜 계정 링크를 쉽게 설정할 수 있도록 기능(http://tangbisuda.tistory.com/3#guide-social-config)을 제공하고 있습니다. 더불어 몇 번 업데이트를 통해 추가적으로 소셜 계정 링크를 추가했습니다. 하지만 모든 소셜 계정을 스킨 기능에서 제공하는 것은 어렵다는 생각합니다. 따라서 사용자가 임의로 특정 소셜 링크를 추가할 수 있도록 팁을 제공하고자 합니다.

일단 아래 코드를 한 번 살펴보세요.

<script type="text/javascript">
  $( document ).ready(function() {
    /**
    * 저자정보 소셜 추가:
    */
    $( '.author-desc ul' ).append( $( '<li/>' ).html( '<a href="//ch.kakao.com/">storychannel</a>' ) );

    /**
    * 푸터 소셜 추가:
    */
    $( '#footer .social ul' ).append( $( '<li/>' ).html( '<a href="//ch.kakao.com/" target="_blank" title="스토리채널"><img src="./images/ico_storychannel.png" width="20" height="20"></a>' ) );
    $( '#footer .social' ).show();
  });
</script>

사용자 소셜 추가하기는 자바스크립트를 모를 경우 어려울 수 있습니다. 다만, 아래 그림에서 볼 수 있는 것처럼 body 태크가 끝나는 부분 위에 해당 코드를 추가하면 됩니다. 단, 굵은 글씨로 된 부분은 본인이 원하는 소셜 정보로 변경해야 합니다.

마지막으로 소셜에서 사용할 이미지는 "HTML/CSS 편집 > 파일업로드"를 통해 업로드 후 코드에서 해당 이미지 파일명으로 변경해야 합니다.

신고

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    이미지 맵

    지원 다른 글

    댓글 8

      • 비밀댓글입니다

      • 안녕하세요.

        아쉽게도 탕비수다 이마고 스킨 설정을 통해 사이드바에는 따로 소셜 링크 기능을 제공하고 있지 않습니다. 물론 html을 아시면 직접 사이드바에 입력은 가능합니다.

        기본적으로 스킨은 화이트를 염두하며 제작했습니다. 개선하면서 설정을 통해 배경색 및 폰트 색상 지정이 가능하도록 했는데요. 모든 요소를 제어할 수 없는 탓에 완벽하게 지원한다고 말씀드리기는 힘듭니다. 직접 스킨 설치 후 설정을 해보면 좋을 것 같습니다.

        고맙습니다.
        롤랑존 드림

      • 비밀댓글입니다

      • 가이드에 제시된 것 외에 수정은 본인이 직접 찾아 수정해야 합니다. css를 알고 있다면 크롬 브라우저의 검사 기능을 통해 도움을 받을 수 있습니다.

      • 비밀댓글입니다

      • 문의서비스는 스킨에서 제공하는 기능에 대한 문의입니다. 따라서 그외 수정은 사용자 정의에 속합니다. 메일로 문의한 것으로 아는데요. 답변을 한번 읽어보시면 도움이 될 것 같습니다.

      • 비밀댓글입니다

      • 아 다른 분이셨나 봅니다. 주로 크롬 브라우저를 통해 해당 정의를 찾는 방법을 간략하게 소개한 답변입니다.

        html이나 css를 잘 모르면 티스토리스킨 수정은 힘듭니다. 어느 정도 기초 지식은 있어야 가능합니다. 관련 정보는 저녁에 포워딩이 가능합니다. 그 전에 "크롬 브라우저 검사"로 구글이나 네이버에서 검색을 해보면 많은 도움을 받을 수 있을 것 같습니다.

    *

    *

    이전 글

    다음 글