티스토리 블로그를 운영하다 보면 링크를 띄워 사람들에게 보여줘야 하는 경우가 있습니다.
이 외에도 전면광고를 활용해 수익을 올린다든지 할 때 링크를 사용합니다.
그냥 링크를 띄워도 좋지만 버튼식으로 링크를 만들어 사용한다면 보기에도 간결하고 깔끔해 종종 사용 중입니다.
그래서 오늘은 버튼링크를 만드는 법에 대해 알아보도록 하겠습니다.
티스토리 버튼링크 만들기
HTML과 CSS 코드 받아오기
먼저 버튼링크를 만들려면 HTML과 CSS 코드를 받아와야 합니다.
위 페이지에 접속을 하시면
좌측 네모 박스 안에서 자신이 만들고 싶은 버튼의 모양을 클릭합니다.
버튼을 선택하고 그대로 쓰실 거면 상관이 없지만 혹시나 글자색이라든지 맘에 안 드는 부분이 있다면 수정이 가능합니다.
중간의 네모 박스에서 색을 고를 수 있는데 저는 글자색이 맘에 안 들어서 글자색을 바꾸도록 하겠습니다.
네모 중에서 가운데 흰색을 클릭하시면 글자색을 고를 수 있습니다.
저는 버튼링크의 글자색을 노란색으로 하고 싶어서 중간에 기둥에 있는 화살표를 잡고 노란색이 보일 때까지 내리고 정사각형 안에 있는 동그라미를 노란색까지 옮기면 위에 예시로 있는 버튼링크의 글자색이 바뀝니다.
맘에 드는 색을 골랐으면 마우스를 바깥에 아무데나 클릭해서 색을 고르는 칸이 사라지면 코드 받기를 누릅니다.
코드 받기를 누르면 우측에 네모 박스에 HTML과 CSS 코드가 생성이 됩니다.
티스토리에 코드적용
코드가 생성되었으니 블로그에 적용을 하러 가보겠습니다.
티스토리 블로그에 와서 관리 - 꾸미기 - 스킨편집 - HTML편집으로 들어갑니다.
CSS로 들어가 가장 아랫부분에 아까 받은 코드의 보라색 네모 부분을 복사해 붙여 넣기를 합니다.
적용을 반드시 해주세요.
적용을 하고 나와서 관리 - 콘텐츠 - 서식관리로 들어갑니다.
서식 쓰기를 누르시면 블로그 글쓰기와 비슷한 화면으로 넘어갑니다.
HTML 모드로 들어가 코드의 빨간 네모박스 부분을 붙여 넣기 합니다.
붙여 넣기를 하고 기본모드로 나오면
red라는 글자가 보입니다. 이 부분은 미리 보기를 하면 버튼으로 보이니 걱정을 안하셔도 됩니다.
제목을 버튼링크라고 저장을 하고 미리보기를 합니다.
버튼링크 글자색 바꾸기
미리 보기를 해서 정상적으로 표시가 된다면 다행이지만 저는 글자색을 수정한 부분이 적용이 되지를 않았습니다.
이에 코드를 다시 확인을 해 보았으나 분명 색을 수정한 코드가 맞습니다.
이 부분은 어떻게 해야 할까요?
바로 이 코드를 추가해줘야 하기 때문입니다.
위의 코드를 받으시고 복사를 하셔서 CSS에서 color: 색깔표 뒤에 붙여 넣기 하시고 ; 로 줄을 마무리하시면
미리 보기를 하시거나 글을 발행했을 때 글자색이 수정이 된 것을 확인하실 수 있습니다.
버튼링크 사용법
버튼링크를 만들었는 데 사용을 해봐야 합니다.
버튼링크를 서식으로 만들어두었기 때문에 글을 쓰다 서식을 눌러 버튼링크 서식을 누르시면 링크가 뜨는 것을 확인하실 수 있습니다.
여기서 쓰던 글에서 HTML모드로 들어갑니다.
버튼링크를 서식으로 넣은 부분에
<p data-ke-size="size16"><a class="myButton" href="#">red</a></p>
를 찾으시면 되는데 여기서 # 의 부분에 링크를 띄우실 주소를 넣으시고 red 부분에 버튼링크에 들어갈 글자를 넣으시면 완성입니다.
마무리
버튼링크를 만드는 법을 저도 공부를 하며 써먹어보기 위해 작성한 포스팅입니다.
버튼링크를 만드는 법이 궁금하셨거나 혹은 글자색이 안 변해서 찾아보신 분이 계시다면 도움이 되셨으면 좋겠습니다.