[letter스킨] sns 리스트 추가하기_유튭추가

아주 가끔 두서없이 포스팅하는 저한테는 거의 무쓸모이지만, 블로그를 운영하시는 분들이라면 sns도 하시고, 팔로워를 늘리는 것도 블로그를 활성화 할 수 있는 좋은 방법이라 관심이 많으실것 같습니다. 

그래서 오늘은 letter의 사이드바? 메뉴에 있는 sns 링크 버튼 추가하는 방법에 대해 알아보겠습니다.

 

 

화면 우상단에 있는 메뉴 아이콘(三) 을 누르면 나오는 화면 아래에 있는 저 위치 입니다.

 

 

레터 스킨에서는 기본적으로 페이스북, 트위터, 인스타그램 세 가지 아이콘과 링크를 제공합니다.

기본 3가지 아이콘을 링크하는 방법은 아래와 같습니다.

(그리고 아이콘을 추가하는 것도 저 화면에서 합니다.)

 

작업루트 : 블로그 관리 -> 꾸미기 -> 스킨 편집

 

요렇게 누르시면 새 창이 뜨면서 아래와 같은 화면이 나타납니다.

저기의 [추가설정] 항목 아래로 내려보시면...

 

3가지 SNS에 대해 링크 주소를 입력하는 란이 있습니다.

주소는 일반적으로 'www로 시작하는 인터넷 주소/개인아이디' 형태니까 참고하시고,

[적용] 버튼을 누르시면 기본 SNS는 자동 적용 됩니다.

 

 

그래도 잘 모르시겠다면 이전글 링크를 걸어놓겠습니다.

letter 스킨 SNS 메뉴 링크 수정 보러가기

 

아무튼 이 상태로는 추가할 수 없습니다. (오늘의 본 포스팅이 이제 시작)

서두가 길어서 죄송합니다. ^^;;

 

[사전작업 1. 유튜브 아이콘 만들기]
   - 인터넷에서 다운로드 받으셔도 되고 직접 제작하셔도 됩니다.
   - letter 스킨의 기본 SNS 아이콘은 사이즈는 18 X 18 px 이었습니다. (유튭아이콘도 동일크기로 맞춰주세요)
   - 파일은 png 형식으로 저장하고, 파일명은 " ico_XXX.png " 형태로 저장해주세요.

[사전작업 2. 유튜브 내채널 링크 알아놓기]
   - 위의 페북/인별/트윗 처럼 주소/id 형태입니다. 

 

이제 모든 준비가 끝났습니다.

스킨편집 화면의 [html 편집] 버튼을 눌러주세요. (아래 그림 참고)

 

 

저기를 누르면 아래와 같이 화면이 바뀌는데 이미지에서 보이는 순서대로 작업을 진행할 예정입니다.

굳이 궁금하신 분이 계실까봐 작업의 의미를 추가 설명하자면 아래와 같습니다.

 1. 만들어진 아이콘을 티스토리에서 불러올 수 있게 서버에 저장

 2. 1의 이미지를 CSS 클래스로 설정

 3. 2의 CSS 클래스에 연결될 하이퍼링크 설정

그냥 따라하시면 됩니다.

 

1. 아이콘을 업로드 합니다.

 

아래 화면을 따라 진행하시면 됩니다.

 

 

2. CSS 메뉴에 코드를 추가 합니다.

 

CSS에 코드를 추가하는게 어려워 보일 수 있지만, 아래 그림처럼 복사해서 두 군데만 바꿔주면 되는 것이라 너무 걱정 안하셔도 됩니다. ㅎㅎ

 

 

아래는 제 css 코드 예시 입니다.

위의 세 줄을 복사하고, 한줄 띄우고, 붙여넣기 후 위 그림의 노란색 부분을 바꿔주시면 됩니다.

link_sns종류, ico_파일명.png 두 가지 입니다.

.area_menu .list_sns .link_insta {
  background: url(images/ico_insta.png) no-repeat center;
}

.area_menu .list_sns .link_utb {
  background: url(images/ico_utb.png) no-repeat center;
}

 

3. html을 수정한다.

 

여기도 2번처럼 본문에 클릭 -> ctrl + f -> insta 로 찾기를 하시면 편합니다.

list_sns 라는 클래스 하위에 보시면 아래와 같은 인스타 코드(윗 두줄) 가 있는데,

두 줄 복사하시고, 한줄 띄고, 붙여넣기 하신 다음에 값을 수정해주시면 됩니다.

 

여기서 주의할 점은

인스타는 기본 설정화면에서 넣은 주소를 여기서 불러오게 되어 있는데, 유튜브는 그 주소를 넣는 란이 따로 없다보니, 아래와 같이 직접 주소를 넣어줘야 합니다. 

<li><a href="" class="link_sns link_insta" target="_blank"><span class="blind">인스타그램</span></a></li>
</s_if_var_snsInstagram>

<li><a href="https://www.youtube.com/channel/유튭채널고유값" class="link_sns link_utb" target="_blank"><span class="blind">유튜브</span></a></li>
</s_if_var_snsYoutube>

 

이제 SNS 아이콘이 추가된 것을 확인하실 수 있습니다.

 

잘 되었다면, 구독과 좋아요 감사합니다. ㅎㅎㅎ