오늘은 티스토리 링크 버튼을 만드는 방법을 초보자들도 쉽게 따라 할 수 있게 설명 보겠습니다. 처음 링크 버튼을 만드는데 쉬운 거 같으면서도 좀 복잡하더라고요. 차근차근 순서대로만 따라 하시면 금방 하실 수 있어요. 저도 링크 버튼 만들 때 인터넷으로 찾아보면서 했는데 마지막 결정적인 링크 설정설명이 잘 되어 있지 않아서 혼자 엄청 헤맸던 기억이 나네요. 그럼 만드는 방법을 알아보겠습니다.
▶ 제일 먼저 해야 할 일은 CSS Button Generator 사이트에 접속을 합니다.
그러면 아래와 같은 화면이 뜨게 됩니다. 순서대로 마우스로 원하는 디자인과 글씨체를 선택하시면 됩니다.
1번은 버튼의 디자인이고 2번은 글씨체와 글씨크기 버튼박스의 크기와 그림자 등 설정을 할 수 있습니다. 원하는 것을 선택할 때마다 중앙에 있는 디자인이 바뀌게 되는데 미리 보기라고 생각하시면 됩니다.
▶ 원하는 디자인과 글자크기를 선택했다면 Get Code를 눌러줍니다.
▶ 아래와 같은 코드가 열립니다. 이제부터는 티스토리 블로그에 가셔서 순서대로 입력하시면 됩니다.
▶ 티스토리 들어가셔서 블로그 관리 > 스킨 편집 > HTML편집 > CSS에서 아래박스 부분을 붙여 넣어줍니다. 스킨편집을 들어가서 오른쪽 상단에 HTML편집을 눌러줍니다.
CSS를 눌러주고 복사해 온 코드를 맨 아랫부분에 붙여 넣어줍니다. 헷갈릴 수 있으니 enter 후 붙여 넣어준다. 그리고 적용버튼을 누른다.
CSS가 적용이 되었으니 글쓰기에 가서 버튼 만들기와 링크를 연결을 해봅시다. 글쓰기에 들어가서 글쓰기 화면에 원하는 위치에 두고 오른쪽상단에 기본모드를 HTML로 바꿔준다.
화면이 바뀌면 CSS Button Generator 사이트에서 생성한 블로그 서식에 입력할 코드를 복사해서 붙여 넣어줍니다.
이때 연결할 사이트를 a href= "#" #에 해당하는 사이트를 복사해서 넣어줍니다.
<a class="myButton" href="https://search.shopping.naver.com/search/all?query=%EC%A0%88%EC%9D%B8%EB%B0%B0%EC%B6%94&bt=-1&frm=NVSCPRO">절인배추 사러가기</a></p>
그리고 geen이라고 쓰여있는 부분은 버튼 위에 쓰일 글자이니 혹시 다시 수정을 하고 싶으면 여기서 수정을 해도 된다.
참고로 버튼크기와 글자크기는 CSS에서 수정가능합니다.
저는 절인 배추 사러 가기 버튼을 만들어 보겠습니다. 다 작성 후에 다시 기본모드로 바꿔줍니다.
버튼을 만들었는데 버튼은 안 보이고 링크만 형성된 거처럼 보입니다. 왼쪽 하단에 미리보기 버튼을 눌러보면 버튼이 잘 만들어진 걸 확인하실 수 있습니다. 여기까지 링크버튼과 CSS코드삽입에 대해 알아보았습니다
티스토리를 시작한 지 얼마 되지 않은 초보이다 보니 여기저기 찾아봐도 설명이 조금 생략된 부분이 있으면 잘 따라가기 어렵더라고요. 그래서 저와 같은 분들에게도 도움이 되었으면 해서 블로그 작성해 보았습니다. 오늘은 여기까지입니다.