티스토리에서 버튼 CSS로 만들어서 , 서식에서 삽입해서 이용하는 방법을 정리해 보도록 하겠습니다.
우선 티스토리 블로그에 링크버튼을 제작하는 방법과 그 이유에 관해 간단히 알아보고 갈까요?
링크 버튼을 제작하는 이유는 무엇입니까?
방문자에게 직관적이고 이해 쉬운 정보를 제공하려면 링크 버튼이 필요합니다. 특히, 애드센스 수익을 늘리기 위해서는 사용자가 광고나 그 외 콘텐츠를 클릭할 확률을 증가시켜야 하는데, 직관적인 링크 버튼은 아래와 같은 원인으로 많은 이익이 됩니다.
- 이용자 체험 향상: 많은 사람들이 텍스트 링크보다 버튼 유형의 링크를 선호합니다. 그러니까 더 나은 소비자 경험을 제공하려면 링크 스위치를 이용하는 것이 중요합니다.
- 조형의 완성도: 스위치를 활용해 블로그 포스트 디자인을 깔끔한 느낌으로 연출해보세요.
가장 중요한 것은 사실 링크 클릭을 통해서 광고수익율을 높이는 데 있습니다. 이는 애드센스 승인 이후 각 사이트나 블로그에 광고를 붙이게 되는데 , 그중에서 가장 수익률이 높은 것은 바로 버튼이나 다운로드 클릭을 통한 전면광고 이기 때문 이지요.
티스토리에서 링크버튼을 생성하고 적용시키는 이유를 알아 보았습니다. 이제 미넴스킨 에서 적용시키는 법을 알아볼텐데요. 다른 스킨의 경우도 같지만, 다만 기존 스킨에서 링크의 서식을 특정짓는 CSS를 알고 이를 제거해 주는 작업이 필요할 것입니다.
스킨 링크 스타일 변경 - 미넴스킨 기본 또는 다른 스킨 기본 링크 스타일 삭제
먼저 미넴 스킨에서 이용되는 바디 링크 스타일의 색상과 테두리 색상을 지정하는 코드를 찾아 링크 스타일에 관련된 두 코드(기본 모드 색상, 흐림 모드 색상)를 제거하겠습니다.
HTML 편집 모드에서 "etc-color"를 찾아서 , 코드 아래 ".content-article a"라는 부분을 찾아 (Control+X)를 사용해 삭제하세요. 방금 삭제한 ".content-article a"를 찾아보면 다크모드에서 이용하는 링크 스타일인 "body.dark-mode .content-article a"가 나와 이 코드도 함께 삭제 합니다.
미넴 스킨 바디 링크 스타일 변경 및 CSS 버튼 추가 - 미넴 스킨 바디 링크 스타일 변경 및 CSS 버튼 추가 - 미넴 스킨 바디 링크 스타일 변경 - 이전 링크 스타일 제거
미넴 스킨 링크 스타일 변경 - CSS 코드 추가
이제 미넴 스킨에 적용된 링크 스타일의 색상이 제거되었으므로 CSS 편집창 하단의 텍스트에 활용할 새로운 링크 스타일 코드를 추가하면 링크 스타일 변경이 완료됩니다.
Minem 스킨 바디 링크 스타일 변경 - CSS 코드 추가
CSS 버튼 코드 추가
이미지 버튼 대신 CSS 스위치를 사용하면 블로그 포스트 작성 시간이 절약되고 CSS 버튼 애니메이션은 방문자의 애정을 끄는 데 이익이 됩니다.
텍스트를 작성하면서 필요할 때마다 양식을 작성하여 빠르게 로딩하여 간편하게 활용할 수 있습니다. 양식을 작성할 때 HTML 모드에서 아래 코드를 붙여넣고 저장하면 됩니다. 아래에서 빠르게 받으시어 서식에서 작성하고 활용하실수 있습니다.
결론
지금까지 우리는 무료 Minem 스킨의 바디 스타일을 변화시키고 CSS 스위치를 추가하여 방문자의 애정을 끄는 방안을 배웠습니다.
참고로 다른 버튼 CSS 양식 제작 내용은 아래를 참고해 보실수도 있습니다. 다양한 CSS버튼 만들기 활용을 통해서 블로그를 풍성하게 만들어 보시기 바랍니다.
'건강 정보 > 질병과 건강관리' 카테고리의 다른 글
| 백내장 수술 위한 실비 보험 종류 (0) | 2023.10.18 |
|---|---|
| 백내장 수술 비용 가격 (0) | 2023.10.18 |
| 백내장 수술 후 부작용 주의사항, 관리 방법 (0) | 2023.10.18 |
| 백내장 증상 8가지 (0) | 2023.10.17 |
| 미넴스킨 CSS 코드 다운로드 바로가기 (0) | 2023.10.17 |
| 녹내장은 어떤 질병일까? 증상 예방 치료 (0) | 2023.10.17 |
| 녹내장 초기증상 7가지 및 치료방법 (0) | 2023.10.17 |
| 녹내장 수술 비용 부작용 회복기간 총정리 (0) | 2023.10.17 |
댓글