티스토리 수익 증가 방법 공개! (CSS 하이라이트 강조, 애드센스 클릭률 증가)
블로그를 하다 보면 내 블로그를 조금 더 예쁘게 만들고 싶다는 욕심이 들곤 합니다. 블로그를 예쁘게 만드는 것은 물론이고 하이라이트 효과를 주어 나의 글을 더욱더 돋보이게 해 줄 수 있다면 금상첨화일 것입니다. 티스토리 블로그에서 기본적으로 제공하는 밑줄과 색상효과를 통해 중요한 부분에 하이라이트 처리가 가능하지만 머지않아 2% 부족함을 느끼게 될 것입니다. 나의 블로그 글을 더욱더 돋보이게 만들 수 있도록 CSS를 수정하여 하이라이트 효과를 부여해 보도록 하겠습니다.
▼ CSS가 무엇인지 아직 모르겠다는 생각이 든다면?
HTML과 CSS을 아는만큼 블로그 수익은 늘어난다.
티스토리 블로그를 운영하기 위해 HTML과 CSS를 다룰 수 있다면 금상첨화이다. 티스토리의 경우는 코드를 수정할 수 있도록 모든 것을 오픈하고 있기 때문에 조금의 지식만 있다면 블로그 운영을
lst914.tistory.com
CSS를 수정하여 하이라이트 주는 방법
CSS를 통해 하이라이트 효과를 부여하면 어떠한 장점이 있을지 생각해 보신 적 있으신가요? CSS를 통한 하이라이트 효과는 두 가지 장점을 가지고 있습니다.
ㆍ첫째, 블로그 내 중요 부분을 강조하는 효과로 읽는 이에게 중요한 내용을 명확하게 전달할 수 있습니다.
ㆍ둘째, 중요한 내용을 전달함과 동시에 광고와 매칭시켜 광고 클릭률을 높일 수 있는 방법을 만들어 낼 수 있습니다.
단순하게 나의 블로그와 정성가득한 글들을 돋보이게 만들 수 있다는 장점도 있지만, 중요내용을 표시함과 동시에 광고와 연결시킬 수 있는 가능성을 만들어 낼 수 있다는 점에서 하이라이트 효과는 굉장히 중요한 요소로 작용될 수 있습니다.
HTML과 CSS에 익숙하지 않는 초보 블로거들에게는 이런 작은 팁도 큰 도움이 된다고 생각하기에 CSS입력 코드를 공개하고 코드를 입력하는 것만으로도 나의 블로그가 변화될 수 있다는 점을 보여드리고자 합니다.
CSS코드는 아래와 같습니다. 해당 코드를 복사하여 붙여 넣는 것만으로도 하이라이트 효과를 바로 적용할 수 있습니다.
해당 코드를 복사하여 CSS에 붙여넣는 방법을 천천히 따라 해 보시기 바랍니다.
u {
text-decoration: none;
display:inline;
box-shadow:inset 0 -9px 0 #d1e780;
}
하이라이트 효과 CSS로 적용하기
① 티스토리 『스킨편집』을 누른 후 우측 상단에 위치한 『HTML편집』을 클릭합니다.
② 『HTML편집』을 누르면 우측 상단에 HTML, CSS, 순서대로 분리되어 있는 것을 볼 수 있습니다.
여기서 HTML이 아닌 CSS를 눌러 CSS편집창으로 진입합니다.
③ 위에 적힌 하이라이트 코드를 복사하여 CSS 편집창에 붙여 넣어 줍니다.
이때 코드의 위치는 크게 중요하지 않으니, 사용자가 하이라이트의 색상을 편집하기 용이한 위치에 넣어줍니다.
④ 하이라이트 적용여부 확인하기
⑤ 만약 하이라이트의 색상이 마음에 들지 않는다면 CSS편집창에서 하이라이트 색상을 조절할 수 있습니다.
노란색 동그라미 안에 색상을 클릭하여 색상 변경이 가능합니다.
이처럼 간단한 방법으로 중요한 내용을 하이라이트 처리할 수 있습니다. 기존에 단순히 밑줄과 음영을 이용한 것보다 중요내용을 강조할 수 있을 것 같다는 생각이 드시나요? 블로그 미관으로도 훨씬 더 좋은 모습을 보여주는 것 같습니다.
정리
ㆍHTML → CSS 편집창으로 이동
ㆍ하이라이트 코드를 복사하여 CSS 편집차에 붙여 넣기
ㆍ원하는 색상으로 변경, 저장 후 하이라이트 적용여부 확인하기
하이라이트와 애드센스 광고 연계하기
앞선 포스팅에서 블로그 내 사람들이 가장 많이 클릭하는 부분이 최상단, 목차, 소제목, 링크가 걸려있는 부분에 많이 클릭한다는 내용을 전해 드렸습니다. 위 부분 외에도 하이라이트가 쳐져 있는 곳은 중요한 내용으로 인식이 되기 때문에 자연스럽게 마우스포인터가 가게 된다고 하는데요. 이러한 점을 활용한다면 하이라이트만으로도 애드센스 광고 클릭률을 높일 수 있습니다.
애플 아이폰으로 예를 들어보겠습니다. 애플에서 아이폰의 새로운 라인이 출시되었다고 가정하고 포스팅을 작성한다고 하였을 때 아이폰 신모델을 설명하면서 아이폰에 하이라이트 및 링크를 걸어두면 어떻게 될까요?
사람들이 자연스럽게 아이폰에 대한 내용을 읽다가 신제품에 대한 내용과 제품명이 나오며, 강조가 되어있다고 생각해 보시죠. 습관적으로 마우스 포인트가 해당 내용으로 이동하게 될 것입니다.
물론 위와 같은 방법은 쿠팡파트너스와 연결해서 쓰는 것이 가장 효율적이며, 극단적인 예를 들었기에 가능한 것입니다. 쿠팡파트너스를 하면 블로그 저품질에 걸릴 수 있다는 불안한 마음으로 연결하지 않는 블로거가 많다는 것도 알고 있습니다. 하지만 쿠팡파트너스와 티스토리 블로그 저품질과의 상관관계는 그 누구도 증명하지 못합니다. 네이버 블로그와 같이 직접적으로 경쟁하는 구조가 아닌 티스토리에서 위와 같은 행동으로 인해 저품질에 걸린다는 것은 이해가 가지도 않거니와 전문가들조차도 크게 상관이 없다는 의견을 밝히고 있죠.
그래도 나는 위험을 최소화하면서 블로그를 운영하겠다고 마음먹으신 분들이 시라면 쿠팡파트너스와 같이 수익형 모델이 아닌 외부링크로 연결되는 것을 이용하여 전면광고(앵커광고)를 노려볼 수 도 있는 문제라고 생각합니다. 이는 저품질과 전혀 무관한 내용이기 때문에 충분히 하이라이트를 이용하여 전면광고를 유도할 수 있는 하나의 방법이 될 수 있습니다.
위 포스팅을 보시면 공유가능 OTT 부분에 넷플릭스가 하이라이트 처리되어 있습니다. 물론 넷플릭스 링크로 연결해 놓았으며, 사람들이 포스팅 글을 읽다가 자연스럽게 클릭을 할 수 있도록 만들어 놓은 것입니다. 이처럼 본인의 포스팅에 맞도록 하이라이트를 적절하게 적용하여 전면광고를 노출시키도록 한다면 애드센스 수익에 분명 도움이 될 것입니다.
마치며
지금까지 CSS 코드를 통해 블로그 글에 하이라이트 효과를 부여하는 방법과 하이라이트 효과를 통해 얻을 수 있는 장점에 대해 말씀드려 보았습니다. CSS를 잘만 활용한다면 가장 간단하면서도 강력한 효과를 낼 수 있습니다. 이왕 패시브인컴을 위해 노력하는 김에 보다 효율적으로 수익을 높일 수 있는 방법이 있다면 적극적으로 도전해 보는 것이 좋다고 생각합니다. 블로그야말로 투입되는 노력만큼 성과가 나는 분야라고 생각하는데요. 여러분들도 조금씩 발전해 나가는 블로그를 통해 소중한 수익을 늘려나가시길 바랍니다.
▼▼▼함께 읽으면 좋은 글▼▼▼
애드센스 광고 클릭률을 높이는 꿀팁!(애드센스 광고 수익 증가)
『 많은 분들이 디지털노마드를 꿈꾸고 있습니다. 하지만 쉽게 수익을 올릴 수 있다는 달콤한 말과는 다른 현실에 포기하고 맙니다. 블로그를 지속할 수 있도록 만드는 수익 증가는 애드센스 광
lst914.tistory.com
티스토리 블로그 애드 센스 수익을 가져다 주는 목차의 내부링크 연결 방법(HTML 수정)
『 티스토리 블로그 애드 센스 수익이 높은 블로그를 보면 굉장히 사용자 친화적이라는 느낌을 받습니다. 사용자 친화적으로 블로그를 만드는 것은 어렵지 않습니다. 바로 목차를 통해 내용을
lst914.tistory.com
애드센스 수익을 극대화 시키는 10가지 방법!
『 힘들게 에드센스 승인은 받았지만 수익을 올리기가 쉽지 않으신가요? 특히 광고 클릭률을 높이고, 방문자 수를 늘릴 수 있는 방법이 궁금하신가요? 단순히 글만 작성한다고 애드센스 광고수
lst914.tistory.com
다음 티스토리 블로그 저품질, 누락 원인 및 조치 방법! (저품질, 글누락, 통누락, 펍밴 탈출!)
『 티스토리 블로그를 처음 운영하신다면 운영초기 DAUM 검색엔진의 절대적인 힘이 필요하다는 것을 알고 계실 겁니다. 티스토리 자체가 DAUM이 운영하는 블로그이기 때문에 네이버나 구글에서
lst914.tistory.com
티스토리 링크버튼 디자인 손쉽게 적용하는 방법(CSS코드 추가)
블로그를 운영하다 보면 링크를 연결하여야 할 경우가 종종 생기게 되는데요. 블로그의 기본 링크연결을 사용하게 되면 너무 밋밋하기 때문에 『버튼 디자인』을 통해 꾸며주고 싶다는 욕구가
lst914.tistory.com
댓글