블로그 상단에 SNS관련 버튼을 제작해서 설치해 보았습니다. 기본적으로 많이 이용되는 RSS, 트위터, 오픈캐스트, 페이스북 4가지로 아이콘 이미지를 제작하여 만들어보았습니다. 사용 원하시는 분들은 아래 내용 참고하셔서 설치해보세요!
※ 티스토리 기본스킨에서 수정해서 사용중입니다. HTML과 CSS소스 추가해드리겠습니다.
※ HTML 소스
<div class="topWrapBlogMenu"><div class="gap"></div><div class="facebook"><a href="페이스북주소" target="_blank"><img src="./images/facebook.png" border="0" alt='페이스북'></a></div><div class="opencast"><a href="오픈캐스트주소" target="_blank"><img src="./images/opencast.png" border="0" alt="오픈캐스트"></a></div><div class="twitter"><a href="트위터주소" target="_blank"><img src="./images/twitter.png" border="0" alt='트위터'></a></div><div class="rss"><a href="RSS주소" target="_blank"><img src="./images/rss.png" border="0" alt='RSS'></a></div></div>
※ CSS 소스
#header .blogMenu .topWrapBlogMenu .facebook { position:relative; float:right; top:7px; width:32px; height:32px;}
#header .blogMenu .topWrapBlogMenu .opencast { position:relative; float:right; top:7px; width:32px; height:32px;}
#header .blogMenu .topWrapBlogMenu .twitter { position:relative; float:right; top:7px; width:32px; height:32px;}
#header .blogMenu .topWrapBlogMenu .rss { position:relative; float:right; top:7px; width:32px; height:32px;}
#header .blogMenu .topWrapBlogMenu .gap { position:relative; float:right; top:7px; width:10px; height:32px;}
※ 설치 위치는 티스토리 기본스킨 기준 <div class="topWrapBlogMenu"> 위치에 적용되었습니다. 다른 위치 적용하실 분들은 CSS쪽 수정해서 사용해주세요!
SNS 아이콘 4종 미리보기 입니다. 개인적으로 필요한 아이콘 4개만 제작하였습니다.
낱개로 올려드립니다. 필요하신 것만 다운로드 하셔서 사용하세요!
sns_icon.zip
아이콘 4종 압축파일도 같이 올려드립니다. 저장해서 사용하세요!
위에 오픈해 드린 소스는 어디까지나 제가 사용중인 스킨에서 사용중인 소스이기 때문에 다른 스킨이나 위치에 적용시 반드시 변경해서 사용해주세요!
copyright @ xinsound (씬사운드) all rights reserved.