링크에 표시를 달자

글을 쓸때 링크가 걸린건지, 안걸린건지 구분이 안가는 블로그가 있습니다. 링크가 걸린곳에 표시가 되면 좋겠다싶었는데 크랑님이 관련 포스팅을 해서 참고했습니다.
외부링크(external link)라고 하죠. 아쉽게도 티스토리는 현재 제가 하고 싶은 형태의 링크를 제공하고 있진 않습니다. 링크를 걸때 현재창열기와 새창열기가 같이 나와서 독자들이 원하는 방식으로 열게끔해야하는데 티스토리는 현재 새창열기, 또는 현재창 열기 하나만 제공을 하죠.

새창열기,현재창열기를 두개 같이 나오게 할려면 두번 링크를 걸어야하는 번거러움을 겪어야합니다.
일단은 링크에 표시를 다는 방법을 보겠습니다.
이 글은 크랑http://krang.tistory.com/253님한테서 배운겁니다. -->"크랑님" 다음에 조그만 아이콘 하나가 붙었죠.그런걸 만들어보자, 그겁니다.


첫번째 방법- 링크에 색깔을 바꾸기
아시다시피 방문한 링크, 링크걸린 링크.... 형식의 앵커노드를 아실겁니다.
방문하거나 마우스를 올려놓으면 액션을 지정하는 것이죠.

