동그라미™의 동그라미 스튜디오 :: 사이드바 링크 여러항목으로 나눠서 보여주기

사이드바 링크 여러항목으로 나눠서 보여주기

2009/01/09 08:57 INFORMATION/how to blog

티스토리에서 제공하는 기능중에 원하는 블로그나 웹사이트를 링크에 추가해서 본인의 블로그에 보여줄 수 있습니다. 그런데 자주가는 블로그, 올블로그같은 메타사이트, 본인의 즐겨찾기 링크 등 여러 항목들로 링크를 나누는건 불가능하죠. 그래서 사이드바에 있는 링크를 여러 항목으로 나눠봤습니다.

아래 노란박스안에 코드가 원래 제 블로그 skin.html에 있는 링크 코드입니다.
그 중에서도 연두색 박스 안의 코드가 링크에 추가된 사이트 이름을 url를 링크시켜주는 일을 하고 있습니다.
붉은색으로 보이는 등과 같은 치환자를 사용해서 링크를 표시해주고 있습니다.
는 링크에 추가되어 있는 사이트의 url을, 는 사이트 이름을 보여주는 치환자입니다.
나머지 코드들은 블로그 스킨에 맞게 정해져 있는 코드들입니다.

<s_sidebar_element>
<div id="link">
<h3>Links</h3>
<ul><s_link_rep><li>

</li></s_link_rep></ul>

</div>
</s_sidebar_element>

그럼 여러가지 분류를 나눠서 링크를 정리해보도록 하겠습니다.
단!! 티스토리에서 제공하고 있는 링크추가 하기를 통해서는 분류를 나눌 수 없습니다.
그래서 원래의 링크가 하나의 항목으로 들어가고 다른 항목들을 추가하는 방식으로 되게 되어있습니다.
나중에 티스토리에서 이런 기능을 추가해주는것도 좋을것 같네요. 링크 분류 나눠서 추가하기...

아래 코드가 완성된 코드입니다. 제 블로그 사이드바에 있는 링크를 보여주는 코드들이죠.
이 코드들 중에서 빨간 상자 안에 있는 코드는 필수적으로 들어가야 하는 코드입니다. 티스토리에서 기본으로 제공하고 있는 링크를 나타내주는 코드입니다. 초록색 글씨로 위에서 말씀드린 치환자를 표시해 두었습니다.

그리고 빨간색 글씨로 되어 있는 부분은 링크에 분류를 표시해준 아이콘들의 링크주소입니다. 제 링크를 그대로 사용하셔도 되고 아니면 따로 만드셔서 해당 링크를 가져가 쓰셔도 됩니다.

파란색 글씨로 된 부분은 링크 드롭다운창에 보여지는 글자입니다. 원하시는 문구로 변경하시면 됩니다.

<s_sidebar_element>
<div id="link">
<h3>Links</h3>
<ul><li>
<table>
<div id="as_div" align="center" >

<tr><td>
<img src="http://cfs15.tistory.com/image/22/tistory/2009/01/07/08/37/4963eb3e52d5e" align="absmiddle"> <select onchange="window.open(this.value);" style="font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#000;width:135px;">
<option value="">My Links</option>
<s_link_rep>
<option value=""></a></option>
</s_link_rep>
</select></td></tr>

<tr><td>

<img src="http://cfs15.tistory.com/image/2/tistory/2009/01/07/08/37/4963eb3e6204e" align="absmiddle"> <select onchange="window.open(this.value);" style="font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#000;width:135px;">
<option value="">Favorite</option>
<option value="http://www.tistory.com"> 티스토리</option>
<option value="http://www.naver.com"> 네이버</option>
<option value="http://www.daum.net"> 다음</option>
<option value="http://www.google.co.kr"> 구글</option>
<option value="http://www.google.com/adsense"> Adsense</option>
<option value="http://www.yahoo.co.kr"> 야후!</option>
</select></td></tr>

<tr><td>

<img src="http://cfs15.tistory.com/image/16/tistory/2009/01/07/08/37/4963eb3e580fa" align="absmiddle"> <select onchange="window.open(this.value);" style="font:0.9em Verdana, Helvetica, Arial, Gulim, sans-serif; color:#000;width:135px;">
<option value="">Meta Site</option>
<option value="http://bloggernews.media.daum.net/"> 다음 블로그 뉴스</option>
<option value="http://www.blogkorea.org/"> 블로그 코리아</option>
<option value="http://allblog.net"> 올블로그</option>
<option value="http://mixsh.com/"> 믹시</option>
<option value="http://www.eolin.com/"> Eolin</option>
</select></td></tr>

