티스토리 링크버튼 만드는 방법

티스토리 링크버튼 만드는 방법

 

링크 버튼이란?

 

링크버튼이란 해당 사이트로 바로 갈 수 있도록 박스에 링크를 걸어 놓은 것을 말한다.

 

물론 링크버튼 없이도 단어나 문장에 링크를 걸어서 사용할 수 있지만 

 

외관상 깔끔하지 않아서 많이들 버튼을 사용한다.

 

굳이 비교를 하자면 아래와 같다.

 

구글 에드센스, 티스토리 고민이라면

 

 

티스토리 자체 바로가기

 

티스토리에는 링크 버튼 말고도 자체적인 바로가기 기능이 있다.

 

방법은 의외로 간단하다.

 

해당 단어나 문장에 링크 →  링크한 것 맨 앞에서 Enter

 

구글 에드센스, 티스토리 고민이라면

구글 에드센스, 티스토리 고민이라면

 

이렇게 티스토리 전용 링크버튼이 생성되는 걸 볼 수 있다.

 

글의 내용이라던가 사이트의 주소 정보를 알 수 있어서 사이트 이동에 신뢰성이 높지만

 

사이즈를 변경할 수 없고 공간을 많이 차지하여 생각보다 많은 분들이 사용하지 않습니다.

 

필자는 가끔 사용합니다.

 

링크 버튼 만드는 방법

 

① 블로그 관리 홈에서 스킨 편집으로 들어가고

 

 

② 스킨 편집에서 html 편집으로 들어간다.

 

 

③ 여기서 CSS로 들어갑니다.

 

 

④ 아래 코드를 복사하여 CSS에 붙여 넣기하고 적용하기를 누른다.

/* CSS 버튼21 */.btn-right {  text-decoration: none;  position: relative;  font-weight: 700;  font-size: 18px;  letter-spacing: -0.03em;  color: #fff;  background-color: rgba(0, 121, 240);  padding: 0.9em 3em 0.9em 2.25em; /* 버튼 내부 여백 상, 우, 하, 좌 */  border-radius: 50px; /* 버튼 라운드 크기 */  box-shadow: 0 2px 5px 0 rgba(71, 71, 71, 0.75);}.btn-right:hover {  background: #f0094a; /* 마우스 오버 배경색 */}.arrow-right {  position: absolute;  display: inline-block;  width: 0;  height: 0;  border-top: 8px solid transparent;  border-right: 8px solid transparent;  border-bottom: 8px solid transparent;  border-left: 8px solid #fff;  margin-top: 3px;  margin-left: 8px;  animation: horizontal 0.7s ease-in-out infinite;}@keyframes horizontal {  0% {    margin-left: 9px;  }  50% {    margin-left: 11px;  }  100% {    margin-left: 9px;  }}/* CSS 버튼21 끝 */

 

 

※ 코드를 복사하여 맨 앞이나 맨 밑에 넣으라고들 하던데, 예전에 링크버튼을 생성했던 경험이 있었지만

이상하게 이 블로그는 맨 앞이나 맨뒤에 복사 붙여 넣기 해도 링크버튼이 활성화되지 않았습니다.

여러 차례 궁리해 본 결과 CSS CONTENTS 밑에 복사 붙여 넣기를 했더니 링크버튼이 활성화되더라고요.

아마도 저 같은 분들이 많을 거라고 생각하고 자세하게 올립니다. 참고하세요.

 

 

⑤ 다시 블로그 관리 홈으로 넘어와 서식관리에서 서식쓰기로 들어간다.

 

 

⑥ 서식쓰기에서 모드를 HTML로 변경해주고 아래 코드를 복사하여 붙여 넣고 서식을 완료한다.

<div><center><a href="#"><button class="btn-right">CSS 버튼21<span class="arrow-right"></span></button></a></center></div>

 

 

⑦ 방금 완성했던 서식으로 다시 들어가서 미리보기를 보면 아래와 같이 링크버튼이 활성화되어 있을 것이다.

 

 

링크버튼 주의사항

 

링크버튼 만드는 포스팅을 하려고 이 블로그에 직접 적용해보았는데

 

앞에서 말했듯이 CSS의 맨 앞이나 맨 아래에 붙여 넣었을 때 링크버튼이 활성화되지 않았다.

 

CSS CONTENTS 코드가 끝나는 밑에 붙여 넣었더니 활성화가 되었는데,

 

이게 무조건적으로 맞다가 아니니까 한 번씩 붙여 넣어보면서 서식 미리 보기의 링크버튼이 활성화가 되는지 확인해 보시길 바란다.

 

 

※ 티스토리 링크버튼을 활성화시키면서 가장 많이 참고한 블로그이다.

엄청난 퀄리티의 포스팅으로 검색어 상단에 위치하고 있으니까

링크버튼의 모양이나 색을 변경하고 싶으신 분들은 이분의 블로그를 참고하시길 바란다.

 

티스토리 | CSS 링크 버튼 서식 모음 #2