티스토리 블로그 북클럽 스킨 상단 메뉴 고정 방법.

티스토리 블로그를 운영하면서 생기는 고민중 하나로 방문자 수 증가와 방문자의 이탈률을 줄이고 자신이 작성한 다른 글로의 이동으로 더 많은 글을 조회하도록 하고 그로 인한 애드센스 광고 수익이 어떻게 하면 증가 할 수 있을까? 라는 고민이 생길 수 있으실겁니다.

 

이러한 고민의 결과로 생각해 볼 수 있는것은 사이드바를 고정 시켜서 방문자가 스크롤을 내리더라도 카테고리 메뉴를 항상 노출 시키거나 상단 메뉴바를 항상 노출 시킬 수 있다면 방문자가 궁금해 할만한 카테고리 또는 메뉴가 보인다면 클릭할 확률을 높일 수 있고 그로 인한 이탈률은 감소하고 이탈률 감소로 인하여 방문자에게 더 많은 광고를 노출 시킴으로써 광고 수익의 증가로 이어질 수 있기를 기대해 볼 수 있을것입니다.

 

스크롤을 내리더라도 사이드바가 고정되는 방법에 대해서는 앞에서 작성한 글을 참고 해 주시면 되겠습니다.

티스토리 사이드 바 고정 방법.

티스토리 사이드 바 고정 방법.

그럼 체류시간 증가와 이탈률 감소시키기 위한 방안으로 상단 메뉴를 고정시켜 광고 수익의 증가를 기대해 볼 수 있는 방법에 대한 이야기로 티스토리 블로그 북클럽 스킨을 기준으로 상단 메뉴바를 고정시키는 방법 함께 공유해 보도록 하겠습니다.

 

티스토리를 운영하는 모든 분들에게 도움이 될 수 있기를 바라겠습니다.

 

티스토리 블로그 북클럽 스킨 상단 메뉴바 고정 방법 썸네일 이미지

 

■ 목차.

1. 티스토리 블로그 북클럽 스킨 상단 메뉴 고정 방법.

  1-1. CSS코드 #header 수정.

  1-2. CSS코드 #aside 수정.

  1-3. CSS코드 #dimmde 수정.

 

---

1. 티스토리 블로그 북클럽 스킨 상단 메뉴 고정 방법.

티스토리 블로그의 상단 메뉴를 고정 시키는 방법으로 앞서 말한것과 같이 북클럽 스킨을 기준으로 수정 방법에 대한 내용을 공유하는것으로 수정 방법 이동 순서는 스킨편집 → html편집 → css로 이동하여 css코드 #header, #aside, #dimmed 3가지 키워드의 코드 내용을 수정 또는 변경하는것으로 상단 메뉴를 고정 시킬 수 있겠습니다.

 

1-1. css코드 #header 수정.

css코드 #header코드를 수정하기 위해서는 스킨편집 → html편집 → css탭 순으로 이동하여 css코드 편집창 118번째줄에서 시작되는 #header { border-bottom: 1px solid #eee; } 코드를 다음과 같이 변경해 줘야겠습니다.

→ #header { z-index:1010; background-color:#fff; box-sizing:border-box; position:sticky; position:-webkit-sticky; top:0; }

위 코드로 변경해 주게 되면 스크롤바를 내리더라도 메뉴바를 항상 상단에 따라올 수 있도록 고정 시키기 위한 코드 변경으로 보시면 되겠습니다.

 

1-2. CSS코드 #aside 수정.

1-1에서 #header 코드를 수정하게 되면 스마트폰에서 사이드바 탭을 열었을때 사이드바가 상단 메뉴바 밑에 깔리는 문제가 발생되기 때문에 이를 수정 보완 하기 위해서 css코드 편집창 2,484번째줄에 위치한 코드 z-index : 400px의 400px 수치를 1030px로 수정해 주는것으로 스마트폰에서 사이드바를 열더라도 사이드바가 상단 메뉴 위로 올라올 수 있도록 수정해 줄 수 있게 됩니다.

 

1-3. CSS코드 #dimmde 수정.

마지막으로 css코드 편집창에서 2,126번째줄에 위치한 #dimmed 코드중 2,130번째줄에 위치한 z-index : 300의 300 수치를 1020으로 수정해 줌으로써 상단 메뉴를 고정 시킬 수 있겠습니다.

 

---

애드센스 광고 수익을 증가 시키기 위해 html, css코드를 수정해 줌으로써 전체적인 프레임을 변경하여 광고 위치를 확보하고 체류시간 증가와 이탈률 감소를 기대해 볼 수 있는 노력들은 많이 존재 할 수 있지만, html, css코드를 잘 모를 경우에는 이들의 코드를 수정하는것에 거부감, 어려움, 두려움으로 인해 시도조차 해보지 못하는 경우가 있을 수 있습니다.

 

이러한 분들에게 도움이 될 수 있기를 바라고, 다만 이러한 기술적 수정으로 인한 애드센스 광고 수익 증가가 폭증하는것은 아니기 때문에 애드센스 광고 수익을 증가 시키기 위한 가장 기본적인 전제 조건으로 티스토리 수익형 블로그를 운영하기 위한 방법으로 품질이 우수한 글을 꾸준히 작성하고, 단기적인 방문자를 유입시키기 위한 사회적 이슈등의 글 보다는 장기적인 관점에서의 방문자를 꾸준히 유입시킬 수 있는 글을 작성해야 하는것으로 볼 수 있을것입니다.

 

이러한 장기적 관점에서의 꾸준한 방문자 유입을 위한 글쓰기 주제로는 개인적으로 자신이 경험한 노하우, 실제 경험 리뷰, 지식등과 관련한 글을 꾸준히 작성하는것이 도움이 될 수 있을것이라 생각됩니다.