블로그스팟 블로그 기본테마 HTML, CSS 기본적인 세팅 7가지






블로거(blogger.com) 설정에서 단순 체크만하면 되는 것들은 제외하고요,,

제 개인적으로 생각하기에, 블로그스팟 블로그 개설 후, "기본테마" 사용시 기본적으로 세팅해야 할 최소한의 HTML, CSS 코드 수정 작업들만 따로 모아봤습니다.

HTML, CSS 문외한이라 일일이 공부할 시간도 없고, 블로그를 추가 개설할 때마다 매번 여기저기 셋팅방법 구글링하는 것도 꽤 귀찮은 일이네요.. ㅡ_ㅡ;;

블로그 꾸미고 각종 세팅하는 노력과 시간을 생각한다면, 차라리 깔끔한 유료테마를 구매하는 것도 좋은 방법일 듯 합니다. :)



<주의> 
1) HTML, CSS 코드 수정하기 전에 반드시 '테마 백업' 할 것

2) 테마 종류에 따라 적용이 안 되는 것도 있음

3) 개인적인 기록차원에서 남기는 포스팅이므로 참고만 하시기 바랍니다.






1. 마우스 드래그 방지


내 게시글을 마우스로 드래그하여 무단으로 복사해 가는 것을 방지하는 기능입니다.
드래그 방지를 무력화 시키는 프로그램도 있지만, 그래도 안 하는 것보다는 낫겠죠.


테마 → 맞춤설정 → 고급 → CSS 추가 → 아래 코드 붙여넣기 → 저장







2. 마우스 우클릭 방지


내 게시글의 이미지를 무단으로 저장하지 못하게 막는 등, 마우스 오른쪽 버튼을 무력화 시키는 기능입니다.


테마 → '▼' 클릭 → HTML 편집 → '</body>' 검색 → </body> 바로 윗줄에 아래 코드 붙여넣기 → 저장






3. 맨 위로가기(TOP) 버튼 설정



게시글의 내용이 긴 경우, 페이지의 맨 아래까지 내려간 뒤 버튼 클릭 한 번으로 맨 위로 페이지를 이동시키는 기능입니다.
2가지 코드의 삽입이 필요합니다.



(1) 테마 → '▼' 클릭 → HTML 편집 → <head> 밑에 아래 코드 붙여넣기 → 저장





(2) 레이아웃 → footer-1 가젯추가 → HTML/자바스크립트 → 제목없이 아래 코드 붙여넣기 → 저장





※ 버튼이 애드센스 하단 앵커광고에 가려지는 문제로, 버튼 위치를 위쪽으로 더 올렸습니다. 보통 버튼에 화살표 이미지 추가하는데 제가 그 방법을 몰라서(찾기 귀찮아서) 'TOP'이라는 글자로 표시했습니다.




4. 이미지폭 최대값 지정


제가 블로그스팟에 처음 글을 게시할 때, 가장 애를 먹었던 사항입니다.
기본 테마의 경우, 이미지 폭이 큰 이미지를 본문에 삽입할 경우, 그 이미지가 본문 영역 밖으로 뚫고 나가는 현상이 발생합니다. 데스크탑이나 모바일에서 공통으로 발생합니다.
영어 검색과 번역기를 이리저리 돌리다가 해외 사이트에서 겨우 조치방법을 알아내었습니다.


테마 → 맞춤설정 → 고급 → CSS 추가 → 아래 코드 붙여넣기 → 저장







5. 메인화면에서 글제목만 나오게 하기



블로그 첫화면에서, 게시글의 내용은 빼고 제목만 나오게 하고 싶을 때 사용합니다.
기본 테마에 따라 적용이 안 되는 것도 있으니 확인이 필요합니다.


테마 → '▼' 클릭 → HTML 편집 →  "<b:include data='post' name='post'/>" 검색 → 삭제 후 아래 코드 붙여넣기 → 저장









6. 피드 버튼 숨기기



테마 → '▼' 클릭 → HTML 편집 → 'feedlink' 검색 →
"<b:include name='feedLinks'/>" 라인 삭제 → 저장





7. 내 페이지뷰 통계 차단 (Only PC)



블로그스팟 로그인 상태에서, 내가 내 블로그를 방문할 때도 방문자 카운팅이 올라가게 됩니다. 정확한 방문자 카운팅을 위해 본인이 방문한 경우는 카운팅을 하지 않도록 하는 기능입니다.
단, 설정을 적용한 브라우져에서 방문한 경우만 적용이 됩니다.
(MS엣지에서 설정한 경우, 크롬으로 방문 시 카운팅 올라감)



통계 → 자체 페이지뷰 추적관리 →

"□ 이 블로그에서 내 페이지뷰를 추적하지 않습니다" 체크 →

마우스 우클릭검사응용프로그램(Application) →

쿠키(Cookies) → https://... (내 블로그주소) 클릭 →

'_ns' 검색 → '세션' 우클릭 → "Expires / Max-Age" 편집

" 2099-01-01T00:00:00.000Z " 입력 → 창 닫기



※ 2099년에 종료되도록 값을 입력했지만, 실제 오늘 날짜 기준으로 약 +1년으로 날짜가 저절로 바뀝니다.
아마도 최대 1년까지만 설정할 수 있는 것 같은데, 확인이 필요합니다.
단, 모바일에서는 적용이 안 되더군요. 따로 방법이 있을 것 같긴한데 아직 찾지는 못했습니다.



※ 본 콘텐츠는 2023년 티스토리 '꿈:틀, 날갯짓'(ikevin.tistory.com) 블로그에 게시되었던 포스트를 이곳으로 이전하면서 새롭게 재구성하여 쓴 글입니다.

최초 게시일 : 2023년 1월 5일



본 콘텐츠의 저작권은 「꿈:틀, 나르샤」에 있습니다. 
아이디어 도용, 무단복제인용합니다.



다음 이전

문의하기 양식