본문 바로가기

DAILY/Blog

[블로그] 페이지 로딩 속도 측정하기 check / 블로그 주소 준비하기. [블로그] 페이지 로딩 속도 측정하기 구글에서 제공하는 측정 사이트 PageSpeed Insights(https://developers.google.com/speed/pagespeed/insights/)에 접속해서 가운데 창에 블로그 주소를 입력 후 "분석"을 클릭한다. 약 10초 정도가 지나면 분석이 완료된다. 모바일 페이지에 대한 측정 결과. 이상하게 느리길래 네트워크가 안 좋아서 그런 줄 알았더니 거의 최하점으로 정말 느렸다. 페이지를 아래로 내리면 뭐 때문에 느린지, 어떻게 개선해야 하는지 방법을 알려준다. 같은 방법으로 "모바일"옆 "데스크톱"을 클릭하면 PC 페이지에 대해서도 측정이 가능하다. 모바일 페이지보다는 빠르지만 여전히 버벅대는 느낌이 있어서 날 .. 더보기
[블로그] 구글 애드워즈로 애드센스 키워드 단가 검색하기 check / 애드센스에 사용 중인 구글 계정 준비하기. [블로그] 구글 애드워즈로 애드센스 키워드 단가 검색하기 구글 애드워즈(https://ads.google.com/)에 접속한 다음 신청란에 사용 중인 구글 계정의 이메일 주소를 적고, 초록 버튼을 클릭한다. 현재 프로모션 중 이므로 해당란이 없으면 그냥 가입하기를 통해 진행하면 된다. "시작하기"버튼을 눌러 다음 설정으로 진행할 수 있다. 기존에 애드센스를 통해 사용 중이던 구글 계정으로 가입하면 별다른 절차 없이 바로 애드워즈로 이어진다. 설정이 영어로 바뀌었는데, 캠페인 종류를 정하지 않고 아래 파란 글씨로 써져있는 "Create an account without a campaign"을 클릭하면 된다. 가입해서 광고를 하는 것이 아닌 키워드 단.. 더보기
[블로그] 애드센스 한국어 광고만 출력 설정하기 check / 애드센스가 삽입되어있는 위치 확인해놓기. [블로그] 애드센스 한국어 광고만 출력 설정하기 기본적으로 애드센스 광고는 사용자가 관심 있어하는 항목에 대한 광고를 출력하기 때문에, 가끔 해외 광고가 출력되는 경우가 있다. 이런 경우 한국어 광고만 출력되게 설정하여 광고에 대한 유입률을 더 높일 수 있다. 우선 관리자 페이지의 "스킨 편집"으로 들어가서 html 편집 페이지로 이동한다. 만약 플러그인을 이용해 애드센스를 적용했다면, 플러그인 창을 열어 아래와 같은 방법으로 수정하면 된다. 애드센스 코드가 삽입된 위치를 찾아서 "data-ad-format"바로 아래에 "data-language="ko""를 추가한 다음 적용하기를 눌러 마무리해주면 된다. 코드의 임의 수정은 제제 대상이나, "dat.. 더보기
[블로그] CPC, CPM 등 광고 수익 개념 정리하기 몇달 새 시간이 늘면서 포스팅을 열심히 하고 있는데, 전부터 관심있었던 블로그를 통한 수익에 대해 공부할 겸 시리즈로 포스팅하려고 한다. 가장 유명한 애드센스부터 기자단까지, 다양한 종류의 수익을 올리는 방법과 효율적인 광고 배치, 저품질 블로그 개선 등 여러 팁에 대하여 정리하고자 한다. 이번 포스팅에서는 블로그에 광고를 올려 수익을 얻는 방법의 개념에 대해 알아보자. [블로그] CPC, CPM 등 광고 수익 개념 정리하기 1) CPC (Cost Per Click) 광고가 클릭될 때 마다 수익이 생기는 방식이다. 주로 해당 광고를 클릭하면 광고주의 웹사이트나 제품 페이지로 이동하며, CPC에 대해 단가가 높은 키워드로 포스팅을 작성해 1회 클릭 당 수익률을 올리는 방법이 있다. 2) CPM (Cost .. 더보기
[블로그] 티스토리 블로그 하단 카피라이트 문구 수정하기 check / 카피라이트에 넣을 문구 만들어 놓기. 티스토리 블로그 하단 카피라이트 문구 수정하기 대부분의 블로그 하단에 보면 카피라이트 저작권 문구가 있는데, 수정하거나 추가할 내용이 있다면 html로 쉽게 변경이 가능하다. 우선 관리자 페이지의 "스킨 편집"을 클릭해 html 편집 페이지로 이동한다. 이 스킨의 경우에는 550번 줄, 다른 스킨도 대부분 가장 하단에 "footer"가 위치해있다. 해당 푸터 속의 내용을 수정해서 카피라이트 문구를 변경할 수 있다. 기존의 카피라이트 내용 가운데 "PUBLISHED BY HIWORL"문구를 추가하고, "HIWORL"을 클릭하면 방명록으로 넘어가도록 변경했다. 푸터 수정이 완료된 모습. 생각보다 간단한 작업이다. tip / "a href"태그 사용 시 링크.. 더보기
[블로그] 티스토리 본문에 "카테고리의 다른 글"목록 지우기 check / 티스토리 블로그관리 페이지 접속하기. 티스토리 본문에 "카테고리의 다른 글"목록 지우기 블로그 레이아웃과 "카테고리의 다른 글"목록이 어울리지 않는 경우 html을 수정하지 않고 간단하게 지울 수 있는 방법이 있다. 우선 블로그의 관리페이지에 접속한 다음, "플러그인"을 클릭한다. 조금 아래로 내려가서 "카테고리 글 더 보기"라는 플러그인을 클릭한다. 여기서 "해제"를 눌러 플러그인을 해제시킨다. 블로그 포스트 본문에서 "카테고리의 다른 글"목록이 사라진 모습. 애드센스의 "일치하는 콘텐츠"목록이 해당 플러그인을 대신할 수 있고, 디자인이 마음에 들지 않아 이렇게 정리했다. tip / 대체할 만한 컨텐츠 적용하기. 더보기
[블로그] 애드센스 부정클릭 방지하기 check / 애드센스에 연결된 구글 계정 알아놓기. 애드센스 부정클릭 방지하기 크롬 브라우저의 좌측 상단 "앱"을 클릭한 후 "웹 스토어"를 클릭한다. 여기서 검색창에 "google publisher toolbar"를 검색한다. 가장 상단에 있는 "Google Publisher Toolbar"를 크롬 브라우저에 추가한다. 설치가 끝나면, 구글 애드센스 옆에 "사용"을 클릭하고 애드센스에 연결된 구글 계정으로 로그인한다. 툴바가 파란색으로 바뀌고 정상 작동이 된다면 자신의 블로그 접속 시 노출되는 광고가 이렇게 초록색으로 표시된다. 클릭 시에는 광고 페이지로 넘어가지 않고 광고에 대한 보고서가 보이며, 클릭으로 인정되지 않기 때문에 부정클릭을 미리 방지할 수 있다. tip / 구글 애널리틱스도 사용해 보기. 더보기
[팁] 구문강조 Syntax Highlighting 간단하게 HTML로 본문에 적용하기 check / 변환 할 구문 준비하기. 구문강조 Syntax Highlighting 간단하게 HTML로 본문에 적용하기 신택스 하이라이트. 구문 강조를 Syntax Highlighting을 통해 HTML 코드로 구현하기 위해변환 기능을 제공중인 Online Syntax Highliting(https://tohtml.com/)에 접속한다. 접속 후 아래 Source code 창에 원하는 구문을 입력 후바로 밑에 Highlight 버튼을 클릭하면 우측에 결과물, 상단에 HTML 코드가 출력된다. 우측의 Style 선택을 통해 다양한 색상으로 하이라이팅 할 수 있다.또한 바로 아래의 Type 선택을 통해 원하는 형식의 언어로 구문 출력이 가능하다.보통 Autodetect나 inet: html을 사용하면 된다... 더보기
[팁] 티스토리 #2 스킨 사이드바 스크롤바 디자인 변경하기 check / 사용하던 스킨 백업 해 놓기. 티스토리 #2 스킨 사이드바 스크롤바 디자인 변경하기 티스토리 #2 스킨 사이드바의 기본 스크롤바.카테고리가 많으면 이렇게 우측에 스크롤바가 생기는데디자인을 살짝 바꿔서 사이드바와 통일성을 높여보았다. 코드 수정을 위해 "블로그 관리" - "HTML / CSS 편집"에 들어간다. HTML에 들어가 600줄 부근 를 찾는다.이 구문의 위와 아래에 코드를 추가해줘야 한다. jQuery(".area_sub").niceScroll({ zindex: 1001, cursorcolor: "orange", cursoropacitymin: 0, cursoropacitymax: 1, cursorwidth: "3px", cursorborder: "2px solid transpar.. 더보기
[팁] 티스토리 #2 스킨 사이드바 애니메이션 삭제하기 check / 사용하던 스킨 백업 해 놓기. 티스토리 #2 스킨 사이드바 애니메이션 삭제하기 티스토리 #2 스킨은 사이드바를 열고 닫을 때좌우로 움직이는 애니메이션 동작이 포함되어 있다. 이렇게 애니메이션이 동작하는데,완벽히 부드럽지 않고, 딜레이가 있는 탓에 깔끔해 보이지 않아이 애니메이션을 제거하는 방법을 찾아봤다. 코드 수정을 위해 "블로그 관리" - "HTML / CSS 편집"에 들어간다. .wrap_skin{position:relative;min-width:884px;min-height:100%; padding-left:23%;transition:padding-left ease-in-out 0.2s} 우선 CSS에 들어가 39줄 부근의 transition 구문을 삭제해야 한다. .wrap_ski.. 더보기