티스토리 링크버튼 만들기 초보자도 할 수 있다

2023.09.14 - [분류 전체보기] - 무료사진 편집프로그램 포토스케이프로 사진용량 줄이기 이것만 보세요

티스토리 링크버튼 만들기

티스토리나 블로그를 하다 보면 내용에 따라 링크를 연결할 경우가 종종 있습니다. 하지만 그냥 주소만 떡하니 붙여놓으면 별로 맛이 안 살죠. 저도 여러 블로그를 찾아보며 다른 블로그는 어떻게 돼있는지 보니 고수님들은 버튼을 쓰더라고요. 사실 저는 티스토리를 시작한 지 얼마 안 된 티린이고 컴퓨터에도 영 소질이 없어서 버튼 만들기가 힘들었는데요.

그래도 이왕 티스토리를 시작했으니 남들이 하는거 저 같은 초보자 분들도 버튼 한번 만들어 봐야 되지 않겠습니까. 그래서  저처럼 초보자분들을 위해 고수님들이 블로그에 알려주시는 설명보다 조금 더 자세히 알려드려 볼까 합니다. 따라만 해도 버튼이 만들어지는 마법을 보여드릴 테니 잘 따라와 주세요.

버튼 디자인 선택 및 티스토리 CSS에 코드 넣기

★링크버튼고르러가기★

링크 버튼을 만들려면 버튼 디자인이 있어야겠죠? 위 버튼을 누르셔서 원하는 디자인을 골라주세요. 디자인 종류가 꽤 있으니 천천히 보시고 고르셨다면 고른 디자인을 클릭해 주세요.

디자인을 클릭하면 화면 가운데에 클릭한 디자인이 나옵니다. 내가 고른 디자인이 맞는지 확인 후 Get Code 버튼을 눌러주세요. 누르면 오른쪽에 이 버튼 디자인의 코드가 나옵니다. 이 코드를 티스토리에 넣어줄 건데 이제 시작이니 잘 따라 해봅시다.

버튼 디자인의 전체 코드 중 맨 윗줄을 제외하고 제가 표시해 둔 영역만 복사해 주세요. 이유는 모르셔도 됩니다. 링크버튼 만드는데 전혀 중요하지 않아요.

복사했다면 티스토리로 들어가서 왼쪽 관리창에서 스킨편집을 눌러주시고 누르면 새창이 나옵니다. 새창에서 오른쪽에 보면 html편집 버튼이 있어요. 이걸 누르면 HTML/CSS/파일업로드 버튼이 나오는데 이 중 가운데 CSS 버튼을 눌러주세요. 눌러보면 알 수 없는 코드들이 막 나와있는데 신경 쓰지 말고 복사한 코드를 맨 위나 맨 아래에 붙여주세요.

CSS에 붙여 넣기가 완료되었다면 적용버튼을 눌러주세요. 저는 처음에 할 때 CSS가 아니라 HTML에 붙여 넣고 해서 버튼이 안나오더라구요. 꼭 CSS에 붙여넣고 적용버튼 누르기!

내 티스토리 서식에 버튼생성하기

지금까지 잘 따라오셨다면 조금 더 잘 따라와 주세요. 번거로운 작업이 남아있습니다. 이제 버튼을 생성해 봐야겠죠? CSS에 코드 붙여 넣고 적용버튼 누른 후 다시 티스토리 관리창으로 나와서 왼쪽 메뉴 중 서식관리 버튼을 눌러주세요.

그리고 서식 쓰기 버튼을 눌러줍니다. 본인이 구분하기 쉬운 제목으로 입력해 주고 위 편집버튼 중 기본모드 버튼을 눌러서 HTML 버튼을 눌러주세요.

HTML 모드가 되면 창이 까맣게 변합니다. 여기까지 되었다면 아까 버튼디자인 코드 복사할 때 남겨두었던 맨 위에 첫 줄을 복사해서 붙여 넣어줍니다. 붙여 넣었다면 약간의 수정작업이 필요한데요. 눈 크게 뜨고 따라와 주세요.

<a href="#" class="myButton">graphicriver</a> 이렇게 붙여넣은게 확실한가요? 그렇다면 이제 수정을 해봅시다. <a href="#" class="myButton"target=_blank">graphicriver</a> 요렇게 빨간색 글씨(target=_blank")를 기존 코드 중간 "my Button" 옆에 입력해 주세요. 입력 후 아래 완료버튼을 눌러서 서식을 저장해 줍니다.

왜 이렇게 수정하냐고요? 이해하려 하지 말고 그냥 받아들여주세요. 왜 이렇게 하는지 고민할 시간에 빠르게 작업을 끝내봅시다.

생성한 버튼디자인 테스트하기

자 여기까지 했다면 이제 거의 끝났습니다. 지금까지 했던 작업이 잘 되었는지 마지막으로 테스트를 해볼 텐데요. 글쓰기 버튼을 눌러서 위쪽 편집칸 오른쪽에 점 세개를 눌러보면 서식버튼이 있고 서식버튼을 눌러보면 아래쪽에 위에서 생성했던 링크버튼이 나옵니다.

링크버튼을 선택한 후 편집칸 점 세개 옆에 기본모드를 눌러서 HTML 창으로 들어가 보면 아까 수정해서 저장했던 코드가 출력되는 걸 볼 수 있습니다.

이제 정말 마지막입니다. 저장해 둔 코드가 정상적으로 나온다면 href="#" 에서 "#" 를 지우고 연결하고자 하는 링크의 주소를 복사해서 붙여 넣어주세요. 그리고 코드 끝쪽에 graphicriver를 지우고 버튼 안에 넣을 text를 입력해 주세요. 저는 ★링크버튼고르러가기★ 이렇게 입력해 줄게요.

입력 후 다시 기본모드로 돌아오면 기존 링크연결과 같은 텍스트 형식이지만 글을 다 작성 후 발행을 하게 되면 아래에 보이는 것처럼 여러분이 선택했던 버튼모양으로 적용되어 있습니다.

지금까지 티스토리 링크버튼 만드는 방법에 대해 설명드렸는데 잘 따라오셨나요? 이대로만 한다면 원하는 링크버튼을 만드는데 어려움이 없으실 겁니다. 우리 초보자들도 할 수 있다는 믿음을 가지고 원하는 디자인으로 마음껏 링크버튼 바꿔봅시다. 오늘 하루도 파이팅입니다.

 

2023.09.14 - [분류 전체보기] - 무료사진 편집프로그램 포토스케이프로 사진용량 줄이기 이것만 보세요

무료사진 편집프로그램 포토스케이프로 사진용량 줄이기 이것만 보세요

2023.09.11 - [생활정보] - 2023 무료 가계부 어플 추천 TOP 3

2023 무료 가계부 어플 추천 TOP 3