티스토리 블로그 CSS 링크버튼 만들기 (꽤 쉬운 왕초보용)

티스토리 블로그를 운영하다 보면 다른 곳으로 링크를 연결해야 할 경우가 종종 있는데 다른 블로그의 매력적인 링크버튼을 보면 만들고 싶은 마음이 생길 것입니다. 오늘 CSS 링크버튼 만들기를 한번 알아볼 테니 끝까지 보면 쉽게 따라 할 수 있을 것입니다.

 

링크버튼 만들어주는 사이트

 

1. 링크버튼 만들어주는 사이트

링크버튼을 만들려면 Button Generator 란 사이트에 들어가야 합니다. 요기에 들어가면 내가 원하는 모양과 크기, 폰트사이즈등 디자인을 만들어서 내 티스토리 블로그에 적용할 수 있습니다.

 

링크버튼 만들기

 

2. 나의 취향대로 디자인과 모양 만들기

 

 

 

 

• 좌측1번의 버튼 모양중 내가 원하는 색의 버튼을 고릅니다.
• 우측2번에서 텍스트 크기와 글씨체,박스의 크기와 흐림반경등 여러가지로 원하는 디자인으로 만들어봅니다.
• 원하는 디자인으로 모두 만들었으면 가운데3번의 코드받기를 누릅니다.

 

코드복사하기

 

3. 코드복사하기

글자크기를 조정하려면 font-size를 조절하면 되고 링크버튼크기는 padding에서 조절이 가능 세합니다. 세로크기가 10px이며 가로크기가 76px이니 업로드 후 테스트한 다음 본인이 원하는 사이즈를 조절하면 됩니다.

 

 

 

 

• 상단이 청색 테두리는 티스토리 블로그 서식에 붙여 넣기 할 것입니다.
• 하단 적색 테두리는 티스토리 블로그의 스킨편집-html편집-css의 맨 하단에 붙여 넣기 할 것입니다.
• 북클럽 기준으로 보여드린 것이니 다른 스킨이라도 상단에 구분을 두어 넣으시면 됩니다.

 

메뉴의 꾸미기-스킨편집-HTML편집-CSS를 누르고 들어갑니다.

 

4.CSS 링크버튼 코드 붙여 넣기

• 티스토리 블로그의 관리자 메뉴의 꾸미기-스킨편집-HTML편집-CSS를 누르고 들어갑니다.
• CSS창에서 맨 밑으로 내리고 문자가 끝나는 마지막줄에 전에 복사해 두었던 코드를 그대로 붙여 넣기 합니다.

 

 

 

 

• 여기서 중요한 것이 있는데 color 옆에! important;를 입력해야 합니다. 왜냐하면 내가 원하는 링크색으로 안 나올 수 있기 때문입니다.
• 잘 붙여 넣었으면 적용을 꼭 누릅니다.

 

서식에 링크버튼 코드 붙여 넣기

 

5. 서식에 링크버튼 코드 붙여 넣기

• 내 티스토리 블로그 관리홈에서 서식 관리를 클릭합니다.
• 서식 쓰기를 클릭합니다.
• 기본모드에서 내가 알기 쉬운 제목을 입력합니다.

 

 

 

 

• 기본보드에서 HTML모드로 들어갑니다.
• 위의 파란색 코드를 복사하여 붙여 넣기 합니다.

 

링크버튼 적용하기

 

6. 링크버튼 적용하기

• 상단의 점세개를 누릅니다.
• 서식에서 내가 저장시켜 놓았던 부분을 HTML로 보면 코드가 보입니다.
• href="#"에서 # 을 지운 큰 따옴표 안에 내가 연결하고자 하는 링크주소를 넣어줍니다.
• purple를 삭제한 후 링크버튼 안에 넣을 문구를 입력해 줍니다.

 

 

 

 

• 현재 페이지로 열기를 기본으로 합니다.
• 만약 새창으로 열기를 원한다면 "my Button"옆에 target="blank"를 넣으면 됩니다.
• 현재페이지로 열어야 전면광고 유도가 가능하므로 저는 넣지 않을 것입니다.

 

글을 발행하면 우측처럼 사용자가 선택한 버튼으로 잘 보이게 됩니다.

 

다시 기본모드로 돌아오면 파란색으로 표현되는데 글을 발행하면 우측처럼 사용자가 선택한 버튼으로 잘 보이게 됩니다.

7. 포스팅을 마치며

"Button Generator"라는 사이트에서 원하는 디자인의 링크버튼을 생성합니다. 생성한 디자인의 CSS 코드를 복사하고, 티스토리 블로그의 스킨편집-html편집-css의 맨 하단에 붙여 넣습니다. 마찬가지로, 복사한 링크버튼 코드를 티스토리 블로그의 서식에도 붙여 넣습니다.

티스토리 블로그의 서식 관리에서 생성한 링크버튼을 선택하고, href="#" 부분에 원하는 링크주소를 넣습니다. 링크버튼의 텍스트를 원하는 문구로 변경하고, 링크를 현재 페이지에서 열기를 선택하거나 새 창에서 열기를 선택하면 됩니다. 이렇게 설정한 후 글을 발행하면, 생성한 디자인의 링크버튼이 적용된 모습을 볼 수 있습니다.