플로팅 SNS 배너 달기

 

블로그의 좌측에 위치하는 플로팅 배너가 이제는 공유할 수준은 되었다고 판단되어 소스 공개합니다. 편의상 플로팅 SNS 배너라고 이름을 붙였습니다. 설치방법은 1. 아이콘 파일 업로드 2. 소스 수정 3. 소스 삽입 후 위치 조정 순입니다.예전에 플로팅 배너 소개하면서 다뤘던 내용의 상당수가 이곳에서 언급될 예정이오니 자세한 사항은 '블로그에 플로팅 배너(플로팅 레이어) 달기'포스트 참고해주기 바랍니다. 이 포스트에서 자세한 설명은 생략할 예정입니다. -  특정 스킨에서 정상적으로 작동하지 않을 수도 있으니 그럴 경우에는 댓글이나 방명록에 글 남겨주시길 바랍니다 -

 

1. 아이콘 파일 업로드

 

 

아이콘은 SNS는 페이스북과 트위터가, 블로그 구독용으로는 한RSS, 네이버 이웃커넥트, 다음 뷰, 그 외에 즐겨찾기 / 메일 보내기 / 상단으로 이동으로 총 8가지가 만들어져 있습니다. 해당 아이콘은 흑백 / 컬러 2가지로 만들어져 있고, 이는 마우스 롤오버 시 색상이 변경되게 하기 위함입니다. 다음의 압축파일을 받아 티스토리 관리자 페이지에서 HTML/CSS 편집 > 파일업로드로 들어가신 후 아이콘 파일을 업로드해주시면 됩니다.

 

 

icon.zip


psd파일 원하시는 분은 댓글이나 방명록에 남겨주시면 보내드리겠습니다.

 

2. 소스 수정

 

 

SNS 아이콘의 소스, 그리고 수정해주셔야 할 부분은 다음과 같습니다.

 

페이스북

<a href="자신의 FaceBook 주소" onMouseOver="img8.src='./images/facebookon.png'" 
onMouseOut="img8.src='./images/facebookoff.png'" onfocus="this.blur();" target="_blank"><img
src="./images/facebookoff.png" name="img8" border="0"></a>

 

트위터

<a href="자신의 Twitter 주소" onMouseOver="img1.src='./images/twitteron.png'" 
onMouseOut="img1.src='./images/twitteroff.png'" onfocus="this.blur();" target="_blank"><img
src="./images/twitteroff.png" name="img1" border="0"></a>

 

다음 뷰

<a href="http://v.daum.net/user/plus?blogurl=[자신의 블로그 주소]"
onMouseOver="img3.src='./images/viewon.png'"  onMouseOut="img3.src='./images/viewoff.png'"
onfocus="this.blur();" target="_blank"><img src="./images/viewoff.png" name="img3" border="0"></a>

 

네이버 이웃커넥트

<a href="http://section.blog.naver.com/connect/PopConnectBuddyAddForm.nhn?
[사용자코드]"
onMouseOver="img2.src='./images/naveron.png'"  onMouseOut="img2.src='./images/naveroff.png'"
onfocus="this.blur();" target="_blank"><img src="./images/naveroff.png" name="img2" border="0"></a>

(※ 사용자코드를 받기 위해서는, 이웃커넥트 관리화면 > 위젯 관리 > 위젯 관리 하단의 '심플 위젯 코드 복사'를 선택하신 후 blogId뒤로 오는 곳을 복사하여 넣으시면 됩니다.)

 

한RSS

<a href="http://www.hanrss.com/add_sub.qst?url=[자신의 블로그 주소]
onMouseOver="img4.src='./images/hanrsson.png'"  onMouseOut="img4.src='./images/hanrssoff.png'"
onfocus="this.blur();"  target="_blank"><img src="./images/hanrssoff.png" name="img4" border="0"></a>

 

메일 보내기

<a href="mailto:[자신의 메일주소]" onMouseOver="img5.src='./images/mailon.png'" 
onMouseOut="img5.src='./images/mailoff.png'" onfocus="this.blur();"><img src="./images/mailoff.png" name="img5" border="0"></a>

 

즐겨찾기 등록(IE에서만 작동)

<a href="javascript:window.external.addfavorite('블로그 URL', '즐겨찾기 등록 명');" onMouseOver="img6.src='./images/bookmarkon.png'"   onMouseOut="img6.src='./images/bookmarkoff.png'" onfocus="this.blur();"><img
src="./images/bookmarkoff.png" name="img6" border="0">

 

상단으로 이동

<a href="#" title=Top onMouseOver="img7.src='./images/topon.png'"   onMouseOut="img7.src='./images/topoff.png'" onfocus="this.blur();"><img
src="./images/topoff.png" name="img7" border="0">

 

3. 소스 삽입 / 위치 조정

 

플로팅 레이어를 띄우는 방법은 '블로그에 플로팅 배너(플로팅 레이어) 달기' 포스트에 자세히 설명되어 있으니 참고바랍니다. 해당 포스트를 확인하신 후, 자신의 블로그에 알맞은 방법으로 플로팅 레이어를 삽입하신 다음 위에 설명되어 있는 아이콘 중 원하시는 아이콘만 선택하여 이용하시면 됩니다. 포스트의 마지막으로 현재 본 블로그에서 사용중인 플로팅 SNS 배너 소스를 덧붙입니다. 참고하시길 바랍니다.