</div></table>
</li></ul>
</div>
</s_sidebar_element>

연두색 박스에 있는 코드들은 제가 추가한 다른 사이트들입니다.
원하는 분류만큼 아래쪽으로 계속 추가를 하시면 되고 해당 분류 안에서 추가하고자 하는 사이트가 있으면 직접 url과 사이트 이름을 <option value="사이트 url">사이트이름</option> 이렇게 넣어주시면 됩니다.

저 많은 코드를 직접 입력하시려면 한참 걸리실테니 제 코드를 다운로드 받아가셔서 입맛에 맞게 고쳐서 사용하시기 바랍니다.

링크코드.txt

'INFORMATION > how to blog' 카테고리의 다른 글

뚱뚱한 RSS를 싫어하는 Feedburner. 512K 이하로 줄여라! (2)	2009/01/16
Google AdSense PIN번호 옆서 도착 (2)	2009/01/14
사이드바 링크 여러항목으로 나눠서 보여주기 (7)	2009/01/09
자기에게 이메일 보낼 수 있는 웹페이지 만들기 (0)	2009/01/06
내 이메일 주소 아이콘 만들기 (2)	2008/12/25
나만의 주소.pe.kr 도메인 무료로 받기 (0)	2008/12/12

posted by 동그라미™

TAG Blog, HTML, LinK, tag, Tistory, Web, 링크, 블로그, 사이드바, 웹, 티스토리

Trackback 1 Comment 7

Trackback http://www.donggeulami.pe.kr/trackback/83

블로그 스킨 수정 소식 삭제
2009/08/15 15:10 | Tracked from 언제나 소녀

오늘 드디어 링크를 드롭다운 메뉴로 변경하였습니다. 그동안 벼르고 별렸는데,,,, 막상 하다보니 코드를 만들어 두신 분이 있어서 많은 도움을 받았지요. 전부터 하려던건데 그때 자료를 어디서 봤는지 찾기가 난감해서요. 동그라미님의 동그라미 스튜디오 블로그에서 방법을 참고했습니다. ( http://www.donggeulami.pe.kr/83) 그래서 현재 제 스킨에서 링크는 요렇게 보이죠^^ 링크와 메타 블로그 링크를 모두 드롭다운메뉴로 만들어 버렸어요..

댓글을 달아 주세요

뻔뻔한유네씨 2009/03/08 02:02 Addr Edit/Del Reply
흐흐- 이거보고 링크 예쁘게 바꿀 수 있었어요. 감사합니다~
- 동그라미™ 2009/03/08 14:40 Addr Edit/Del
  도움이 되셨다니...
  funfun한 블로그 하세요!
로이스 2009/08/15 15:14 Addr Edit/Del Reply
유익한 내용에다가, 코딩 문서까지 다운로드 받을 수 있어서
저도 스킨 쉽게 수정했어요.

감사합니다.
트랙백도 남기고 갑니다.
- 동그라미™ 2009/08/17 08:55 Addr Edit/Del
  로이스님!
  제 블로그 방문해주셔서 감사합니다.
  로이스님 블로그 가보니 참 깔끔하게 해놓으셨네요.
  재밌는 포스팅 많이 해주세요!
  종종 들려보께요~
조정현 2009/10/30 20:27 Addr Edit/Del Reply
동그라미님 덕분에 제 블로그도 링크르 드롭다운으로 바꿨어요 .. 궁금하던거 였는데
속 시원하게 해결했습니다. 감사합니다.^^
- 동그라미™ 2009/11/02 14:47 Addr Edit/Del
  저도 다른 블로거 덕분에 이렇게 포스팅도 하고 여러분들께 도움도 드릴 수 있었답니다.
  즐거운 블로깅 되세요!
Ban Terbaik di Indonesia GT Radial 2011/11/24 12:27 Addr Edit/Del Reply
이것은 훌륭한 게시물입니다! 그것은 매우 유익한했습니다. 난 당신 작품의 자세한 내용을 읽기에 최선을 다하겠습니다. 또한, 내가 나중에 다시 올 수 있도록 웹사이트를 즐겨찾기에 확인했다. 나는 그것을 읽는 모든 순간을 즐기고