블로그 운영 팁스(Tips) / / 2013. 5. 24. 11:25

블로그 본문 링크에 화살표 다는법

반응형


블로그 본문에 링크를 해 두어야 할 부분이 생길때 링크 부분의 색인을 강조하고 싶은 경우.그럴때는 링크에 밑줄을 긋거나 폰트의 컬러를 구분해 두기도 하지만 만족스럽지 못한 경우가 있습니다. 따라서 링크된 본문 속의 글에 화살표를 두어서 단어를 프레스하면 링크가 되어 있다는 표현을 확실하게 독자에게 어필할 수 있겠죠. 


|STEP#1 CSS 추가(설치형 블로그만 가능)


CSS 편집창에 가셔서 맨끝 부분에 위의 내용을 추가합니다. 물론 블로그 주소는 본인 것으로 써야 겠지요.

위의 텍스트 파일은 아래에 올려 두겠습니다. "언제가 날고 말거야"님께서 제공해 주신 파일 활용.


  "언제간 날고 말거야" 님이 제공해 주신 CSS 수정파일

  

exlink.txt



주의!!


● 외부링크에만 화살표 표시를 하려면 → "위의 파일을 CSS파일에 전부 첨부(①+②)"

● 내부 및 외부 링크에 전부 표시하고 싶다면 → "① 부분만 CSS에 첨부" 



|STEP#2 화살표 이미지 파일 추가

링크 표시에 포인트를 주어야 할 화살표 이미지를 넣어주어야 겠지요? 저는 그냥 "언젠가 날고 말거야"님께서 첨부해 주신 이미지 파일을 그대로 활용했습니다. 위의 tx t파일 옆에 조그마한 화살표 보이시죠? 그렇게 생긴 화살표로 링크에 포인트를 주자는 것입니다.

화살표 이미지 파일(압축해제 후 사용) :exlink.zip


|STEP#3 HTML파일 수정


HTML 파일을 수정창에 가셔서(티스토리의 경우 관리자 페이지 메뉴에서 들어갑니다.) 아래처럼 HTML 파일을 수정해 주시면 끝납니다. 수정 후 저장 → 블로그로 가서 확인


① HTML 수정창에 커서를 놓고 "ctrl+F "를 누른다.

② ##_article_rep_desc_##를 창에 입력

③ HTML 수정창에 "##_article_rep_desc_##"의 아래 위에 다음과 같이 입력한다.

   <div class = "exlink">

             "##_article_rep_desc_##"

   </div>

    ※ 물론 "  "은 수정창에 [   ]로 나타납니다. 

④ 저장



반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유