티스토리 스킨 변경 전과 후에 해야할 일, 티스토리 블로그 3단 스킨으로 바꾸다~ :: 2proo Life Story ::

티스토리 스킨 변경 전과 후에 해야할 일, 티스토리 블로그 3단 스킨으로 바꾸다~

2009.11.11 18:37
티스토리 스킨 변경 전과 후에 해야할 일, 티스토리 블로그 3단 스킨으로 바꾸다~

 꼬박 하루 정도 열심히 노가다를 한 끝에 티스토리 블로그 스킨 변경을 완료 했습니다. ^^
기존 Life in Mono 2단 스킨에서 가볼래 닷컴의 Mr. DJ 님이 배포하신 Let's Dream 이라는 3단 스킨으로 변경했습니다.

스킨 변경 작업을 시작하기전에 큰맘 먹고 시작했습니다. 이게 정말 보통 일이 아니라서 결단을 쉽게 못내렸지요.
고민끝에 스킨 변경하자!!! 용의자님 스킨 이벤트는... 저로서는 꿈도 못꾸고.. 포기했고 어떤게 좋을까 하고 무지 찾아헤메다 가볼래 닷컴의 배포 스킨을 찾았습니다.

blog skin, blog tip, It, retweet, RSS, RSS Feed, Search Engine Optimizer, seo, SEO 수치, SEO 최적화, tistory, Twitter retweet, 검색용 애드센스, 메타사이트 추천버튼, 메타태그, 블로그, 스킨 변경, 스킨 수정, 스킨변경, 스킨변경 작업, 스킨저장, 이미지 리사이즈, 이미지 리사이징, 이미지 자동리사이징, 인터넷, 추천버튼, 추천버튼 정렬, 카테고리 더보기 플러그인, 티스토리, 티스토리 3단 스킨, 티스토리 스킨, 티스토리 스킨수정

2proo.net 티스토리 스킨 변경 작업


스킨을 변경하기전에 나름대로 준비를 잘 했다고 생각했는데도 막상 변경하고나니 할일이 더욱 많았습니다.


티스토리 스킨 변경전에 할 일

스킨 변경전에 챙겨야 할 것들이 있습니다.
이것은 Kay~ 님의 "티스토리 스킨" 생각없이 변경하면 개고생한다. 포스트를 참고하시길 바랍니다.


그리고 참고로 어드민 메뉴의 스킨저장 메뉴를 잘 활용하시길 바랍니다.
어드민 ㅡ> 스킨 ㅡ> 스킨선택 ㅡ> 스킨저장 메뉴를 잘 쓰면 안심하고 스킨 변경 작업을 진행 할 수 있습니다.
blog skin, blog tip, It, retweet, RSS, RSS Feed, Search Engine Optimizer, seo, SEO 수치, SEO 최적화, tistory, Twitter retweet, 검색용 애드센스, 메타사이트 추천버튼, 메타태그, 블로그, 스킨 변경, 스킨 수정, 스킨변경, 스킨변경 작업, 스킨저장, 이미지 리사이즈, 이미지 리사이징, 이미지 자동리사이징, 인터넷, 추천버튼, 추천버튼 정렬, 카테고리 더보기 플러그인, 티스토리, 티스토리 3단 스킨, 티스토리 스킨, 티스토리 스킨수정

혹시 모르니까 스킨도 다운받아놓고, HTML 소스와 CSS 소스, 그리고 사이드바 소스 등을 미리 받아놓습니다.
저는 티스토리 이미지 업로드에 이메일 네임태그와 다음을 비롯한 메일 서명 이미지도 올려놓고 썻는데.......
이건 미처 생각못하고 다운을 못받아놔서 하드 찾아 삼만리... ㅠ_ㅠ

스킨 변경전의 준비작업은 Kay~ 님의 포스트를 참조하시길 바랍니다.


2proo.net 스킨 변경후 추가된 작업

1. 각종 메타태그 다시 삽입
Google, Yahoo, MSN Bing 검색엔진용 메타태그를 찾아서 다시 삽입시켜줍니다.
작업전에 미리 html 소스를 미리 챙겨놓으면 일일이 작업 안해도 되겠지요.
메타태그는 검색엔진과 웹툴즈를 사용할때 인증키 비슷한 역활을 하니 head 태그 사이에 넣어주도록 합니다.
그리고 메타태그는 SEO 에도 영향을 미치니 꼭 써두는게 좋습니다.
스킨 변경후 메타태그 삽입

2proo.net meta tag



