티스토리 블로그를 방문하여 정보를 검색하다 보면 깔끔한 링크버튼을 보셨을 겁니다. 이는 티스토리에서 제공하지 않는 기능으로 블로그 운영자 본인이 직접 HTML과 CSS 코드를 입력해서 만들어야 합니다. HTML과 CSS 코드를 생성해주는 사이트에서 코드를 생성하여 서식으로 만들어 놓으면 포스트 작성 시 서식 불러오기로 간편하게 사용이 가능합니다.
멋진 링크버튼으로 블로그를 깔끔하게 꾸밀 수 있도록 링크버튼 코드를 생성해주는 사이트를 알려드리고 티스토리 블로그 서식 만드는 방법과 링크를 넣고 문구를 넣는 방법까지 알려드리도록 하겠습니다. 이미지만 보시더라도 쉽게 따라하실 수 있으므로 전혀 어렵게 생각하지 않으셔도 됩니다.
링크버튼 HTML과 CSS 코드 만들기
코딩에 친숙하지 않아 블로그에 글만 작성하시는 분들은 코드를 수정하거나 입력하는 부분을 많이 어려워하시고 코드를 잘못 사용해 애지중지하는 블로그에 문제가 생길 수 있다는 염려로 코드 수정을 잘 안 합니다.
그러나 링크버튼 만드는 것은 HTML과 CSS 코드를 생성해주는 사이트가 있어 쉽게 만들 수 있습니다. 아래의 링크버튼 코드 만들기를 눌러서 해당 사이트로 이동하여 코드 생성하는 것부터 시작하도록 하겠습니다.
버튼링크 생성 사이트로 이동했다면 위와 같은 화면이 나옵니다. 왼쪽에서 마음에 드는 링크 이미지를 선택한 뒤에 우측에 있는 수정 툴을 활용하여 글자체, 너비, 높이, 윤곽선 조정 등을 한 후 [Get Code] 버튼을 눌러주면 해당 수정 툴 부분에 선택하고 수정을 완료한 링크버튼의 HTML과 CSS 코드가 생성됩니다.
(1) : HTML코드
(2): CSS코드
선택 완료한 링크버튼 코드가 생성되었다면, HTML코드와 CSS코드로 나누어서 사용을 해야 합니다. (2)에 표시된 부분이 CSS코드이고, (1)에 표시된 부분이 HTML코드입니다. 첫 줄에 있는 HTML코드는 서식 쓰기에 붙여 넣을 것이고, 둘째 줄 아래 부분의 코드는 CSS코드로 티스토리 블로그 CSS편집에서 붙여 넣을 겁니다. 먼저 티스토리 블로그 CSS편집을 위해 (2)의 코드를 마우스로 드레그하여 복사를 합니다.
링크버튼 CSS코드 넣기
그리고 타스토리 ‘블로그관리 홈 -> 꾸미기 -> 스킨편집’에서 CSS편집을 선택한 후에, CSS코드 마지막 부분에서 엔터키를 한번 또는 두 번 쳐서 공간을 만들고, 윗 부분 코드들과 분리되도록 구획을 만들어 줍니다. 다른 버튼 코드들을 아래에 계속 붙여 넣기 위한 작업입니다.
한 칸 또는 두 칸 빈 공간을 만든 아래 부분에 복사한 (2)부분을 붙여넣기 합니다. 처음 CSS코드를 넣을 때는 그대로 복사하여 붙여 넣으면 되지만 추가하여 버튼 코드를 넣을 때에는 ‘myButton1, myButton2,…’와 같이 앞서 붙여 넣기한 코드와 구분해주는 작업을 해주어야 합니다.
추가하여 버튼 코드를 넣을 때는 CSS코드는 ‘myButton’ 3군데 모두 수정해주고, HTML코드는 1곳의 ‘myButton’ 끝 부분에 숫자나 기호로 CSS코드와 맞추어서 수정하시면 다양한 모양의 링크버튼을 서식으로 저장하여 사용하실 수 있습니다.
<tip> CSS코드 붙여넣기에서 color 부분에 글자색상 코드가 있는데 본문작성에서 글자 색상을 변경할 수 있으려면 #색상코드 뒤에 스페이스바로 한 칸 띄고 !important;를 넣어주어야 합니다.
예를 들어 희색의 경우 ‘#ffffff !important;’와 같이 추가 코드를 넣어주는 것입니다. 이렇게 해주셔야 본문 작성 시 폰트 색상을 변경했을 때 링크버튼 글자의 색상이 바뀌게 됩니다.
아래 이미지를 참고하여 버튼을 구분하고 !important 코드를 넣으시면 쉽게 할 수 있습니다. color부분과 myButton2로 앞의 myButton과 구분한 부분을 보시고 적용하시면 됩니다.
* 아래 이미지에서 /* 버튼 */은 입력하지 않는 것을 권장합니다. 경험상 해당 문구를 넣었을 때 버튼 모양이 구현되지 않는 오류가 있었습니다. 위 코드들과 빈 공간 한 칸 또는 두 칸으로 구분하는 방법을 사용하시기 바랍니다. /* 버튼 */ 문구 없이 입력해야 오류 없이 버튼모양이 나타납니다.
링크버튼 HTML코드로 서식 만들기
이제 (1)부분의 HTML 코드를 복사하여 블로그관리 홈->콘텐츠->서식관리에서 서식쓰기를 하여 제목은 링크버튼으로 알아보기 쉽게 작성하고, 기본모드 부분을 눌러서 HTML창으로 들어갑니다. 그리고 복사해둔 (1)의 HTML코드를 제목 아래에 붙여넣기 해주면 서식 만들기는 완료됩니다.
링크버튼에 링크 넣기
버튼에 링크를 넣는 방법은 원하는 위치에 서식을 불러온 후에 포스트 본문 작성 시에 기본모드를 HTML창으로 변경하여 서식의 “#”부분에 ‘#’을 지우고 링크를 넣어주고, 위 이미지에서 ‘조회하기’ 부분에 원하는 문구를 넣고 다시 기본모드로 전환하시면 됩니다.
본문 작성 시에는 버튼 모양 생성이 안 되고 글자로만 되어 있으나 미리보기나 발행을 하면 만들어 놓은 링크버튼 모양이 표시가 됩니다.
링크버튼 마치며
원하는 링크버튼을 만들어서 넣는 스킬이 생기시면 블로그를 원하는 대로 꾸밀 수 있어 포스트 작성이 재미있어지고 다른 블로그와 차별화할 수 있습니다. 이미지를 보고 순서대로 따라해 보시면 어렵지 않게 링크버튼 만드는 방법을 마스터할 수 있습니다. 자신만의 링크버튼을 만들어서 풍성하고 자유롭게 포스트를 꾸며보시기 바랍니다.
피세틴(Fisetin) 노화방지 효과, 제품 고르는법, 고용량 복용법
코랄칼슘(Coral Calcium) 영양제의 이점과 칼슘제 선택 시 고려사항