필자와 같이 블로그를 처음 시작하는 초보 중에 초보는 블로그 글 하나를 포스팅 하는데도 많은 시간이 소요 되고 남들보다 더 많은 수고스러움이 있을 수 밖에 없을 것입니다. html은 커녕 티스토리에 있는 기능도 다 활용하지 못하는 경우가 많습니다.
그래서 오늘은 필자와 같은 어려움을 겪는 블로그 초심자들을 위해 간단하게 링크 버튼을 생성하는 법을 안내할까 합니다.
버튼 이란?
필자가 최근 올린 블로그 포스팅 중 몇개의 포스팅에서 버튼 모양의 링그가 보이기 시작하였습니다.
금융상품 한눈에, 나에게 맞는 금융 상품 한번에 알아보기!
금융상품 한눈에, 나에게 맞는 금융 상품 한번에 알아보기!
오늘은 나에게 꼭 맞는 금융상품을 한번에 조회 할 수 있는 사이트를 소개 할까합니다. 근로소득 보다 금융소득이 더욱 더 중요해 지는 요즘, 예·적금 뿐 아니라 보험상품, 대출상품을 알아보는
ing-comma.tistory.com
링크를 만드는 방법은 여러가지가 있습니다. 크게 4가지로 나뉘자면 ▶ 텍스트에 링크를 삽입 하는 방법,▶ 이미지에 링크를 삽입하는 방법,▶ 티스토리 자체의 플러그인을 이용하여 링크를 삽입하는 방법, 그리고 ▷ 버튼을 만들어서 거기에 링크를 삽입하는 방법 등이 있습니다. 프로그램의 기본을 알고 있다면 매우 쉬운 내용이지만 블로그를 처음 접하시는 분들은 어렵다고 생각 할 수 있습니다. tmi 사실 필자는 프로그램 언어를 조금 배우긴 했지만 머리가 나빠서 그런지 기억이 나질 않더라구요;;
버튼이 필요한 이유?
위의 4가지 방법과 같이 링크를 삽입 하는 방법은 많이 있습니다. 어쩌면 다른 방법 들도 더 있을 것이라고 생각이 됩니다. 하지만 그럼에도 불구하고 버튼을 만들어야 하는 이유는 내부링크, 가독성 때문입니다. 애드센스를 이용하는 사용자라면 외부링크를 선호하지 않을 것이라고 생각합니다. 외부링크(새창으로 연결)을 사용하면 전면 광고가 뜨지 않기 때문이지요
외부링크를 피하기 위해서는 링크 설정에서 위의 체크 항목을 해제 하면 됩니다. 하지만 아래와 같이 링크 바로아래에 티스토리 전용 링크 스킨이 나오게 되는데 이는 외부링크로 연결이 되는 스킨 입니다.
TISTORY
나를 표현하는 블로그를 만들어보세요.
www.tistory.com
또한 가독성 측면에서도 버튼은 매우 중요한 요소 중 하나입니다.
버튼 만드는 방법
▶ 버튼 모양의 이미지를 제작해서 이미지에 링크를 삽입 하는 방법(캔바, 미리캔버스 등을 이용해 쉽게 제작 가능)
▶ html, css 소스를 제공해 주는 사이트를 이용해서 css 서식을 지정하는 방법
두 가지 방법 중 누구나 쉽게 따라 할 수 있는 두 번째 방법을 소개 할까합니다.
css 서식 사이트
css 서식을 지정하기 위해서는 간단한 css 코드를 구성해야합니다. 블로그를 처음 하시는 분들은 어려울 수도 있는 작업이기 때문에 손쉽게 복사 붙여넣기 할 수 있는 사이트를 소개합니다.
Button generator
제공하는 기능은 다음과 같습니다.
- 버튼 테마 지정하기: 죄측의 버튼을 선택하면 그에 맞는 서식이 자동으로 지정이 됩니다.
- 버튼 미리 보기
- 세부 서식 지정하기: 우측의 세부적인 서식을 입맛에 맞게 지정을 할 수 있습니다.
- 서식 항목: ▷ 텍스트 입력, 크기, 종류 ▷ 박스 가로 세로 사이즈 ▷ 라운딩 크기, 픽셀 지정 ▷ 박스, 텍스트의 그림자 지정
티스토리 버튼 만들기
하늘색 버튼의 get code를 클릭하면 우측의 그리드가 코드로 전환이 됩니다. 코드를 복사해 옵니다.
<a href="#" class="myButton">light red</a>
.myButton { box-shadow:inset 0px 39px 0px -24px #e67a73; background-color:#e4685d; border-radius:4px; border:1px solid #ffffff; display:inline-block; cursor:pointer; color:#ffffff; font-family:Arial; font-size:15px; padding:6px 15px; text-decoration:none; text-shadow:0px 1px 0px #b23e35; } .myButton:hover { background-color:#eb675e; } .myButton:active { position:relative; top:1px; }
위의 a로 시작하는 코드는 html 코드이고 아래의 서식 지정 코드는 css 코드입니다.
용어 정리
- a테그<a></a>는 링크를 지정하는 태그를 말합니다
- class는 css 서식을 지정한다는 의미 입니다. 위의 코드에서는 "myButton" 이라고 지정이 되어 있네요
- herf: 링크 지정
- 가장 윗 부분의 a태그는 글을 작성할 때 사용
- .myButton뒤 css 서식은 티스토리 설정에서 css를 지정해 주어야 합니다.
티스토리 설정에서 css 지정하기
블로그설정 → 꾸미기 → 스킨편집 → html편집 → css
위의 티스토리 설정으로 들어가서 css 코드의 제일 아래 부분에 .myButton 코드를 복사, 붙혀넣기 합니다. 위치는 상관이 없지만 나중에 관리가 편하도록 제일 아래에 붙혀넣기 합니다. 추가 하셨으면 적용을 누르시고 다시 블로그 편집 화면으로 돌아 옵니다. 그러면 .myButton 이라는 css 서식이 저장 되었습니다.
html 편집 모드에서 html 코드 붙혀 넣기
이제 html 코드를 추가 해야 합니다. html편집을 위해서는 편집 화면 우측 상단의 기본모드를 html모드로 전환해 주어야 합니다.
html 코드를 넣어 볼까요~
href= 뒤에 링크를 추가해 주시구요, 저장 된 css 서식을 지정 합니다. 저는 기본으로 되어 있는 "myButton"으로 지정 하겠습니다. 텍스트도 입력합니다. 그리고 다른 디자인의 버튼을 만드려면 다른 이름의 클래스를 지정해 주어야 합니다. 예를 들자면 .blueButton 이나 .redButton 과 같이 html 편집의 css에 추가해 주시면 됩니다.
이렇게 하시면 버튼이 완성 됩니다. html을 배우지 않아도, 컴퓨터에 익숙하지 않아도 이렇게 html 소스를 제공해주는 사이트가 많이 있으니 잘 참고하시면 깔끔한 블로그 글을 작성 하실 수 있으실 거에요^^
참고 할 점
- 이 방법을 이용하기 위해서는 모바일 최적화 설정을 해제 하여야 합니다.
- 모바일 최적화 설정이 되어 있으면 모바일 환경에서 css설정이 보이지 않습니다.
- 모바일최적화 설정: 관리자 폐이지 ▷ 꾸미기 ▷ 모바일 ▷ 티스토리 모바일 연결을 사용하지 않습니다. 설정
- 티스토리 앱에서는 버튼이 보이지 않아요
- 티스토리 앱에서 글을 수정 할 경우 class지정이 사라 질 수도 있습니다. (pc에서 수정하는 것을 추천합니다.)
버튼을 확인해 보고 싶으시다면 좌측 하단의 미리보기를 클릭해 보시면 되요^^ 발행 했다가 다시수정하고 하면 안 되는거 다들 아시죠? 알고 있으면서도 또 수정 버튼을 누르고 있네요;; 항상 검수하는 습관이 중요 한 듯 합니다.
해야지 하면서도 티스토리 관련
컨텐츠 업로드를 미루게 되네요
앞으로도 조금 더 부지런을 떨어서
티스토리 관련 컨텐츠를 지속적으로
업데이트 하도록 하겠습니다.
끝까지 읽어 주셔서 감사합니다.
'일상 이야기' 카테고리의 다른 글
| 초보 블로거에게 닥친 시련, 다음 저 품질 탈출 후기 (1) | 2023.03.03 |
|---|---|
| 애드센스 하위도메인 삭제? 주요 개편 내용 정리 (0) | 2023.02.24 |
| 티스토리 초기 설정 만 잘해도 애드센스 반은 성공이다! (4) | 2023.01.18 |
| 일 방문자 50명... 애드센스 승인을 받다! (feat, 애드고시라 불리는 이유) (1) | 2023.01.04 |
| 스마트폰으로 e-book 만들어 보기(vflat) (0) | 2022.08.12 |
댓글