블로그를 운영하면서 수익과 연관된 링크버튼을 이쁘게 꾸미고 싶은 경우가 있습니다. 그런데 프로그래머가 아니면 코드를 잘 모르기 때문에 방법을 모릅니다. 그래서 오늘은 코드를 잘 몰라도 가능한 링크버튼 꾸미는 방법을 알아보려 합니다.
링크버튼 예시
오늘 알아볼 예시는 아래와 같은 링크 버튼 만드는 방법에 대해서 알아보려 합니다. 저는 프로그래머가 아니라 코드를 제대로 사용하는 방법은 모릅니다. 그래서 간단한 사진과 코드를 이용해 초보도 할 수 있는 방법으로 아래와 같은 링크를 만들어보겠습니다.
기본 세팅 과정
1. 버튼 제너레이터
버튼 제너레이터라는 사이트가 있습니다. 우선 이 사이트를 이용해 기본적인 세팅을 합니다. 원하는 버튼의 모양, 색상, 크기를 선택해 'Get Code'를 클릭합니다. 그러면 아래 사진과 같은 코드가 나오게 됩니다.
여기서 사진의 빨간 네모 안에 있는 코드를 마우스로 드래그해서 복사합니다. 그리고 스킨편집 - css - 하단 또는 상단에 붙여 넣기하고 저장합니다. (저장한 코드 위치를 알기 쉽게 아래 또는 위에 붙여 넣습니다) 그리고 위에 있는 한 줄로 되어있는 코드는 서식에 저장합니다.
서식관리 - 서식 쓰기 - 제목은 '링크버튼' - 기본모드를 HTML 모드로 변경 - 코드 붙여 넣기 - 저장하시면 됩니다. 이제 기본적인 세팅을 완료했습니다.
2. 세팅된 버튼 사용하는 법
사용하는 방법은 간단합니다. 티스토리 상단에 있는 가로점 3개 클릭 - 서식 - 링크버튼 클릭하면 저장되어 있던 서식이 작성됩니다. HTML 모드에서 # 대신 이동할 사이트 주소를 넣어주면 됩니다. 그리고 blue 대신에 표시할 적절한 이름을 붙여주면 됩니다. (예 : 지원금 바로가기)
이미지 추가해서 꾸미기
1. 이미지 저장하기
이제 꾸미는 방법을 알아보겠습니다. 저는 코드를 다루는 법을 모르기 때문에 사진을 이용했습니다. 제가 사용한 이미지는 화살표시 모양이지만 다른 이미지를 원하시면 미리캔버스에서 직접 만드시면 됩니다. 사이즈는 300 × 300을 추천합니다. 또는 제가 만든 사진을 그대로 사용하고 싶으신 분들을 위해 사진을 올려두겠습니다.
스킨편집 - html 편집 - 파일업로드 - 추가 - 이미지 선택 추가 (영문 이름사진이어야 됨)
2. 서식 코드 수정하기
아까 저장했던 서식에 있는 코드를 아래에 있는 코드로 변경해서 저장해 줍니다. 코드를 잠깐 설명하면 글자사이에 사진을 넣는 코드입니다. 어렵지 않으니 복사해서 저장한 뒤 아래 설명을 따라 해 주시면 됩니다.
<p data-ke-size16"size16"><a calss="myButton" href="#"> blue <img style="vertical-align: middle;" src="@@" width="40" height="40" /></a></p>
- @@ : '스킨편집 - 파일업로드'에서 추가된 이미지를 우클릭하면 링크주소를 복사할 수 있습니다. 그 주소를 여기에 넣어주시면 됩니다. 사진을 블로그에 업로드하고 그걸 이용하는 거죠.
- blue : 블로그에 표시될 한글 내용
- width, height : 글자뒤에 표시되는 사진 크기
- # : 이동할 주소 삽입
3. 링크 디자인 색깔 변경하기
디자인 색상 변경하는 방법은 '스킨편집 - CSS'에 들어가서 아까 저장했던 코드를 보면 색깔이 있는 걸 볼 수 있습니다. 직접 만든 이미지와 색이 다른 경우 미관상 보기 안 좋을 수 있기 때문에 색깔을 변경해 주는 게 좋습니다. 사진의 빨간 밑줄 친 숫자들이 색상코드입니다. 이미지에 사용된 색과 동일한 코드로 색상을 변경해 주시면 됩니다.
☆ 제가 만든 이미지에 사용된 색상코드는 '57a1ec' 입니다. 한 가지 색으로 통일하려면 보이는 색상코드에 모두 같은 숫자를 붙여 넣기 하면 됩니다.
4. 마무리
경우에 따라선 그냥 링크도 좋지만 이렇게 이쁘게 꾸며진 링크는 클릭률에 도움이 됩니다. 저는 코드를 몰라서 이 디자인을 만들기 위해 대략 10시간 정도 연구한 것 같습니다. 저처럼 링크버튼을 꾸미고 싶은데 방법을 몰라 포기하신 분들이 있다면 도움이 되셨으면 합니다.