2. 카테고리 더보기 플러그인 위치 수정
카테고리 더보기 플러그인은 무조건 본문 바로 아래에 나오도록 되어있습니다.
이 플러그인의 소스와 수정 방법은 Miss Flash 님의 http://blog.missflash.com/543 글을 참조하세요.
blog skin, blog tip, It, retweet, RSS, RSS Feed, Search Engine Optimizer, seo, SEO 수치, SEO 최적화, tistory, Twitter retweet, 검색용 애드센스, 메타사이트 추천버튼, 메타태그, 블로그, 스킨 변경, 스킨 수정, 스킨변경, 스킨변경 작업, 스킨저장, 이미지 리사이즈, 이미지 리사이징, 이미지 자동리사이징, 인터넷, 추천버튼, 추천버튼 정렬, 카테고리 더보기 플러그인, 티스토리, 티스토리 3단 스킨, 티스토리 스킨, 티스토리 스킨수정

카테고리 더보기 플러그인 위치 수정



3. 다음 뷰 추천버튼과 믹시 추천버튼 정렬하기
이것 역시 Miss Flash 님http://blog.missflash.com/543 글을 참조하세요.
소스와 함께 설정하는 방법을 알기 쉽게 설명해놓으셧습니다.
추천 버튼 정렬하기
Style.css 에 다음 소스를 추가하는데 저의 경우는 두번째 다음 뷰 버튼 왼쪽 & 오른쪽으로 여유를 10px 주었습니다.

/* 추천버튼 일렬로 정렬 */
.MF_Left_Float {float:left; margin-bottom:5px; }
.MF_Right_Float {float:left; margin-bottom:5px; margin-left:10px; margin-right:10px;}


4. 맥 스타일 매타사이트 추천 버튼, RSS 피드 아이콘 추가
예전에는 다음 뷰, 믹시, 트위터, 구글 FEED 아이콘 4개만 있었는데 이번 스킨 변경작업을 하면서 아래와 같이 바꿨습니다.
메타사이트 추천버튼, 피드 아이콘 추가

이 아이콘들은 Krang 님http://krang.tistory.com/415 포스트를 참조하세요 ^^
Krang 님의 또다른 예쁜 아이콘도 있습니다.
아래와 같은 아이폰 스타일의 매타사이트 아이콘은 http://krang.tistory.com/378 글을 참조하세요.
음... 이제보니 아이폰 스타일 아이콘도 이쁘네;;; 바꿀까;;;
blog skin, blog tip, It, retweet, RSS, RSS Feed, Search Engine Optimizer, seo, SEO 수치, SEO 최적화, tistory, Twitter retweet, 검색용 애드센스, 메타사이트 추천버튼, 메타태그, 블로그, 스킨 변경, 스킨 수정, 스킨변경, 스킨변경 작업, 스킨저장, 이미지 리사이즈, 이미지 리사이징, 이미지 자동리사이징, 인터넷, 추천버튼, 추천버튼 정렬, 카테고리 더보기 플러그인, 티스토리, 티스토리 3단 스킨, 티스토리 스킨, 티스토리 스킨수정

메타사이트 추천버튼, 피드 아이콘 추가



5. ReTweet 버튼 추가
이번 블로그 스킨 변경으로 새로이 추가된 리트윗 버튼입니다.
이 버튼을 누르면 해당 포스트 내용과 제목, 해당 URL 을 포함해서 트위터로 전송합니다. 일명 리트윗 기능...
티스토리 연동 리트윗 버튼은 http://rasso.co.kr/207 글을 참조하세요 ^^ 소스와 함께 설치 방법이 설명되어 있습니다.
retweet 버튼 추가

6. 이미지 자동 리사이징 자바스크립트 삽입
기존 770 스킨에서는 큰 사이즈의 사진도 마음대로 올렸으나 현재는 710으로 변경되었습니다.
그래서 기존의 큰 이미지들은 이 스킨에서는 오른쪽이 다 잘려나옵니다.
하지만 이 자바스크립트를 삽입하게되면 자동으로 리사이즈 시켜서 온전한 상태로 보여주게 됩니다.
이미지 자동 리사이징 자바스크립트

큰 이미지를 리사이즈하여 잘려보이지 않게...

이것때문에 고민을 많이 하고 어떻게 하나... 걱정이었는데 다행히 능력자 분이 계셔서 쉽게 처리했습니다.

티스토리 스킨변경후 사진크기 맞추기

