본문 바로가기
반응형

티스토리 블로그/블로그 운영 정보공유33

상단바 헤더(header) 고정하는 2가지 방법 sticky pixed (CSS 코드 수정) 티스토리 꾸미기 목차 티스토리에 상단바를 고정하는 2가지 방법을 작성했습니다. 여러가지로 적용할 수 있는 코드이니 한번 따라서 적용해보시길 바랍니다. '티스토리 HTML/CSS 편집창'과 'F12 개발자 도구'를 이용하는 방법은 계속해서 다른 글들과 겹쳐서 해당 내용 중간에 링크를 걸어 놨습니다. 1. sticky 코드 값을 이용한 상단바 고정 { z-index: 1010; > 우선 순위 값 background-color: rgba(255,255,255,0.95); > 배경 색상 position: sticky; > 스크롤시 따라오게 하는 값 top: 0px; > 포지션 위치 값 지정 border-bottom: 1px solid #eee; > 아래 경계선 색상 표시 } 1-1 sticky 코드 적용 결과 'sticky' .. 2024. 2. 17.
'F12' 개발자 도구로 티스토리 테마 자유롭게 미리 수정해보기 티스토리 테마 변경 및 구글 애드센스 설정에 관한 글을 쓰면서 계속해서 '개발자 도구'와 '티스토리 HTML 편집창' 이용 방법이 겹쳐서 아래와 같이 해당 기능이용하는 방법을 정리해봤습니다. 목차 1. 개발자 도구 여는 방법 (HTML, CSS 설명) 키보드에서 'F12' 키를 이용해서 '개발자 도구'를 열 수 있습니다. 이미지에서 확인할 수 있듯이 위에는 'HTML' 코드를 확인할 수 있고 아래에는 'CSS' 코드를 확인할 수 있습니다. 1-1 'HTML', 'CSS' 코드가 뭔가요? HTML : 집을 지을때 뼈대라고 생각하면 됩니다. (= 틀) CSS : 집을 짓고 나서 인테리어를 한다고 생각하면 편합니다. (= 디자인) 2. 페이지에서 원하는 부분 HTML CSS 이름 및 위치 알아내기 'F12'키.. 2024. 2. 17.
티스토리 원하는 위치에 구글 애드센스 광고 넣는 방법 (상단에 광고 넣기) 목차 아무래도 CPM(광고 노출 횟수당) 애드센스 광고 수익 비중이 증가 했기 때문에 최대한 광고를 많이 노출하는게 유리합니다. 때문에 앵커 광고가 안나오는 모바일에서 어떻게 더 많은 광고 노출을 할 수 있을까 생각하다가 상단바 밑에 광고를 넣어 보기로 했습니다. 결과는 성공적이었고 여기에 하나 더 얻어 걸려서 모바일에서 안나오던 앵커 광고가 다시 앵커 광고가 잘 나오게 되었습니다. 1.  광고 넣을 위치 선정 이미지와 같이 상단바 밑 그리고 글 제목위 사이에 광고를 넣어 봤습니다. 우선 사이에 광고를 넣기 위해서는 'F12' 키를 눌러서 '개발자 모드'에서 해당 코드가 위치한 부분을 찾아야 합니다. (본 글에서는 상단 부분에 광고를 넣고 있습니다. 본 글의 방법을 응용하면 상단바 뿐만아니라 '광고 코.. 2024. 2. 17.
티스토리 모바일에서도 앵커 광고 다시 나오네요! (앵커 광고 안나오면 보세요 2) 이거 보세요~! 와 드디어 ㅠㅠ 모바일에서도 앵커 광고가 작동하기 시작했습니다. 진짜 이것 저것 다 해봤는데 안되다가 상단에 광고를 넣어준 뒤로 웹에서만 나오던 광고가 갑자기 모바일에서도 앵커 광고가 잘 나오기 시작 했습니다. 그냥 포기하고 있었는데 ...ㅎㅎ 와 진짜 앵커 광고 띄울라고 별거 다했는데 상단에 광고를 넣어주니 이렇게 뜨네요...(뭔가 막혀 있던 건가...) 지금도 이게 왜 되는지 모르겠습니다 ㅎㅎ (잘나오면 됐지머...) 상단에 광고 넣는 방법 아래에서 확인 가능합니다. 상단에 광고 넣는 방법 2024. 2. 17.
반응형