티스토리 반응형 스킨 | JB Magazine For Tistory > Tips > Follow Me에 카카오스토리 아이콘 추가하는 방법

JB Magazine 사이드바에 있는 Follow Me에 카카오스토리 아이콘 추가하는 방법입니다.

카카오스토리 아이콘 다운로드

https://developers.kakao.com/buttons에서 카카오스토리 원하는 모양의 아이콘을 다운로드합니다. 번거롭다면 아래 이미지를 다운로드 받으세요.

업로드

티스토리 관리자 [HTML/CSS편집 - 파일업로드]에서 카카오스토리 아이콘을 업로드합니다.

skin.html 편집

kakaostory_icon_flat_64x64.png을 업로드했다고 가정하겠습니다.

skin.html에 다음과 같은 코드가 있습니다.

<ul class="clearfix">
  <li><a href="#" class="jbSns jbSnsTwitter"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" class="jbSns jbSnsFacebook"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#" class="jbSns jbSnsGooglePlus"><i class="fa fa-google-plus"></i></a></li>
  <li><a href="[##_rss_url_##]" class="jbSns jbSnsRss"><i class="fa fa-rss"></i></a></li>
  <!-- <li><a href="#" class="jbSns jbSnsYouTube"><i class="fa fa-youtube"></i></a></li> -->
  <!-- <li><a href="#" class="jbSns jbSnsInstagram"><i class="fa fa-instagram"></i></a></li> -->
  <!-- <li><a href="#" class="jbSns jbSnsVimeo"><i class="fa fa-vimeo-square"></i></a></li> -->
  <!-- <li><a href="#" class="jbSns jbSnsLinkedIn"><i class="fa fa-linkedin"></i></a></li> -->
</ul>

다음과 같이 사용하지 않는 SNS는 지우고, 빨간색 코드를 추가합니다.

<ul class="clearfix">
  <li><a href="#" class="jbSns jbSnsTwitter"><i class="fa fa-twitter"></i></a></li>
  <li><a href="#" class="jbSns jbSnsFacebook"><i class="fa fa-facebook"></i></a></li>
  <li><a href="#" class="jbSns jbSnsKakaostory"><img src="./images/kakaostory_icon_flat_64x64.png"></a></li>
  <li><a href="[##_rss_url_##]" class="jbSns jbSnsRss"><i class="fa fa-rss"></i></a></li>
</ul>

#에는 자신의 SNS 페이지 주소를 입력합니다.

style.css 편집

style.css에 다음의 코드를 추가합니다.

.jbSnsKakaostory img {width: 36px;}

아이콘 크기를 조절하는 코드로, 숫자는 적절히 조정하시면 됩니다.

Created on 2015-05-27 03:49 | Updated on 2016-03-23 20:02

이 글을 공유하기

Kakao

티스토리 스킨 by CMS Factory

Book navigation