저자정보 및 푸터에 사용자 소셜 추가하기
탕비수다 이마고 스킨은 대표적인 소셜 계정 링크를 쉽게 설정할 수 있도록 기능(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 편집 > 파일업로드"를 통해 업로드 후 코드에서 해당 이미지 파일명으로 변경해야 합니다.
이미지 맵
블로그 정보
이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨
2017.03.27 18:01
비밀댓글입니다
2017.03.29 12:42 신고
안녕하세요.
아쉽게도 탕비수다 이마고 스킨 설정을 통해 사이드바에는 따로 소셜 링크 기능을 제공하고 있지 않습니다. 물론 html을 아시면 직접 사이드바에 입력은 가능합니다.
기본적으로 스킨은 화이트를 염두하며 제작했습니다. 개선하면서 설정을 통해 배경색 및 폰트 색상 지정이 가능하도록 했는데요. 모든 요소를 제어할 수 없는 탓에 완벽하게 지원한다고 말씀드리기는 힘듭니다. 직접 스킨 설치 후 설정을 해보면 좋을 것 같습니다.
고맙습니다.
롤랑존 드림
2017.04.02 15:08
비밀댓글입니다
2017.04.02 16:30 신고
가이드에 제시된 것 외에 수정은 본인이 직접 찾아 수정해야 합니다. css를 알고 있다면 크롬 브라우저의 검사 기능을 통해 도움을 받을 수 있습니다.
2017.04.03 00:10
비밀댓글입니다
2017.04.03 07:28 신고
문의서비스는 스킨에서 제공하는 기능에 대한 문의입니다. 따라서 그외 수정은 사용자 정의에 속합니다. 메일로 문의한 것으로 아는데요. 답변을 한번 읽어보시면 도움이 될 것 같습니다.
2017.04.03 09:59
비밀댓글입니다
2017.04.03 10:23 신고
아 다른 분이셨나 봅니다. 주로 크롬 브라우저를 통해 해당 정의를 찾는 방법을 간략하게 소개한 답변입니다.
html이나 css를 잘 모르면 티스토리스킨 수정은 힘듭니다. 어느 정도 기초 지식은 있어야 가능합니다. 관련 정보는 저녁에 포워딩이 가능합니다. 그 전에 "크롬 브라우저 검사"로 구글이나 네이버에서 검색을 해보면 많은 도움을 받을 수 있을 것 같습니다.
2017.11.10 10:34 신고
안녕하세요, 롤랑존님.
소셜 계정을 추가할 수 있는 방법을 안내해 주셔서 고맙습니다.
그런데, 안내 내용대로 브런치를 추가해 보았더니 가로로 줄이 맞지 않아 보입니다.
이 현상을 조정할 수 있을까요?
(상기 현상은 제 블로그에서 확인 가능합니다. ^^)
2017.11.14 09:22 신고
아래와 같이 CSS를 추가해보세요. 아마도 기본적으로 사용하는 아이콘과 새로 추가되는 아이콘 크기가 달라 나타나는 현상 같습니다.
.social li {
vertical-align: bottom;
width: 20px;
height: 20px;
}
2017.11.14 10:39 신고
오오~
제대로 정렬이 되었습니다.
고맙습니다^^*