티스토리 뷰
목차
티스토리 링크 버튼을 만드는 방법은 여러가지가 있습니다. 글과 관련된 사이트를 안내 할때 매우 용하게 사용하는것이 바로 링크 인데요. 그냥 링크 주소를 넣을수도 있지만 가독성을 높이는 데는 링크버튼을 만들어 글에 포함 시키는 것이 가장 좋은 방법 이라고 생각합니다. 어려울것 같지만 사실은 전혀 어렵지 않으니 잘 따라하시면 5분이면 완성되구요.
한번 서식에 저장해놓으면 다음부터는 1분 컷으로 사용하실수 있습니다.
[목차여기]
링크버튼 만들기
링크 버튼을 만드는 가장 정석인 방법은 바로 링크버튼을 만드는 사이트를 이용하여 만드는 방법입니다.
두번째는 바로가기 이미지를 만들어 생성하는 방법 인데요, 오늘은 링크버튼 만드는 사이트를 이용한 방법을 사용해 보도록 하겠습니다. 많은 사용자분들이 버튼을 만들어 사용하는 사이트가 Button Generator 입니다. 사이트에 접속 하여 원하는 링크를 만들어서 HTML 과 CSS 에 적용시켜 서식으로 저장하여 사용하는 방법이에요.
1.Button Generator 사이트 접속
상단의 링크버튼만들기 바로가기 버튼을 누르면 사이트로 접속하여 왼쪽 사이드바에서 원하는 링크버튼을 선택해 주세요.
2.원하는 디자인으로 버튼 꾸미기
원하는 디자인을 선택한후 오른쪽 사이드에 있는 텍스트 ,크기, 국경, 그림자등을 조절하여 본인이 원하는 사이즈로 만들수 있습니다.
저는 여러가지 사용해봤는데 기본으로 설정하는게 제일 좋긴하더라구요.너무 크면 모바일에서 볼때 글씨가 2줄로 나와거나 해서 안이뻐 보여서 저는 기본으로 사용하는데요 . 큰사이즈를 원하신다면 글꼴크기를 키우셔도 되고 수직과 수평크기를 조절하면서 본인이 원하는 사이즈를 만드시면 됩니다.
3.코드 가져오기
한글로는 코드가져오기 라고 써있구요, 영어로는 Get Code 라고 적혀있는 버튼을 클릭하면 아래와 같은 화면이 나옵니다.
이때 코드를 분류해서 복사 붙여 넣기를 해야하는데요. 첫번째 줄은 HTML 코드 이구요 2번째 줄부터 마지막줄까지는 CSS 코드 입니다. 잘 분류해서 코드를 적용해야 합니다.
4.코드적용하기
티스토리 블로그 접속- 블로그관리- 스킨편집- HTML 편집- CSS편집 으로 이동하기.
만들어 놓은 버튼의 코드 2번째 줄부터 마지막줄까지 ctrl+C 하여 CSS 페이지 제일 하단에 붙여넣기ctrl+V 하고 적용클릭
5.서식 만들기
CSS 코드를 복사하여 붙여넣고 저장 하였으면 서식을 만들어야 합니다.
블로그관리- 서식관리-서식쓰기로 들어갑니다.
서식관리에서 제목을 '링크버튼 만들기' 라고 입력하고 기본모드 에서 HTML 로 변경합니다.
링크버튼만드는 서식중에 첫번째줄에 있는 HTML 서식을 복사하여 붙여 넣기 하고 완료를 클릭 한후 기본모드로 돌아 옵니다.
링크버튼 사용하는 방법
링크버튼을 사용하기 위한 기본세팅이 끝났습니다. 이제는 글을 쓸때 사용하는 방법을 알려 드릴게요.
1.티스토리 글을 작성한다.
2.링크버튼을 넣고 싶은곳에 링크버튼만들기 서식 넣기를 클릭한다.
3. 버튼은 글을 발행해야지만 디자인까지 완벽하게 노출되며, 서식넣기를 하면 글씨에 파란색밑줄로만 노출된다.이때 기본모드- HTML화면으로 전환한다.
4.HTML 화면에서 바로가기 버튼이라는 글씨가 보이는 코드에서 "#" 부분에는 원하는 링크를 넣고, 뒤에 '바로가기버튼' 글씨를 지우고 원하는 글자를 넣고 완료를 클릭한다.
5. 하단에 미리보기를 클릭하여 링크버튼이 예쁘게 나오는지 확인 하면 됩니다.
글로만 보면 복잡해 보이지만 사실 따라하다보면 생각보다 어렵지 않은정도가 아니라 너무나 간단합니다.
링크버튼 유용하게 사용해보세요. 다음엔 더 간단한 이미지에 바로 넣기 하는 방법 알려 드리겠습니다.