a:link       {text-decoration:none; color:#0060FF;}
a:active   {text-decoration:none; color:#0092E0;}
a:visited  {text-decoration:none; color:#4B4BCC;}
a:hover   {text-decoration:none; color:#804CD9;}

이런것이죠. 이것은 스킨마다 어떻게 액션을 지정했느냐에따라 달리 보여집니다. 그리고 블로그 전체에 보여집니다. 이걸 본문에만 사용하고 싶으시면 아래와같이 변경하시면 됩니다. 

.article a:link       {text-decoration:none; color:#0060FF;}
.article a:active   {text-decoration:none; color:#0092E0;}
.article a:visited  {text-decoration:none; color:#4B4BCC;}
.article a:hover   {text-decoration:none; color:#804CD9;}

특수한 스킨의 경우가 아니면 <div class="article> 이런식으로 나가고 그 안에 본문 치환자가 있을겁니다. 그래서 위와같이 수정하면 됩니다.

자 이제 시작합니다. 원문은 크랑님을 참고하세요.
혹시 모를 사태를 대비해서 스킨을 백업해두세요.

skin.html 편집창에서 본문 코드 앞뒤로 <div class="external"> 와 </div> 를 삽입해주세요. 아래 처럼.

            



            
글을 쓸때 링크가 걸린건지, 안걸린건지 구분이 안가는 블로그가 있습니다. 링크가 걸린곳에 표시가 되면 좋겠다싶었는데 크랑님이 관련 포스팅을 해서 참고했습니다.

외부링크(external link)라고 하죠. 아쉽게도 티스토리는 현재 제가 하고 싶은 형태의 링크를 제공하고 있진 않습니다. 링크를 걸때 현재창열기와 새창열기가 같이 나와서 독자들이 원하는 방식으로 열게끔해야하는데 티스토리는 현재 새창열기, 또는 현재창 열기 하나만 제공을 하죠.



새창열기,현재창열기를 두개 같이 나오게 할려면 두번 링크를 걸어야하는 번거러움을 겪어야합니다.

일단은 링크에 표시를 다는 방법을 보겠습니다.

이 글은 크랑http://krang.tistory.com/253님한테서 배운겁니다. -->"크랑님" 다음에 조그만 아이콘 하나가 붙었죠.그런걸 만들어보자, 그겁니다.





첫번째 방법- 링크에 색깔을 바꾸기

아시다시피 방문한 링크, 링크걸린 링크.... 형식의 앵커노드를 아실겁니다.

방문하거나 마우스를 올려놓으면 액션을 지정하는 것이죠.




a:link       {text-decoration:none; color:#0060FF;}
a:active   {text-decoration:none; color:#0092E0;}
a:visited  {text-decoration:none; color:#4B4BCC;}
a:hover   {text-decoration:none; color:#804CD9;}



이런것이죠. 이것은 스킨마다 어떻게 액션을 지정했느냐에따라 달리 보여집니다. 그리고 블로그 전체에 보여집니다. 이걸 본문에만 사용하고 싶으시면 아래와같이 변경하시면 됩니다. 

.article a:link       {text-decoration:none; color:#0060FF;}
.article a:active   {text-decoration:none; color:#0092E0;}
.article a:visited  {text-decoration:none; color:#4B4BCC;}
.article a:hover   {text-decoration:none; color:#804CD9;}



특수한 스킨의 경우가 아니면 <div class="article> 이런식으로 나가고 그 안에 본문 치환자가 있을겁니다. 그래서 위와같이 수정하면 됩니다.

자 이제 시작합니다. 원문은 크랑님을 참고하세요.

혹시 모를 사태를 대비해서 스킨을 백업해두세요.

skin.html 편집창에서 본문 코드 앞뒤로 <div class="external"> 와 </div> 를 삽입해주세요. 아래 처럼.









두번째

아래의 코드를 style.css 창 맨뒤에다 삽입하세요. 사용해보니 padding-top는 안주는것이 더 좋아보입니다. 그래서 조금 수정했습니다.


.external a:link{
	background:url(./images/external.gif) no-repeat right 0; 
	padding-right:13px;
}
.external a:active{ 
	background:url(./images/external.gif) no-repeat right 0; 
	padding-right:13px;
}
.external a:visited{
	background:url(./images/external.gif) no-repeat right 0; 
	padding-right:13px;
}
.external a:hover{
	background:url(./images/external.gif) no-repeat right 0; 
	padding-right:13px;
}




파일을 첨부합니다.






external.txt








그리고 아래의 이미지를 스킨편집창에서 업로드합니다.





혹 원하시는게 있으시면 원하는대로 갖다 쓰세요. 아래 주소를 클릭하면 아이콘의 모습이 나옵니다.

https://t1.daumcdn.net/cfile/tistory/1572A40E49E635F906

https://t1.daumcdn.net/cfile/tistory/1672A40E49E635F907

https://t1.daumcdn.net/cfile/tistory/2028481049E529BE63



가 있습니다. 원하는걸 골라쓰셔도 됩니다.

아니면 원하시는 아이콘을 업로드하셔서 그 주소로 바꿔 사용하세요.



결론

첫번째 코드를 위의 설명대로 삽입한다.

두번째 style.css에 삽입한다.

끝입니다.

참고로 크랑님 고마워요~~

            

두번째

아래의 코드를 style.css 창 맨뒤에다 삽입하세요. 사용해보니 padding-top는 안주는것이 더 좋아보입니다. 그래서 조금 수정했습니다.

.external a:link{
	background:url(./images/external.gif) no-repeat right 0; 
	padding-right:13px;
}
.external a:active{ 
	background:url(./images/external.gif) no-repeat right 0; 
	padding-right:13px;
}
.external a:visited{
	background:url(./images/external.gif) no-repeat right 0; 
	padding-right:13px;
}
.external a:hover{
	background:url(./images/external.gif) no-repeat right 0; 
	padding-right:13px;
}

파일을 첨부합니다.

external.txt

그리고 아래의 이미지를 스킨편집창에서 업로드합니다.

혹 원하시는게 있으시면 원하는대로 갖다 쓰세요. 아래 주소를 클릭하면 아이콘의 모습이 나옵니다.
https://t1.daumcdn.net/cfile/tistory/1572A40E49E635F906
https://t1.daumcdn.net/cfile/tistory/1672A40E49E635F907
https://t1.daumcdn.net/cfile/tistory/2028481049E529BE63

가 있습니다. 원하는걸 골라쓰셔도 됩니다.
아니면 원하시는 아이콘을 업로드하셔서 그 주소로 바꿔 사용하세요.

결론
첫번째 코드를 위의 설명대로 삽입한다.
두번째 style.css에 삽입한다.
끝입니다.
참고로 크랑님 고마워요~~