티스토리 뷰
티스토리를 하다 보니 하나둘씩 욕심이 생깁니다. 그중 하나는 링크 버튼이었는데요. 처음에는 모르고 미리캔버스를 통해 이미지 버튼을 만들었는데 뭔가 달라 보였습니다. 나중에서야 버튼제너레이터라는 프로그램으로 만든다는 사실을 알았는데요. 이 글에서는 버튼제너레이터를 들어가지 않고 포스팅만 보고 따라오시면 블루버튼을 만들 수 있게 알려드리겠습니다. 대신 블루버튼만 가능합니다. 변형시키는 방법은 포함하지 않겠습니다.
애니메이션 버튼 만들기
1. 첨부한 메모장 파일을 열어 블루버튼 CSS코드를 복사해 주세요.
2. 티스토리 블로그 관리 > 스킨편집 > HTML편집 > CSS 들어가 줍니다. 그리고 복사했던 블루버튼 코드를 CSS 화면 가장 하단에 붙여넣기 해 줍니다. 그리고 적용을 눌러줍니다.
3. 그리고 아래 첨부한 메모장의 블루버튼 서식코드를 복사합니다.
4. 티스토리 블로그 관리 > 콘텐츠 / 서식관리 > 서식 쓰기로 들어갑니다. 제목은 적당히 적어줍니다. 저는 '애니메이션 링크버튼 (블루)'라고 넣었습니다. 그리고 HTML 화면으로 전환해 주고 블루버튼 서식코드를 붙여 넣기 해줍니다.
기본모드로 전환하면 아래와 같은 화면이 나옵니다. 버튼은 안 보이고 저게 뭐냐 싶으시겠지만 맞습니다. 그냥 완료를 눌러 주세요. 블루버튼 서식 만들기까지 완성됐습니다.
움직이는 블루버튼 활용하기
1. 이제 활용단계입니다. 글쓰기에 들어가 제목과 내용을 적어주세요. 저는 테스트 목적으로 발행하느라 제목이 '블루버튼 테스트'입니다. 그리고 상단 점세개을 누르고 서식으로 들어갑니다.
2. 조금 전에 만든 블루버튼 서식을 실행해 주세요. 그렇다면 아래와 같은 화면이 나옵니다. 버튼모양도 안 나오고 이게 뭐냐고요? 얼마 남지 않았습니다. 우선 블루버튼에 넣어줄 타이틀을 수정해야 하는데 기본모드에서는 불가능합니다. 다시 HTML 모드로 들어가 주세요.
3. '제목 넣기' 부분이 버튼 타이틀을 넣을 곳입니다. 제목 넣기를 지우고 수정해 주세요. 저는 블루버튼으로 바꿔 보겠습니다.
4. 여전히 버튼은 보이지 않지만 발행 전까지는 계속 이 모습입니다. 이번에는 버튼에 링크를 연결해 보겠습니다. 버튼 타이틀에 커서(블록)를 씌운 후 상단 링크를 눌러 주세요. 그리고 첫 번째 칸에 링크로 연결할 url을 입력하고 새창으로 열기 박스를 해제한 후 확인을 눌러줍니다. 저는 테스트라서 네이버 링크를 넣었습니다. 그리고 글쓰기 후완료해 주세요.
5. 아래는 완성된 모습입니다. 버튼의 모습이 보이고, 버튼을 누르면 움직이며 눌리는 모습을 볼 수 있습니다. 그리고 정상적으로 링크로 연결되는 모습을 보실 수 있습니다. 이제 글쓰기에 잘 활용하시면 됩니다. ^^
사실 4번 링크 연결 방법은 HTML화면을 통해서도 가능합니다. 하지만 기본모드가 보기에도 좋고 새창열기 해제하기도 편해서 설명드린 방법을 추천드립니다. 저는 버튼제너레이터를 이용해 저만의 버튼을 만들었는데요. 굳이 개성있는 버튼을 만들게 아니라면 이게 훨씬 편할 것 같아 컴맹이의 입장에서 포스팅을 했습니다. 설명을 보면 복잡해 보이지만 코드 넣기는 일회성 작업이고, 서식을 활용해 글쓰기 하는 것은 곧 적응하실 겁니다. 나중에 기회가 된다면 다른 버튼링크도 공유하도록 하겠습니다. 움직이는 링크버튼를 활용해 더 퀄리티 있는 포스팅 하시기 바랍니다.