자바스크립트 파일을 이미지폴더에 업로드하고 아래처럼 한줄만 HTML 소스에 추가하면 간단합니다.
이니지 크기 변경 자바스크립트 소스
iQuery 를 이용하여 스킨 크기와 이미지 크기를 계산하고 소스 삽입하는 방법도 있는데 이 방법이 훨씬 간편하더군요.


7. 검색용 애드센스 출력창 변경
기존의 스킨에서는 Location 영역에 구글 검색이 출력되도록 하였으나
이번 스킨 리뉴얼 후에는 Search 영역으로 변경하였습니다.
Google Search 출력창
윤초딩님의 검색용 애드센스 사용방법 - 구글 애드센스 방법을 보시면 쉽게 설치하실 수 있습니다.


8. 통계 집계 태그 및 부정클릭 방지 태그 삽입
이 블로그는 Quantcast, 구글 Analytics, 다음 웹인사이드 등의 방문자 통계 툴을 사용하고 있습니다.
이런 소스들은 HTML 소스의 가장 맨 마지막에 넣어둡니다.
그리고 구글 애드센스 부정클릭 방지용 소스도 가장 마지막에 넣어둡니다.


9. SEO 최적화 수치
http://domaintools.com 에서 조회해보는 SEO Score가 80% 를 기록했습니다. (SEO = Search Engine Optimizer)
SEO Scrore 측정하기

SEO Scrore 80%

기존 스킨에서 78% 정도를 기록했는데 이번에 스킨 바꾸고 조금 더 신경 썻더니 80% 를 기록했습니다.
저도 이제는 80% 대에서 놀아야겠습니다. ^^;;



스킨을 바꾸고 나서...

이상... 스킨 변경 후 작업들에 대해서 대충 열거해봤습니다.
열거해보니 별거 없지만 px 을 1 씩 변경하면서 미리보기, 저장, 수정 이걸 엄청나게 반복했습니다..ㅠ_ㅠ
사이드바에도 손을 좀 댓는데 아직 맘에 들지는 않네요.
무엇보다 스킨 본문 기본 사이즈가 560px 이라 여기저기 무지 손봤습니다. 좀만 계산이 어긋나면 스킨이 망가져요...

현재 익스플로러 7, 파이어폭스 3, 구글 크롬에서 테스트해봤는데 틀은 잘 잡혀서 나오네요.
다만 글꼴이 나눔고딕이 기본이다보니 폰트가 잘 안맞는거 같기도 하고..
나눔고딕이 없는 컴퓨터에서 보면 굴림체로 나오게 되어있습니다. 나눔고딕이 있는 브라우저에서는 잘 보입니다~

그리고 스킨 수정하다보니 드디어 방문자수 500만을 돌파했네요. ^^;;

blog skin, blog tip, It, retweet, RSS, RSS Feed, Search Engine Optimizer, seo, SEO 수치, SEO 최적화, tistory, Twitter retweet, 검색용 애드센스, 메타사이트 추천버튼, 메타태그, 블로그, 스킨 변경, 스킨 수정, 스킨변경, 스킨변경 작업, 스킨저장, 이미지 리사이즈, 이미지 리사이징, 이미지 자동리사이징, 인터넷, 추천버튼, 추천버튼 정렬, 카테고리 더보기 플러그인, 티스토리, 티스토리 3단 스킨, 티스토리 스킨, 티스토리 스킨수정

2proo.net 방문자수 5백만명 돌파


이벤트를 할까 말까 하다가 아직 동시나눔 이벤트에 대한 공지가 없는 터라 기다려보겠습니다.

정말 스킨 변경 작업은.... 사람이 할 일이 아닌것 같습니다. 꼬박 하루를 이것때문에 하얗게 불태웠습니다...
신고
한RSS추가버튼 Google RSS Feedburner

