오늘의 주제: WEBP(웹피) 여행블로그나 맛집블로그는 공통된 특징이 있습니다. 사진이 많다는 것이죠. 포스팅에 사진이 많으면 정보가 풍성해지지만, 치명적 단점이 있습니다. 로딩이 느려진다는 점입니다. 이런 현상을 막기 위해서는 사진용량을 줄여야 하는데요. 이런 문제를 조금이나마 해결하기 위해서 WEBP(웹피)가 탄생했습니다. WEBP(웹피)가 생소한 분들도 계실텐데요. 오늘 포스팅을 보시면, 왜 블로그 사진을 WEBP(웹피)로 올려야 하는지 알게 됩니다. WEBP(웹피)의 탄생과 장점 사진(이미지) 포맷하면 어떻것이 있을까요? 일반적으로 JPG, PNG, GIF가 언급됩니다. 사진 1~2장쯤이야 문제가 되지 않지만, 사진 위주로 올리는 포스팅은 10장 이상이 기본이죠. 더군다나 요즘은 초고해상도로 사진..
HTML태그 중에 B태그가 있습니다. 글씨를 굵게 표현하는 태그로 한글문서에서는 Ctrl + B 로 효과는 냅니다. 티스토리 불로그는 이 B태그를 활용하여 특정 문구를 강조하는 형광펜 효과를 낼 수 있습니다. CSS에 다음의 코드를 추가해주세요. .tt_article_useless_p_margin > p > b { padding: 1px 3px; border-radius: 5px; font-weight: bold; color: rgba(0, 0, 0, 0.8); background-color: rgba(255, 228, 0, 0.7); } .tt_article_useless_p_margin > p > b 글을 작성하면 티스토리 치환자가 .tt_article_useless_p_margin클래스를 생성하여 ..
블로그의 방문자수가 급감했습니다. 평소 검색이 잘 되던 포스팅이 네이버에서 검색이 안되더군요. 그래서 일 평균 2000명 전후였던 방문자 수가 500명도 안되어 버렸습니다. 9월 9일에는 271명이 방문하는 엄청난 기록을 거뒀네요. 물론 질 좋은 컨텐츠가 많은건 아닙니다. 그러나 취업으로 몇 개월간 운영을 안했을때도 이렇게 방문자 수가 떨어진 적은 없었기에, 소위 '저품질'에 걸린건 아닌가 살짝 불안하더군요. 블로그 방문자가 급감하면서 애드센스에 큰 타격을 입었는데요. 소소하긴 하지만 한달에 100달러 이상 벌어왔으나, 방문자 급감으로 이틀동안에 1달러도 벌지 못했습니다. 구글 애널리틱스를 달아놨지만, 정확한 원인은 찾지 못했습니다. 잘 사용하지도 못하고 느려서 분석하기 힘들더군요. 더 이상 불안해할 수..
티스토리 블로그를 시작한뒤로 스킨만 벌써 5번째 바꿨네요. 처음에 티스토리 기본스킨으로 사용하다가 다른 분들이 만든 2단스킨을 사용했었고. 반응형스킨은 벌써 3번째입니다. 여러 반응형스킨을 살펴봤지만 지금 사용하고 있는 Raphael 1.2 스킨은 상당히 마음에 듭니다. Wallel님이 만드신 스킨인데 http://wallel.com/166 포스팅으로 가시면 지금도 무료다운이 가능하네요. 진짜 스킨 만드시는 분들 대단합니다. 그런데 한가지 소소한 문제가 발생했습니다. 제가 위드블로그나 다른 리뷰 사이트에 열심히 도전해서 종종 제품리뷰를 하곤 하는데, 아시다시피 '지원을 받고 리뷰했다'는 배너들 달아야 합니다. 그런데 이 배너가 정사이즈로 나오는게 아니라 가로사이즈가 본문 100% 사이즈로 출력이 됩니다...
네이버 애널리틱스로 분석해 본 내 블로그 방문현황 네이버의 사이트 분석기 '네이버 애널리틱스'입니다. 티스토리 블로그에 설치한지 2달이 다 되어가는데요. 복잡한 분석기 메뉴중에서 유용하게 사용할수 있는 메뉴 몇가지를 이야기 할까 합니다. 네이버 애널리틱스에 접속하면 보여지는 첫페이지입니다. 사이트 현황을 가볍게 요약한 페이지인데요. 1일, 7일, 30일, 기간설정등으로 요약할 수 있습니다. 방문자수는 티스토리에서 집계하는 수에 40%정도 집계되더군요. 설치를 잘못한것 같지 않은데.... 아무튼 시간대별 방문분포를 보니 3월1일에는 퇴근 이후에 방문자가 많았다는 것을 볼 수 있습니다. 이것도 첫페이지에서 볼 수 있는 요약자료입니다. 유입검색에어 '온프리'가 올라가 있네요. 최근 이슈가 되질 않았는데, 조금..
티스토리 블로그 고정형 플로팅배너 예쁘게 수정하기 지난번에 왼쪽옆으로 고정형 플로팅배너를 달아봤습니다. 그런데 약간 수정하고 싶다는 충동이 강하게 일어나서, 변화를 주기로 했습니다. (먼저 플로팅배너와 관련된 이전포스팅부터 확인하면 좋겠죠.^^) [관련글 링크] - 티스토리 고정형 플로팅배너 사이드바 손가락달기 수정전과 수정후를 비교해서 말씀드리면 우선 모서리부분을 동그랗게 처리했고, click 이미지를 테두리 밖으로 꺼내놨습니다. 테두리 및 이미지 수정하기 1. 모서리를 동그랗게 하려면 table style에서 border-radius 를 추가하면 됩니다. px로 입력하는데, 수치가 커질 수록 동그란 각(?)도 커지겠죠. 2. 다음은 click 이미지를 테두리 밖으로 꺼낼텐데요. table/tr/td ..
티스토리 블로그에 네이버 애널리틱스 설치 네이버도 분석기가 있다는 사실을 얼마전에 알게 되었는데요. 현재 구글분석기를 사용하고 있지만 조금 아쉬운감이 있어서 네이버도 같이 사용해보려 합니다. 재미있는 사실은 네이버에서 만든 분석기이지만, 네이버 블로그는 사용할 수 없다는 사실이죠!! 티스토리같은 설치형 블로그나 홈페이지에서사용할 수 있는데요. 일단 오늘은 네이버 애널리틱스를 설치하는 방법을 나눠볼까요. 분석기(애널리틱스)의 사용용도는 방문자, 유입루트, 인기페이지 분석에 도움을 주는 프로그램이죠. 네이버 애널리틱스를 사용하기 위해서는 해당사이트(analytics.naver.com)로 방문한 뒤 세팅을 해야 하는데요. 따로 가입할 필요없이 네이버 아이디만 있으면 가능합니다. 일단 사이트에 방문했다면 [바로..
티스토리 고정형 플로팅배너 사이드바 손가락달기 드디어 구경만하던 플로팅배너를 달았습니다. 고정형 플로팅배너라고 하던데 정확한 명칭은 모르겠습니다. 그럼 여러번의 수정을 거쳐 완성한(?) 플로팅배너 만들기 시작하겠습니다.ㅎㅎ 1. 우선 현재 스킨을 저장하세요. 스킨을 잘못 만졌다가 블로그 날린 느낌 아시는 분들은 꼭 저장하고 진행하시기 바랍니다. 2. 첨부한 압출파일을 풀고 'HTML/CSS-파일업로드' 들어간뒤 파일을 업로드해주세요. 압축파일은 Hanon/out, Viewon/off, Click 이렇게 5개 파일이 있습니다. (click.jpg 파일은 직접 만들어봤습니다.ㅎㅎ) 3. 'Html/CSS-skin.html'에서 'article_rep_desc'를 찾으세요. Ctrl+F로 찾으면 빠르게 찾을 ..
'유투브 동영상 다운로드'로 글을 썼다면 애드센스 정책위반입니다. 오늘 퇴근전까지만 해도 잘 나타났단 애드센스가 저녁에 갑자기 안나타나기 시작했습니다. 지메일을 확인해보니 애드센스에서 정책위반이라는 명목으로 광고를 중단시켰다는 메일이 도착해 있었습니다. 며칠동안 사무실 이사 및 여러 일들로 인해 이메일을 확인못한것이 화근이었죠. 메세지를 클릭해보니 위반내용이 나와있었는데, 제가 올린 포스팅중에서는 유투브와 크롬에 관련된 글이 당첨되었습니다. 약 한달전에 '크롬 유투브 동영상 다운로드 받기'라는 제목으로 올린 글이 정책위반이었던 것입니다. 조금 당황하기도 했지만, 애드센스 사용자에게는 한번씩 발생하는 일인 만큼 덤덤하게 반응하기로 했습니다. 바로~~ 삭제!!!! 눈물을 머금고(?) 페이지 삭제를 한 뒤, ..
티스토리에 이전글 링크 삽입하기(플러그인 사용) 티스토리 블로그에 글을 작성한 이후 이전에 작성한 글을 삽입하는 방법을 알아보겠습니다. 아마도 넣고 싶은 글들을 직접 찾아내서 제목과 URL을 작성하신 분들이 많으실텐데요. 플러그인을 사용하면 아주 편하게 이전글을 삽입할수 있습니다. 1. 우선 '관리자페이지-플러그인 설정'에 들어갑니다. 그러면 우측에 많은 플러그인을 확인할 수 있는데, '이전 글 링크 삽입'이 활성화되어 있는지 확인합니다. 활성화가 되어있다면 삽입형태와 출력개수를 설정하시고 저장을 합니다. 2. 글을 작성한 후 우측 플러그인을 클릭합니다. 그러면 사용할 수 있는 플러그인이 나오는데, '이전 글 넣기'를 클릭합니다. 3. '플러그인-이전 글 넣기'를 클릭하면 새로운 창이 열리면서 이전에 작..
블로그 초보자를 위한 매력적인 포스트제목 작성법 10가지 동일한 내용의 포스팅이라도 제목을 어떻게 정하느냐에 따라 사람들의 관심도가 달라지기 마련이죠. '블로그마케팅 실전 매뉴얼 중급편'이란 책에 보면 매력있는 포스트 제목을 작성법에 대해 설명한 부분이 있는데요. 10가지의 제목작성법을 따라해보면서 포스팅 감을 익혀봅시다.^^ 1. 호기심을 유발하는 제목을 작성하라. 가장 기본적인 구성으로 '뭘까?'라는 호기심을 갖게 하는 제목입니다. (예) 교도소 약국에서 가장 불티나게 팔리는 것은? / 전쟁이 난다면 가장 먼저 챙겨야 할 것은? 2. 이슈성 키워드를 사용하지만 약간은 다른 시각을 제시하는 제목을 사용하라. 많은 사람들이 공통적으로 인식하고 있는 콘텐츠를 작성할 때 사용하는데, 다른 관점을 제시하여 관..
[티스토리 꾸미기] 티스토리 사이드바 태그목록을 3D로 꾸미기 티스토리 사이드바를 보면 태그목록이 있습니다. 평소엔 잘 사용하진 않지만 없애자니 언젠간 도움될것 같고, 그대로 놔두자니 자꾸 신경쓰이고... 이런분들 많으실텐데요. 이왕 놔두기로 하셨다면 태그목록을 좀 더 예쁘게 꾸며보는건 어떨까요? 1.swfobject.js파일과 tagcloud.swf파일 다운받기 아래 압축파일을 받아 압축을 풀면 2개파일이 나옵니다. 이상한 파일은 아니니 안심하고 받으셔도 됩니다. 2.swfobject.js파일과 tagcloud.swf파일 업로드하기 [관리자-HTML/CSS편집]으로 들어간 후 파일업로드창에서 2개파일을 모두 업로드 합니다. 3. HTML/CSS에서 skin.html을 수정합니다. 'ctrl+F'를 눌러..
쓰고 싶은 포스팅을 막 올렸더니 이제 슬슬 카테고리를 점검할 때가 왔습니다. 그래서 주로 올리는 카테고리를 정리하려고 세부카테고리를 설정했더니 '+'버튼이 생기면서 카테고리가 닫혀져있습니다. 별로 마음에 들지 않네요. 그래서!!!!이 카테고리를 항상 펼쳐져 있도록 간단한 코드를 추가하도록 하겠습니다. 티스토리 블로그 카테고리 펼치기 1. '관리자메뉴 - HTML/CSS편집'에 들어가서 를 찾습니다.찾을때 ctrl + F 를 이용해서 찾으시면 편리하다는거 아시죠. 2. [category]와 사이에 다음의 코드를 삽입하고 저장을 누릅니다. 3. 블로그로 돌아와서 카테고리를 확인하시면 자동으로 펼져져 있음을 확인할 수 있습니다.
▩티스토리 사이드바 '최근에 올라온 글' 길이 조절하기 포스팅을 하다보니 사이드바에 있는 '최근 올라온 글'이 조금 부자연스럽습니다. 뭔가 표현되어야 할 부분이 덜 된 느낌이랄까... 그래서 이번엔 사이드바에 있는 '최근에 올라온 글' 길이를 조절하겠습니다. 엄청 쉽습니다. 1. '관리-화면설정'에 들어가서 '화면출력' 탭으로 이동합니다. 2. 하단에 사이드바 메뉴가 있고, '최근 글'부분에 20글자를 30글자로 바꿔줍니다. 3. 그럼 사이드바에서 '최근에 올라온 글' 길이가 늘어납니다. 글자 수를 조절하시면서 자신의 블로그에 맞는 사이즈를 찾아주세요.^^
▩ 티스토리 프로필 사진 사이즈 조절하기 블로그의 얼굴이자 글쓴이의 신뢰성을 주는 프로필사진! 처음 티스토리 프로필 사진을 올릴때 가로세로 비율이 깨져서 올라가죠. 이렇게요!!!! 요런 프로필 사진의 크기를 조절하는 방법을 알아보겠습니다. 그전에 먼저 프로필 사진을 올리는 방법부터 알아야겠죠. 1. 관리자모드-기본정보에 들어가서 블로그정보 탭을 보면 필명수식어 아래에 이미지 업로드하는 곳이 있습니다. 여기서 프로필 사진을 올립니다. 2. 관리자모드-HTML/CSS 편집창으로 들어가서 Ctrl+F를 눌러 blogimage를 찾습니다. 주의할 점은 style.css에 있는 blogimage를 찾아야 한다는 점입니다. blogimage를 찾으시면 오른쪽에 width(넓이)와 height(높이)가 있는데 hei..
티스토리 블로그 나눔고딕 폰트 바꾸기 티스토리에는 요즘 대세인 나눔고딕 폰트가 없죠. 나눔고딕을 사용하시려면 폰트를 등록(?)하신 후 소스를 몇가지 수정하시면 됩니다. 처음 폰트를 바꾸시는 분이라면 하다가 꼬여버릴수도 있습니다. 이런 불상사를 방지하기 위해 먼저 스킨저장을 해 놓으시기 바랍니다. (일명 백업이라고 하죠^^) 그리고 업로드할 폰트가 필요합니다. 저는 나눔고딕폰트를 사용하는데, 주의할 점은 폰트의 확장자가 eot만 가능하다는 점입니다. 윈도우 폰트를 그대로 사용하시면 아무리 해도 안됩니다.(제가 그랬거든요..ㅠㅠ) 자! 준비가 끝났으면 폰트바꾸기를 시작해 볼까요!!! 1. 블로그 관리메뉴에 있는 HTML/CSS편집에 들어가시면 우측에 HTML/CSS탭과 파일업로드 탭이 있습니다. 이중 파일업..
▩티스토리 이미지 테두리 없애는 방법 티스토리에 이미지 올리시면 약간 부자연스러운것 확인할 수 있는데요. 처음 이미지를 올리시면 모든 이미지에 테두리가 생깁니다. 이것처럼 회색 테두리가 말이죠.^^ 내가 원하지도 않았는데 나오다니... 지금부터 테두리 없애는 방법을 알아봅니다. 1. 티스토리의 관리페이지에 있는 HTML/CSS편집으도 들어갑니다. 2. 오른쪽 하단에 있는 style.css 입력폼에서 imageblock을 찾습니다. 찾기 힘드신 분들은 Ctrl+F(찾기)를 누르시고 imageblock을 입력하시면 쉽게 찾을 수 있습니다. 3. imageblock 오른쪽에 보면 border:1px; 이라고 되어 있는데, 이부분을 border:0px;로 수정하면 됩니다. 3단계만에 이미지테두리를 없앴습니다. ..
| 내 블로그 - 관리자 홈 전환 |
Q
Q
|
|---|---|
| 새 글 쓰기 |
W
W
|
| 글 수정 (권한 있는 경우) |
E
E
|
|---|---|
| 댓글 영역으로 이동 |
C
C
|
| 이 페이지의 URL 복사 |
S
S
|
|---|---|
| 맨 위로 이동 |
T
T
|
| 티스토리 홈 이동 |
H
H
|
| 단축키 안내 |
Shift + /
⇧ + /
|
* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.