티스토리 - 링크걸린 글자에 외부 링크 사용으로 링크 확실하게 표시하기

어쩌다 가끔 텍스트큐브 같은 블로그를 방문해 보면 링크가 걸린 텍스트 옆에 조그만 화살표라든지 아이콘으로 표시된 걸 볼수 있는데요.

도대체 저런 건 어떻게 만드는 걸까 궁금하던 차에 티스토리에서도 몇몇 블로그에서 사용된 걸 보고..

구글링으로 여러 선구자 분들의 팁을 활용, 제 블로그에 적용하고 기분 좋게 공유하고저 포스팅합니다.

티스토리에서 링크가 표시되는 수단으로 글자의 색을 바꾸거나,밑줄을 치거나,strong의 효과로 글자를 굵게 표시하거나

좀더 적극적인 방법으로 글상자를 집어 넣는 방법이 있는데요.아래 링크처럼 우측에 아이콘이 표시되는 방법을 알아 보겠습니다.

블로그,카페 글쓰기 -- "이미지나 글자에 링크거는 초간단 팁"

본론으로 가기에 앞서 저는 PC 전문가가 아니고 그냥 블로그를 2~3년 정도 운영해 온  선무당 임을 밝혀 둡니다.

선무당인 제가 블로그에 적용시켰으니 스킨 편집이 어색한 분도 웬만하면 다 적용할 수 있으리라 생각되는데...

선무당이 사람잡는 다는 말이 있지만 ㅎㅎ 저를 믿는 분만 묻지도 따지지도 말고 따라 오세요~ㅋ

이 외부 링크를 사용하려면 스킨 편집을 해야 하는데 만약의 불상사를 막기 위해 사용 중인 스킨을 꼭 백업해 두시기 바랍니다.

혹시 모르시는 분을 위한 배려...ㅎ 스킨 백업은 아래 캡쳐 이미지를 참고하시구요.

1. png 파일을 만들어 업로드하기

외부 링크를 사용하기 위해 제일 먼저 해야 할 일은 링크에 표시될 아이콘을 만드는 일인데요.(화살표,삼각형,사각형 등등)

포토샵이나 이미지 편집 툴을 잘 다루는 분은 직접 만들 수도 있겠고 구글이나 포털에서 저작권에 문제가 없는 이미지를 가져 와 

png파일을 만들어 티스토리의 업로드 기능이나 카테고리 목록을 선택,글쓰기에서 포토업로더를 이용,png 파일의 주소를 확보합니다.

png 파일의 사이즈는 가로 세로 16 x 16 픽셀이 제 눈에는 제일 이쁘게 보이던데...사이즈는 자신의 입맛에 맞게 알아서 하시고...

png 파일 만드는 과정이 귀찮은 분은 아래 첨부된 텍스트 파일을 그대로 자신의 블로그 스킨에 적용해도 됩니다.

2. 외부 링크 소스코드 내 블로그 스킨에 적용하기

만든 png 파일의 주소를 복사했다면 메모장 등을 꺼내 주소를 붙여넣기하고,블로그 관리자 모드 HTML/CSS를 클릭하고

찾기 기능(키보드 Ctrl + F)으로 _article_rep_desc_를 찾아  앞 뒤에 div 코드를 넣어 줍니다.

                                          

                                                      div.txt

그리고 style.css 맨 윗 부분에 아래 첨부된 외부 링크 소스 코드를 열고 드래그 복사(Ctrl+C)해서 붙여넣어(Ctrl+V) 줍니다.

png 파일 주소가 있는 분은 소스 코드 background:url( )안에 자신이 만든 png 파일의 주소를 넣어 주고 적용하면 되는데요.

style.css 맨 윗 부분이 정답은 아닙니다.

스킨에 따라 맨 아랫 부분이 될 수도 있습니다.맨 아랫 부분에 넣고 '미리보기'해 보시고 적용이 안 되면 맨 위로,또는 그 반대로

적용해 보세요.

                                               외부 링크 소스코드.txt

아~그리고 한가지,,,블로그에 웹폰트를 사용 중이라면 style.css 맨 위에 웹폰트 코드가 적용되어 있을 텐데요.

외부 링크 소스코드가 style.css 맨 아래로 적용된다면 몰라도,맨 위로 적용되는 블로그는 웹폰트 바로 아랫 부분에 넣어 줘야

웹 폰트가 그대로 보여 집니다.스킨 편집할 때,,, 저장하기 전 미리보기는 필수~^^

     

포스팅을 마치며...

외부 링크 소스 코드에서 padding-right: 와 padding-top: 뒤의 숫자를 적당히 조절해 가면서 링크걸린 글자와 이미지의 간격을 

조절하시구요.

link, active, visited, hover 4항목 모두 동일한 숫자로 하는 것이 깔끔할 것 같으나 자신의 입맛에 맞게 조절 적용해 보세요.

이상 묻지도 따지지도 말고 '외부 링크 사용으로 내 블로그 텍스트에 링크 확실하게 표시하기' 포스팅을 마칩니다.

읽어 주셔서 감사합니다~^^