티스토리 블로그 수익 증가를 위한 필수 링크버튼입니다. 버튼 제너레이터 사이트를 활용한 CSS 버튼링크 만들기 1편입니다.
티스토리 CSS버튼링크
티스토리블로그 CSS 버튼링크 만들기입니다. 먼저 티스토리블로그를 하시는 분들은 수익형 블로그로 광고 수익을 얻기 위해 많이들 하시죠. 버튼링크는 내부사이트, 외부사이트 연결을 보다 예쁘게, 보는 분들이 편하게 찾아 클릭해서 필요한 사이트로 연결하기 위해 좋은 요소입니다.
티스토리블로그 CSS 버튼링크 만들기 1편, 버튼링크 만들기 대표 사이트 버튼제너레이터 사이트를 활용해서 만드는 방법입니다.
CSS버튼링크 만드는 방법
CSS 버튼링크 만드는 방법입니다.
1. 버튼제너리에 터 사이트 접속합니다. 사이트에 접속하면 아래 사진과 같은 사이트에 연결됩니다.
버튼 제너레이터 사이트에 접속하시면 크게 3구간 A, B, C 구간으로 나뉩니다.
A 구간에서는 버튼링크의 디자인을 선택할 수 있으며, B 구간에서는 버튼의 상세 설정으로 글꼴의 크기, 수직, 수평 크기 조절, 디자인을 네모난 박스, 또는 끝모양을 둥글게 할 수 있는 설정도 있습니다.
디자인 설정이 끝났다면 C구간에 코드 가져오기를 클릭하시면 아래와 같은 코드가 나옵니다.
코드 가저오기를 하면 상세설정화면이 코드로 바뀝니다. 1번은 글 쓸 때 HTML에 넣을 코드이며, 2번은 내 블로그 편집 HTML에서 CSS에 붙여 넣을 코드입니다.
먼저 2번 코드를 복사해서 내 블로그 편집, HTML 편집 CSS로 들어가서 빈 공간에 붙여 넣기 적용해 줍니다.
위 화면처럼 복사 붙여 넣기하고 적용 후 새로고침 하면 적용합니다. 이어서 서식을 활용해서 버튼링크 글 쓰는 방법을 알아볼게요.
티스토리 CSS 버튼링크 서식활용
내 블로그 HTML 편집에서 사용하실 버튼제너레이터 사이트에서 사용하실 버튼링크의 코드를 붙여 넣기 해서 적용했다면, 이제 서식을 활용해서 버튼링크를 적용해 볼게요.
블로그 홈 관리에서 서식관리 - 서식 글쓰기로 들어옵니다.
서식 만들기에서 글쓰기 HTML로 들어가면 검은색 화면이 나오고 위에 버튼 제너레이터 1번 코드 <p data-ke-size="size16"><a class="myButton" href="#"> green </a></p>를 붙여 넣어줍니다.
그리고 다시 기본모드로 돌아오면 Green 이 있습니다. 글쓰기 모드에서는 저런 식으로 보이고 미리 보기를 하면 녹색 버튼링크 가 완성되어 있습니다. 최종적으로 글쓰기 완료하면 나타나는 모양입니다.
버튼제너레이터 글씨 색깔 바꾸기
버튼제너레이터 코드를 그대로 붙여 넣고 했음에도, 사이트와 다르게 버튼 안에 색깔이 이상하게 나오는 오류가 있습니다. 그래서 수정해줘야 하는 부분이 있는데요.
버튼 링크 색깔이 이런 식으로 보기 안 좋게 표현됩니다. 수정은 간단하게 진행할 수 있습니다.
내 블로그 HTML 편집으로 다시 가서 CSS에서 Color 부분에서 #ffff; 뒷부분에 ; <를 지우고! important; 만 추가해 주면 됩니다.
수정해 주면 최종족으로 아래와 같은 깔끔한 버튼링크가 만들어집니다.
이렇게 만들어진 서식을 완료하면 내 서식에 저장됩니다. 이후 글쓰기 할 때 필요한 부분에 서식으로 가져오기해서 발행하시면 됩니다.
티스토리 CSS 버튼링크 만들기 버튼 제너레이터를 활용해서 만들어봤습니다. 다음 편은 이것보다 훨씬 쉬운 CSS에 코드 붙여 넣기 없이 HTML코드로만 만들 수 있는 방법을 알려 드리겠습니다.
'The journey to the Rich > 잡다한정보' 카테고리의 다른 글
| 2023 공인중개사 1차 2차 접수일정과 시험일정 3개월 합격준비반 최신 기출문제 다운로드 (1) | 2023.08.10 |
|---|---|
| 티스토리 버튼링크 초간단하게 만들기 2편 HTML코드 활용 (2) | 2023.07.23 |
| 셀러브리티 등장인물 한준경 윤시현 오민혜 인스타그램 (1) | 2023.07.17 |
| 셀러브리티 서아리 출연정보 인스타그램 (2) | 2023.07.16 |
| 워터밤 인천 2023 예매 라인업 일정 장소 기본정보 총정리 (1) | 2023.07.04 |
댓글