티스토리 블로그는 네이버 블로그와는 달리 구글 애드센스 광고를 넣을 수 있어서 수익형 블로거들이 많이 이용하는 블로그 플랫폼 중 하나입니다. 블로그를 운영하면서 링크 기능을 자주 사용하게 되는데, 기본적으로 제공되는 링크 기능은 글자 색만 바뀌는 형태로 사용자 경험이 좋지 않습니다.
그래서 사용자의 가독성과 클릭률을 높이기 위해 클릭 버튼을 만들어 사용하는 방법이 많이 쓰입니다. 이번 글에서는 CSS와 서식을 이용해 티스토리 블로그 링크 버튼을 만드는 방법을 알아보겠습니다.
티스토리 블로그 링크 버튼 만들기
티스토리 블로그에서 링크 버튼을 쉽게 만들기 위해선 CSS 코드를 활용할 수 있습니다. 하지만 일반적인 사용자는 CSS 코드를 직접 작성하기가 어렵습니다. 이 경우, Button Generator 같은 사이트를 이용하면 직관적으로 CSS 코드를 만들 수 있습니다.
위 사이트에 접속하면, 다양한 버튼 디자인 중에서 원하는 스타일을 선택할 수 있습니다. 또한, 버튼의 크기, 색상, 그림자, 폰트 등을 쉽게 변경할 수 있는 옵션들도 제공됩니다. 버튼 디자인을 선택하고 스타일을 변경한 후, Get Code 버튼을 클릭하면 CSS 코드가 자동으로 생성됩니다. 이 코드를 복사하여 블로그 CSS 편집에 붙여 넣기 하면 됩니다.
Button Generator 사이트 살펴보기
Button Generator 사이트에 홈페이지 구성은 다음과 같습니다.
- 버튼 템플릿입니다. 원하는 스타일의 버튼 형태를 선택할 수 있습니다.
- 선택한 버튼 미리보기 화면입니다.
- 색상 변경, 투명효과, 그러데이션 효과등을 선택할 수 있습니다.
- 버튼 스타일을 꾸밀 수 있습니다.
- CSS / HTML 코드를 생성합니다.
버튼 스타일 꾸미기
우측 메뉴에서 버튼의 다양한 속성을 조절할 수 있습니다. 버튼의 속성으로는 다음과 같습니다., 글꼴 크기, 수직 크기, 수평 크기, 글꼴 색상, 배경색상 등이 있습니다.
이러한 속성들을 원하는 값으로 조절하여, 버튼을 원하는 대로 꾸밀 수 있습니다. 특히, 글꼴 크기, 수직 크기, 수평 크기는 버튼의 모양을 크게 바꿔줄 수 있는 중요한 속성입니다.
버튼 스타일을 사용자 입맛에 맞게 바꾸고 다시 Get Code 버튼을 누르면 링크 버튼의 CSS 코드를 생성할 수 있습니다. 이 코드를 이용하여 티스토리 블로그에 CSS 코드를 추가합니다.
생성된 CSS 코드 복사하기
디자인을 완성했다면, Get Code(④) 버튼을 클릭하여, 버튼의 CSS 코드를 가져올 수 있습니다. 이 코드를 복사하여 사용하면, 웹 페이지에서 버튼을 쉽게 사용할 수 있습니다.
생성된 코드는 본문에 들어갈 html 코드와 CSS에 들어갈 코드가 같이 나타납니다. 맨 윗줄에 나타나는 코드를 제외하고 .myButton { 으로 시작하는 코드를 모두 복사합니다
.myButton {
box-shadow: 0px 0px 0px 0px #3dc21b;
background-color:#44c767;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Trebuchet MS;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
CSS 편집에 코드 붙여 넣기
블로그 관리 페이지로 들어가서 스킨 편집을 선택합니다. 그 후, html 편집 > CSS를 차례로 선택합니다.
CSS 편집화면에서는 맨 마지막에 위에서 복사한 링크 버튼 CSS 코드를 붙여 넣기 한 후 저장을 클릭해 주시면 됩니다.
링크 버튼 서식 만들기
CSS를 적용하는 작업이 끝나면, 이제는 해당 서식을 만들어 포스팅할 때 손쉽게 링크 버튼을 만들 수 있는 방법입니다.
블로그 관리 페이지에서 '서식관리'를 클릭해 줍니다. 그다음, '서식 쓰기' 버튼을 클릭합니다. 이어서, 서식 제목을 입력한 후 'html'을 클릭하여 html 코드 입력 모드로 전환합니다.
이제, 앞서 링크 버튼 만들기 사이트에서 받은 코드 중 맨 위 코드 한 줄을 복사하여 html 화면에 붙여 넣은 후, 서식을 저장해 줍니다. 이제, 이 서식을 사용하여 포스팅할 때, 링크 버튼을 손쉽게 적용할 수 있습니다.
<a href="#" class="myButton">링크 버튼</a>
서식을 활용하여 본문에 링크 버튼 넣기
본문 작성 중 링크 버튼을 넣고 싶은 공간에 글쓰기 옵션에서 더보기 > 서식을 선택합니다. 서식 목록에서 위에서 만든 링크 버튼을 선택합니다.
다음과 같이 나오면
링크버튼을 클릭하고 상단의 🔗(링크 삽입/수정) 아이콘을 눌러 연결할 링크 주소를 입력하면 됩니다.
버튼 속 문구 변경하기
버튼 생성 후 버튼 속 문구를 변경하려면 간단하게 '링크버튼' 이 부분을 클릭해서 원하는 문구로 대체하면 됩니다.
다음과 같이 변경할 수 있습니다.
결론
이처럼 버튼을 만드는 방법은 CSS코드를 모르더라도 온라인에서 제공되는 툴이나 코드를 복사해서 사용하는 것으로도 충분히 구현 가능합니다.
링크 버튼을 활용한 광고 노출은 많은 블로거들이 사용하는 방법 중 하나입니다. 링크 삽입/수정에서 [새창으로 열기]를 체크 해제하면 링크 클릭 시 전면 광고가 노출되어 수익 향상에 많은 도움이 됩니다. 링크 버튼을 활용하여 보다 효과적인 블로그 운영을 할 수 있습니다.