Home

티스토리 다운로드 버튼 만들기

SP_Music_Player_1.0.rmskin


티스토리에 파일을 업로드 하여 공유할 때 위처럼 자동으로 다운로드 버튼을 만들어 주는데 티스토리에서 지원하는 다운로드 버튼이 밋밋하여 마음에 들지 않을 때 링크를 만들어 자신의 디자인을 적용 하는 방법 입니다.



글 작성 시 미리 보기를 이용하여 업로드된 파일의 주소를 알아냅니다.



미리 보기창이 뜨면 자동 생성된 다운로드 버튼을 우 클릭하여 링크 주소를 복사하고 자동 생성된 다운로드 버튼을 문서에서 삭제합니다.



문서에서 지우더라도 파일 보관함에는 파일이 남아 있어야만 링크가 가능합니다.



버튼을 이미지나 텍스트로 만들어 놓고 링크를 현재창으로 걸어줍니다. 편집기의 링크 기능을 사용하지 않고 HTML 편집으로 직접 작업 해도 됩니다.



<a href="http://speedink.tistory.com....." target="_top" class="tx-link">다운로드</a>

편집기 링크 기능을 사용하여 링크를 생성하였다면 class="tx-link"가 생기는데 다른 링크와 겹치지 않게 클래스 명을 download 등으로 변경하고 클래스가 없다면 다운로드 클래스 생성해 줍니다. 


지정한 클래스 이름으로 스타일 부여해주는데 스타일을 그때 그때 문서에 같이 포함하여 만들어도 되지만 style.css에 미리 코드를 삽입해 놓고 링크에 클래스 명만 지정함으로 더 편하고 빠르게 적용할 수 있습니다.



<a href="http://speedink.tistory.com/attachment/cfile1.uf@2156444C5427DBD70ACB23.rmskin" target="_top" class="tx-download">다운로드</a>
<style>
.tx-download:link {
    display:inline-block;
    margin:2px;
    padding:2px 8px;
    background:#1DDB16;
    color:#fff;
    font-size:12px;
    border-radius:5px;
    text-decoration:none;
 }
.tx-download:hover { background:#F15F5F; }
</style>
다운로드 위 코드를 적용한 다운로드 버튼 입니다. :) 


<a href="http://speedink.tistory.com/attachment/cfile1.uf@2156444C5427DBD70ACB23.rmskin" target="_top">
<img src="https://t1.daumcdn.net/cfile/tistory/251FB8395427F08D30" height="45" width="200"></a>

이미지를 이용하면 스타일 코드 없이 이미지 링크로 깔끔하게 표현 합니다. 이미지 링크는 파일 링크와 같은 방법으로 구할 수 있습니다.


more

댓글을 달아 주세요

  1. 2014.09.30 15:22 신고
    [ur=http://speedink.tistory.com/attachment/cfile1.uf@2156444C5427DBD70ACB23.rmskin][img]https://t1.daumcdn.net/cfile/tistory/251FB8395427F08D30[/img][/ur]
  2. 2019.11.21 17:44 신고
    감사합니다!~

.

Secret