BLOG Story , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,



  1. 이전 댓글 더보기
  2. 와~ 좀더 깔끔해진 느낌입니다. ^^ 고생하셨어요! ㅎㅎ

  3. 허걱 정말로요? 이얍. 감사합니다~ ^^

  4. 500만 돌파라니, 대단하십니다~*ㅋㅋㅋㅋ 티스토리 스킨 한번 바꾸는 거 정말 엄청 까탈스러운데, 이렇게 2Proo님처럼 세심하게 건들려면 진짜 무지무지 고생하지 않을까요? 더구나 저는 컴맹.ㅋㅋㅋㅋ

  5. 허걱.. 세심하다뇨~ 부끄럽습니다~ ㅋㅋㅋ
    ㅎㅎㅎ 감사합니다. 참 러브캔디 잘 먹을께요~ ^^

  6. 깔끔하고 좋습니다^^ 한번 바꿔보고 싶네요~

  7. 허걱... 바꾸지 마세요~
    PAXX님 블로그 스킨은 안바꾸셔도 될만큼 충분히 이쁘고 좋습니다!!

  8. 하루를 꼬박 투자할만 하셨내요. 완전 멋진걸요~
    전 감히 건들지를 못하겠습니다..ㅎㅎ

  9. 김군님도 안건드리셔도 되요!!!
    이미 충분히 깔끔하고 정리정돈 잘되어있으시면서 ㅠㅠ

  10. 수고하셨습니다. 그래도 리모델링 집이 마음에 드시죠?
    대단하십니다. 하루 방문객이 하루 몇천명이 느시는군요. 와우!

    방문자수 500만 돌파 축하드려요! ^^

  11. 우와 감사합니다 ^^;;
    근데..... 리모델링 해도 또 만족을 못하고
    이거저거 계속 손대고 있어요 ^^;;
    집착하지 말아야하는데..... ㅠ0ㅠ

  12. 너무 멋지네요..사랑하트가 확연히..그리고 클릭박스가 눈에 쏙 들어옵니다.
    넓은 공간이라..시원한 느낌에..컨텐츠는 많아 보이네요..
    지난달 모자란 실력으로 이틀간 고생했는데..오히려 수익이 다운..에구구..
    잊고 살려구요..

  13. 어라........... 저도 현재 몇일 두고본 결과...
    마찬가지네요..;;;; ㅠ_-
    근데 함차님도 스킨 작업하셧나봐요?
    전보다 더 깔끔해졌는데요?

  14. 훔훔 훨 깨끗하네요^^ 아울러 방문자수 500만명 돌파 축하 드리옵니다^^

  15. 아이고 감사합니다 ^^;;;;
    이놈의 스킨이 정말.. 속을 썩이는군요 ㅠㅠ

  16. 대단하다!! 'ㅂ')!!!

    저도 이거 보고 배워서 계속 업그레이드 할래요 히히 ㅋㅋ

    그리고 제 말투 그만 따라해요~~~~@0@

  17. 호련님 대단하다!! 'ㅂ')!!!

    호련님 다음에 스킨 변경할때 준비 많이 하시고 체인지~!! 히히 ㅋㅋ

    그리고 말투.. 그만 따라할까요? @ㅇ@

  18. 푸하하하 ㅋㅋㅋㅋ 재밋어요 ㅋㅋㅋㅋ
    뭐 따라하셔도 되요 ㅋㅋ
    쏠쏠한 재미 (키키)

  19. ㅎㅎㅎㅎ 사실 짜증내실만도 한데 웃어주시니 감사합니다 ^^;;
    호련님 말투가 귀여워서;;; 저도 모르게 따라하나봐요 ㅎㅎㅎ;;

  20. 호곡!!

    일부러 그러는게 아니라..ㅠㅠ 2proo님 스스로도 모르게 따라하는거면...좀 문제가 ㅋㅋㅋㅋㅋㅋㅋㅋ

    옮으면 큰일나요 ㅋㅋㅋㅋ ^ㅠ^

  21. 과연. . . 엄청나군요.
    저는 그래서 스킨을 변경 안하고 있습니다. ㅋㅋ;

  22. ㅎ ㅏㅇ ㅏ.. 스킨 바꾸는건 현재도 계속 손대고 있어요 ㅠㅠ;;
    저도 다음부턴 진짜 진짜 고민을 열심히 하고 바꿔야겠어요 ^^;;

  23. 대 공사를 하셨군요
    정말 큰 맘먹지 않고는 못하는 작업인데..

    저도 스킨 바꾸고 싶은데 당췌 용기가 나지 않습니다..^^
    일단 저장 부터 하고 시간 한번 마련해야 겠습니다

  24. 앗.. 저도 피아노님과 같은 스킨이였답니다 ^^;;
    그 스킨도 나름 깔끔하고 좋았는데...

    다음번 스킨 변경하실땐 꼬옥 저장하시고 진행을~ ^^;;

  25. 이거 상당히 유용한 정보들인데요?ㅋㅋ
    저도 얼마전에 스킨을 바꿨는데 그냥 왼쪽메뉴를 오른쪽으로 이동하는 수준^^;
    3단구성이 내용은 참 풍성하고 넉넉해 보이더라고요.

  26. 저도 3단 구성이 급 좋아져서 바꿔봤는데..
    이거 골치네요 ㅎㅎㅎ;;
    익스6에서는 제대로 안보이는 단점이 있더라구요.
    그래도 또 바꾸자니 완전.. ㅎㄷㄷ;;

  27. 오오 스킨을 바꾸셨군요!! 멋진데요.
    살짝 신문(?)같은 느낌도 나고요.

    (옆에 레이싱걸 말입니다. '혹시 훈남이 나오지 않을까?'해서 F5를 눌러보았습니다.
    ....불공평해요 이건. 안놀아줄꺼라구요. ㅠㅠ)

  28. ㅎㅎㅎㅎ 에프5 누르셔도 안나올꺼에요~
    레이싱걸이 두명이더라구요.
    그럼 위젯 회사측에 훈남 넣어달라고 건의해보세요!!!
    그래도 전 레이싱걸 위젯을 달아둘꺼에요~ ㅋㅋ

  29. 정말 할게 많은 행사?입니다.
    하지만 변화가 필요할 때 과감하게 하는거죠.하하

  30. ㅎ ㅏㅇ ㅏ.. 과감하게 하려고해도.. ㅠ_- 너무 고달펐어요.
    지금도 계속 만지작 만지작 하고 있는걸요 ^^;;
    정말이지 스킨 바꾸는건 사람이 할 짓이 아닌듯 싶어요 ㅎㅎ

  31. 저도 스킨변경 하려하는데 광고도 다시 잘 안뜨고 ㅜㅜ 너무 힘들어서 저장했던 스킨으로 다시 돌아왔어여 ㅜㅜ

  32. 허걱.. 어느 부분이 막히는거에요?;;;
    제가 도울 수 있는거라면 도와드리도록 할께요 ^^;;
    가볼래님께도 도움을 요청~!!!
    스킨변경 참.. 고달프죠 ㅠㅠ

  33. 스킨 바꾸시느라고 고생하셨겠네요
    참고 할 만한 정보 잘 보고 갑니다 ^^

  34. 스킨 변경하다가 미리 저장안하고 하는 바람에 날렸어요 -.-

    자체 스킨저장기능이 있다는 사실도 몰라서,
    메모장에 스킨소스를 저장 하지않았고,
    다행히 예전에 카페경험이 있어서 카페게시판과 티스토리 게시판에 비공개로 소스를 저장하였는데,
    막상 다시 복사하여 붙여낳기 하니 티스토리에서 붙여넣기 한건 메인이 완전 엉망이 되고요,
    카페에서 복사해서 붙여넣기 한것은 댓글 쓰기가 안되요.

    그래서
    블로그를 하나 더 만들어서 그 소스를 붙여 넣었더니,
    댓글에 댓글은 쓰기가 가능한데,
    원문에 댓글은 이상한 팝업창이 뜨면서 입력이 되질 않습니다!
    도와주세요-.-

    이 글은 피시방에서 작성한 글입니다!

  35. 지금 다시 제 블로그 오니 동작이 정상적으로 됩니다^^
    아니 어제 그렇게 안되던것이 하루 지나니 자동으로 정상적으로 동작을 하고 있네요^^
    그래도 스킨문제로 인하여 입 블로그를 알게 되어서 반갑습니다,
    자주 놀려 올께요^^

  36. 집에 가서 집의 컴푸터로 하니 댓글 등록이 되질 않아요-.-
    이상한 경고창만 뜨고,
    집의 컴푸터에 문제가 있는 모양입니다
    지금 피시방이예요!

  37. 아.. 그런 일이 있었군요.
    스킨 소스가 엉킨것 같은데요?
    스킨 ㅡㅡ> 스킨선택 하셔서 지금 쓰고 있는 스킨을 새로... 똑같이 골라서
    적용을 한번 해보세요 ^^;;
    일종의 초기화인데..
    아무래도 ## 이런것들이 html 소스로 다른 게시판이나 덧글 이런곳을 거치면 깨지게되거든요.
    이런것들이 엉킨것 같아요.

    현재 그 스킨중에 따로 올리신 이미지와 사이드바 소스같은건 일단 메모장에 욺겨두시고~
    현재 스킨도 따로 저장해두시고 한번 새로운 스킨으로 적용시켜보세요~
    아직은 스킨을 그닥 많이 만지신거 같진 않아서 초기화가 빠르겠네요. 건투를 빕니다~ ^^

  38. 드디어 수정 완료하였습니다^^

    2proo님 고맙습니다^^

    다음에 산에서 만나면 같이 파전이라도 함께 하시죠^^

  39. Blog Icon

    비밀댓글입니다