티스토리를 하시다 보면 링크버튼을 도드라지게 만들어서 클릭을 할 수 있게 만들고 싶을 텐데요 바로 사이트에서 HTML과 CSS 코드를 만들어서 진행을 하면 아래 화면처럼 멋있는 링크를 만들 수가 있습니다. 해야 되는 것을 2가지입니다. 그 방법을 간단하게 정리합니다.
티스토리 링크 버튼을 만들기 위해서는 일단 아래 만들어주는 버튼 제너레이터(Buttongererator)사이트를 방문을 해서 코드를 먼저 만들어야 합니다. 해야 될 일은 2가지입니다. 무료이니 이용하면 정말 좋습니다.
티스토리 링크버튼(전면광고 띄울 수 있는 링크박스) 만들기 준비 2가지
1. 링크버튼 만들기 사이트에서 코드 만들기 (자신이 원하는 형태 박스)
2. 나의 티스트리에서 서식란에 넣어두기 및 CSS 설정하기
A useful tool for designing css buttons
Button generator is a free online tool that allows you to create cross browser css button styles.
www.bestcssbuttongenerator.com
티스토리 블로그 링크버튼 만들기 순서
1. 아래 링크버튼 만들기 사이트로 접속을 하시기 바랍니다. 위에서 링크버튼 코드 만들기 사이트로 접속합니다.
2. 왼쪽에 있는 자신이 만들고자 하는 링크 버튼 스타일을 선택을 합니다.
3. 사이즈와 색상을 자신이 원하는 스타일로 변경을 합니다. 저의 경우는 아래 처럼 빨간색으로 진행을 했습니다. get code를 해서 버튼을 누르면 맨 우측에 코드가 만들어집니다.
4.. My button부터를 복사를 해서 자신의 티스토리 스킨편집으로 들어갑니다.
그리고 css부분으로 들어가서 맨 아래에 붙여 넣기를 합니다. 단 칼라옆에! important; 같이 넣어주어야 합니다. 에러가 나는 경우를 대비한다고 보시면 됩니다. 아래 링크버튼 만들기 화면 코드입니다.
* 링크버튼 꾸미기 */
. myButton { box-shadow: 5px 4px 7px 1px #f29 c93;
background:linear-gradient(to bottom, #fe1 a00 5%, #ce0100 100%);
background-color:#fe1 a00; border-radius:28px; border:1px solid #d83526;
display:inline-block;
cursor:pointer; color:#ffffff;! important;
font-family:Arial; font-size:21px;
padding:16px 53px;
text-decoration:none;
text-shadow:0px 1px 0px #b23 e35; }
. myButton:hover
{ background:linear-gradient(to bottom, #ce0100 5%, #fe1 a00 100%);
background-color:#ce0100; }
. myButton:active
{ position:relative; top:1px; }
스킨편집 > CSS 아래 화면은 붙여 넣은 화면 모습입니다.
5. 이제 서식으로 만들어서 글쓰기를 할 때마다 불러서 쓰기 위해서는 나의 티스토리 홈화면> 서식관리> 우측 상단 서식 쓰기 버튼을 클릭> 기본모드에서 제목 설정 > HTML 모드에서"<p style="text-align: center;" data-ke-size="size18"><b><a class="myButton" href="#"> 링크제목 </a></b></p>"를 넣습니다.
링크제목이라고 되어 있는 부분은 수정을 해서 연결할 실제 링크제목으로 수정을 하면 됩니다.
HTML모드에서 서식을 만들어 놓은 모습아래 화면입니다.
기본모드에서 서식을 만들어 놓은 모습니다.
실제로 글을 쓸 때는 아래처럼 서식모드에서 자신이 저장해 놓은 서식 중에서 링크버튼 만들기로 저장해 놓은 링크를 넣고 불러온 링크에 실제 연결할 사이트의 URL을 연결하시면 됩니다.
링크버튼 서식 불러내기 화면
실제로 글을 쓰고 버튼 링크를 넣은 위 화면이 아래 화면처럼 보이게 됩니다.
이상으로 티스토리 블로그에 링크 버튼 만들기 방법과 사이트에 대해서 알아보는 시간이었습니다.