블로그의 좌측에 위치하는 플로팅 배너가 이제는 공유할 수준은 되었다고 판단되어 소스 공개합니다. 편의상 플로팅 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 배너 소스를 덧붙입니다. 참고하시길 바랍니다.
'Blog Tip > Design' 카테고리의 다른 글
| 원하는 모양대로 H 태그를 꾸며 사용하기 (2) | 2013.07.09 |
|---|---|
| 플로팅 상단 메뉴바 달기 (4) | 2013.03.06 |
| 스킨 제공 상단 메뉴바에 드롭다운 메뉴 넣기 (5) | 2013.03.04 |
| CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (2) (24) | 2013.03.01 |
| CSS를 이용해 드롭다운(Drop Down) 메뉴 만들기 (1) (13) | 2013.02.27 |
댓글