유용한 정보/블로그
블로그 스킨 기본 + 알짜 꾸미기 팁 제대로 따라해보다!!
닉쑤
2010. 7. 22. 09:29
블로그 스킨 기본 + 알짜 꾸미기 팁 제대로 따라해보다!!
[추가]
이 포스팅 당시의 스킨과 지금의 스킨은 다릅니다. 그래서 실제 적용 예를 못 보실텐데요.
그래도 본문에 원하시는 링크 따라가시면 해당 팁을 더 자세히 보고, 쉽게 따라하실 수 있답니다. ^^:
어제인가, 그제인가 블로그 스킨을 확 바꿔버렸습니다. 이전 스킨이 실용적인, 시각적 아름다움을 멀리;하는 스킨이었는데요. 이번 스킨은 깔끔하고 아주 심플한 스킨입니다. (스킨 이름도 simple X이였던듯ㅎ)
스킨 변경전에 이미 사이드바에 주렁주렁 달려있던 위젯들과 배너들의 HTML 코드를 메모장에 다 백업해 놨었습니다. 하지만 멍청하게도 Skin에 붙여 넣어놨던 [블로그독], [카테고리 더 보기], [본문 상단 구글 광고], [다음 웹인사이드], [태그 클라우드]등의 코드들을 다 날리고 말았죠. ㅡ.ㅜ 그래서 전부 다시 찾아서 붙여넣기 하고, 하는김에 메모장에 다시 보기좋게 정리 했습니다. 백업이 중요한걸 다시한번 깨달았네요.ㅠ 이렇게 다시 정리하니 윈도우 다시 깔면 다시 프로그램 셋팅하듯이, 블로그 처음 포맷하고 다시 세팅하는 기분이 드네요. 상쾌~
 그래, 이 기분이야~ *-o-* Gaby Goldman    |
그리고 스킨의 기본 버튼이랑 배경이 마음에 안들어서 조금 바꿨습니다. 그리고 카테고리 더 보기 부분에 배경그림 넣기, 다음 뷰 버튼 꾸미기 등 꼭 안해도 되는거 이틀동안 아주 그냥 열심히 했네요. 그래도 꾸미고 나니 완전 새 집에 이사한 듯한 기분~ -0-/
이제부터 하나씩, 어디서 배워서, 어떻게 적용했는지 보겠습니다. 제가 아는게 있나요, 열심히 따라할 뿐.. ;; 알짜 블로그 팁들을 공개해주신 여러 이웃분들(내 맘대로;)에게 감사의 말씀을 드립니다. ㅋ ^^
■ 버튼 & 폰트
1. 폰트 색깔, 크기
- 원래 폰트 색깔이 회색이었는데, 너무 연한거 같아서 조금 더 진한 회색으로 바꾸었습니다. 그리고 글자 크기도 스킨위자드에서 12px, 16px 사이 중간값 설정이 안되서 직접 13px정도로 바꿔줬습니다. 글자크기는 크지도 작지도 않은게 중요한듯 해요.
2. 버튼 교체 (rss버튼, 기타 메뉴)
- 러브드웹님이 추천해주신 무료 아이콘 다운로드 사이트에서 정말 1천개 가까이 다운 받아서 그 중에 하나 달아놨습니다. 앞으로 심심하면 바꿔서 분위기를 달리 해 볼 생각입니다... 참 쓸데없군요. ㅡㅡ; 하지만 무료 아이콘 다운로드 사이트들은 정말 좋은 아이콘들이 많습니다. 아이콘 하나 바꾸니깐 분위기가 아주 깔끔, 산뜻하니 기분이 좋네요~ 당분간 아이콘 걱정 없을듯~ ㅎ
- 배운 곳 : 러브드웹님 블로그 [관련 글 바로가기]
[적용 후] - 블로그 타이틀 옆에 있어요~
3. 애니메이션 버튼 (사이드바 오픈 버튼)
- 포토샵 이미지 레디를 이용해서 움직이는 GIF버튼을 달았습니다. 사이드바 오픈 버튼이 구석에 너무 조용히 있는 바람에 자세히 안보면 사이드바가 어디에 숨었는지 모르겠더군요. 움직이는 버튼으로 바꾸니 시선도 잘 가고, 재미도 있고, 잘 바꾼거 같습니다. 사이드바 오픈 버튼에 여간 신경이 쓰이는게 아닌데요. 방문객이 다른글 어디서 보는지 몰라 처음 글 하나만 읽고 바로 나가면 안습이니까요~ 그러지 말고 다른글도 천천히 보시라고..ㅋ
- 배운 곳 : 티비님 블로그 [관련 글 바로가기]
[적용 후] - 블로그 우측 상단에서 확인해 보세요.
■ Skin.html 삽입
1. 카테고리 항상 펼쳐놓기
- 카테고리의 하위 폴더까지 모두 열어 놓으면 방문자가 어떤 카테고리들이 있는지 쉽게 확인하고, 다른글을 읽게 할 확률이 더 높다고 하더군요. 전체 카테고리 길이가 너무 길지만 않으면 펼쳐놓는게 좋은듯 합니다. 전에는 코드를 넣어서 하는 방법이 있던데 요즘은 _list_ 치환자로 아주 쉽게~ ^^
- 배운 곳 : 재아님 블로그 [관련 글 바로가기]
[적용 후] - 블로그 우측 상단에 사이드 바 오픈 버튼 누르시면 확인 하실 수 있습니다.
2. 블로그독 추천 버튼 삽입
- 다음 뷰 추천 버튼은 플러그인으로 쉽게 본문 하단에 넣을 수 있지만 블로그독은 직접 코드를 넣어줘야 되네요. 그래도 일단 넣어놓으면 다시는 설정 안해줘도 되니 다행.
3. 카테고리 다른 글 더 보기 상자 위치 조정
- 플러그인에서 카테고리 다른 글 더 보기 기능은 기본으로 설정이 가능하죠. 하지만 위 [블로그독 추천 버튼]을 삽입하고 나면 위치가 엉뚱한 곳에 표시되는 문제를 해결하는 방법입니다. 친절하게도 위의 [블로그독 추천 버튼 삽입방법] 글에 포함되어 있습니다. ^^
- 배운 곳 : 티비님 블로그 [관련 글 바로가기]
[적용 후] - 본문 제일 아래쪽, 추천버튼들 밑에서 확인해 보세요.
4. 태그 클라우드
- 태그들을 구름처럼 한데 뭉쳐놓은 태그 클라우드는, 일단, 뽀대가 납니다. ㅋ 빙글빙글 돌려보는 재미도 있고 말이죠. 안 좋아하시는 분들도 있을지 모르겠는데 저는 꼭 달고 싶더라구요. 심심할 때 혼자 돌리고 놉니다.ㅎ
5. 확장형 링크 모음 메뉴
- 티스토리의 단점중에 하나인 링크메뉴. 링크를 너무 많이 추가하면 자꾸 길어져서 보기 싫죠. 평소엔 깔끔, 조신하게 있다가 클릭하면 쫙 펴지는 형태의 링크를 달았습니다. 근데 IE에선 잘 되는데 제가 쓰는 크롬에선 눌러도 창이 안열리네요; 이 부분은 조금 더 알아봐야 겠습니다. ㅡ.ㅜ 아시는 분 알려주세요~
- 배운 곳 : 티비님 블로그 [관련 글 바로가기]
[적용 후] - 블로그 우측 상단의 사이드 바 버튼 누르시면 화면 중간 아래쪽에 My Favorite메뉴가 있습니다. 눌러 보세요~
6. 구글 광고 본문 상단에 깔끔하게 2개 넣기
- 수익도 안나지만 괜히 한 번 구글 광고를 넣어봤습니다. 기대는 안하는 광고지만 깔끔하지 못하면 달아 놓기 싫죠~ 그래서 테이블을 이용해서 본문 상단에 구글 광고 2개를 넣어봤습니다. 그냥 넣으면 정렬이 잘 안되던데 테이블로 하니깐 화면에 딱 맞는 느낌이네요. 보기도 좋고... 수익도 나면 좋으련만... ㅋ
- 배운 곳 : 티비님 블로그 [관련 글 바로가기]
[적용 후] - 지금 이 본문 상단에 깔끔한 두 개의 구글 광고 보이시죠? ^^
7. 주인장만의 비밀 공간!!
- 참 매력적인 기능인데요~ 저번 스킨에는 제가 보고 싶어서 달아놓은 위젯, 배너들이 많았었답니다. 그래서 지저분했죠; 이번 스킨으로 넘어오면서 또 달면 지저분해질거고, 버리긴 아깝고 해서 고민이있는데 고민해결!! 글 상단에 로그인 해야만 볼 수 있는 비밀 공간에 다 집어넣어 놨답니다. 깔끔하고 아주 마음에 듭니다. ㅋ 자신만의 은밀한 공간을 만들어보세요.. -ㅅ-;
- 배운 곳 : 씨디맨님 블로그 [관련 글 바로가기]
[적용 후]
로그인하고 글을 읽으면 보이는 공간입니다. 지금 안보이시죠? 저만 볼수 있음ㅋ 아, 전체랭킹 14위 아닙니다; 순간캡쳐의 [기쁨]일뿐..-ㅅ-;;
8. 스크롤바 옆, 화면에 고정된 링크 버튼
- 화면을 아무리 아래위로 스크롤 해도 항상 같은 자리에 고정되어 있는 붙박이 링크 버튼입니다. 지금 스킨에는 안 어울려서 달았다가 다시 내렸는데요. 메타블로그, 트위터 등 원하는데로 마음껏 달아놓을 수 있어 편리합니다. MastmanBan님에게 제가 질문해서 답변 해주신 내용으로 만들어 봤습니다. 감사감사~
[적용 후]
9. 블로그 통계내기
- 티스토리 관리자 모드에서 유입량, 유입 키워드 등은 볼 수있지만 더 자세하고 정확하고 데이터는 얻을 수가 없죠. 그래서 다음 웹인사이드를 이용해 유입량, 페이지 뷰, 머문 시간, 읽은 페이지 수 등 자세한 데이터를 얻고 있습니다. 홈페이지 가서 가입하고 시키는데로 블로그 스킨에 코드 몇 줄 넣어놓으면 일정 시간 후 부터 데이터를 수집하기 시작합니다. 사용해보니 너무나 자세한 데이터가 나와서 부끄럽더군요. 방문자 중 절반 이상이 블로그에 머문 시간 30초이내...ㅡㅜ 개인이 만드신 통계프로그램도 있습니다. 아래를 참고해 주세요.
[적용 후]
트래픽 분석, 방문자 심층분석, 페이지 분석, 인기 검색어, 유입방법 등 다양한 기능을 제공합니다. 이런 데이터들을 바탕으로 블로그를 개선해야겠죠.
■ Style.css 삽입
1. 카테고리 다른글 더 보기 상자에 배경 꾸미기
- 티스토리에서 기본으로 제공하는 카테고리 다른글 더 보기 상자는 그냥 밋밋합니다. 그래서 이쁜 배경을 넣어 기분을 내 봅니다. ㅋ 깔끔한 이미지를 넣으니 분위기가 확 사는군요! 적어도 제가 느끼기엔...ㅡㅡ;
- 배운 곳 : 씨디맨님 블로그 [관련 글 바로가기]
[적용 후] - 본문 제일 아래에서 확인해 보세요~ 투명한 느낌의 폴더 그림이 멋집니다. ㅋ
2. 다음 뷰 추천 버튼 배경 꾸미기
- 그냥 네모 박스 손가락 버튼은 지겹다~ 색다른걸 달라 하시는 분들, 저 같은 사람을 위해 손가락 버튼도 꾸며봤습니다. 버튼 주위 배경을 더 크게 넣을 수도 있지만 원래 박스 비슷한 크기로 간단하게 넣어봤습니다. 이러면 추천수가 더 올라갈까요? 과연.. -ㅅ-; 그래도 귀여운 애들을 넣어놓으니깐 보기 좋네요. 혼자 흐믓.. ㅋ 역시 이미지레디로 움직이는 GIF이미지를 만들어서시선을 끌어보려; 노력했습니다. -ㅅ-;
- 배운 곳 : 씨디맨님 블로그 [관련 글 바로가기]
[적용 후] - 본문 아래에서 확인해 보세요~ 맘에 드시면 추천을~ 귀여운 애들을 봐서라도... -ㅅ-;
 My little dog by -=RoBeE=-  |
■ 사이드 바
1. 구글 검색용 애드센스
- 구글 애드센스에 컨텐츠 말고 검색 단위 광고도 있더군요. 검색을 해서 나오는 광고를 눌러야 수익이 생기구요. 이 검색 기능을 이용해 자신의 블로그 글들을 찾아 볼 수도 있습니다. 재아님이 구글 검색용 애드센스를 블로그 검색용으로 활용하고 계신걸 보고 따라해봤습니다. 설정방법은 구글 애드센스 홈페이지에서 참고하시면 되겠습니다.
[적용 후] - 블로그 우측 상단의 사이드바 오픈 버튼 누르시면 카테고리 위쪽에서 확인하실 수 있습니다. 제 블로그 글을 검색해 보세요~
2. 다음 뷰 내 최신글, 내 인기글, 구독 위젯
- 스킨에서 기본으로 제공하는 최근 포스트의 시각적인 집중도가 떨어져 [다음 뷰 내 최신글 위젯]으로 바꿔 달았습니다. 글 하나라도 더 보시라고 [내 인기글 위젯]도 달구요.ㅋ 원래 프로필 사진이 있었는데 없애 버리고 [다음 뷰 구독 위젯]을 달았습니다. 원래 같은 사진이었던지라 잘 어울리네요.ㅋ
- 퍼온 곳 : 다음 위젯 뱅크 [바로가기]
[적용 후] - 블로그 우측 상단의 사이드 바 오픈 버튼을 누르시면 확인하실 수 있습니다. [구독 위젯]으로 프로필 사진 대용은 멋진 생각인듯.ㅋ
 연속 추천 다섯개의 위엄.jpg 빨간색 추천의 뜻은 강추! m4r00n3d |
■ 기타 팁 & 위젯
1. 로그인은 키보드 단축키 Q로~
- 관리자, 글쓰기 버튼이 보기 싫은적 없으신가요? 이 버튼들은 방문객한텐 필요가 없죠. 그래서 없애 버렸습니다. [홈], [태그], [게스트]만 놔두고 싹. ㅎ 그리고 키보드 Q키만 누르시면 로그인 화면으로 바로 이동합니다. 완전 편해요~ 지금 한 번 눌러보세요. 제 블로그 로그인 창이 뜰겁니다.ㅎ 빨간색 손가락 강추!
- 배운 곳 : 씨디맨님 블로그 [바로가기]
2. 서식으로 본문 사진밑에 구글 광고 쉽게 넣기
- 혼자서 발견한 팁! 하지만 이미 알고들 계신 팁.. ㅡㅡ; 그래도 하나 만들어 놓으니 HTML창 안 열어도 되고 아주 편하네요. 서식은 활용만 잘하면 정말 짱인듯~
3. 웹 포토샵! 웹에서 이미지 간단하게 편집
- 웹상에서 사용하는 포토샵과 거의 비슷한 기능의 툴입니다. Pixlr Editor, Express, Grabber 시리즈 인데요.포스팅에 필요한 거의 모든 기능이 모여있으니 이제 웹에서 간편하게 사용해 보세요. ^^
4. 기타 위젯
- Flag Counter - 방문자들이 어느 나라에서 얼마나 접속했는지 보여주는 위젯. [바로가기]
- Whos among us - 지금 내 블로그에 접속중인 사람이 몇 명인지 보여주는 위젯. [바로가기]
- Fddejit - 실시간으로 내 블로그 방문객의 국가, 컴퓨터 OS, 웹브라우저, 방문 페이지 등을 보여주는 위젯. [바로가기]
- 위 세개의 위젯들은 주인장 비밀 공간에 넣어놨습니다.ㅋ 본문 위쪽 [주인장만의 비밀 공간] 항목의 캡쳐화면에 자세히 보시면 확인 하실수 있습니다.
- Uniclo - 소녀들이 무표정으로 춤추는 시계, 달력 새로 나온듯한데 이쁘네요. [바로가기]
- Voovic - 수입이랑 전혀 무관한 쇼핑몰 시계 위젯인데.. 고우신 모델분들이 많네요. 라비쉬추천.-ㅅ-;; [바로가기]
- 위 두개의 위젯들은 차마 저만의 [비밀공간]에 넣어두기 뭐해서 그냥 안 달았습니다. 그냥 바깥에 달아놨을 땐 별 느낌 없었는데 [비밀공간]이라는 단어가 부담스러워서... ㅋ 그래도 눈이 즐거운건 사실이지만...차마... -ㅅ-;
 여자친구한테 절대 말하지마~~~ free-secret-life |
■ 앞으로의 계획
1. 소제목 서식 만들기
- 소제목을 쓸 때 항상 뭔가 아쉬웠는데, 서식을 이용해서 깔끔하게 하나 만들어 볼까 합니다.
2. 타이틀 배경 꾸미기
- 지금 타이틀은 글자만 달랑 있습니다. 그래서 포토샵으로 투명한 느낌의 이미지와 멋진 폰트로 간지나는; 타이틀 하나 만들어 볼까 생각중입니다. 하지만 디자인 감각의 문제인지라... 웹디자인 경력있는, 처제 되실분께 부탁은 해놨지만 언제해줄지... 그냥 제가 해볼려구요.ㅎ 하다 안되면 그냥 이대로... -ㅅ-;
- 참고할 곳 : Blogx58님 블로그 [관련 글 바로가기]
- 완료!! => 처제 되실분이 작업해주신 이미지에 타이틀만 살짝 넣어서 맹글었습니다. 플래쉬로 멋지게 만들어 주셨는데 플래쉬는 안올라가는군요;; 되도록 심플하게 하려 했는데 아직까진 만족. ㅋ
3. 한rss, 피드버너 통합
- 저는 한rss만 쓰는데요. 단 한 분이라도 구독자가 더 늘어날까봐 피드버너도 합쳐볼까 합니다. 현재 5명... ㅡ.ㅜ
- 참고 할 곳 : 씨디맨님 블로그 [관련 글 바로가기]
- 완료!! => 제 Rss 버튼 눌러보시면 피드버너 구독창이 뜹니다. 전에는 한rss였거든요. 구독자수도 통합했어요. 사이드바 열어보시면 공지사항 밑에 있습니다. 지금은 7명이네요.ㅋ
4. 영어, 일본어로 페이지 번역 서비스
- 언젠가 저도 영어 사용자를 대상으로 한 블로그를 운영해 보는게 먼 목표인데요. 그에 앞서 지금 블로그에 영문 전용 카테고리를 하나 만들어 볼까도 생각하고 있습니다만... 아직 기본 블로그도 기반이 안 잡혀 무리고...^^; 우연히 영어, 일본어 자동 번역 툴을 보고 한 번 달아보고 싶어졌어요. 제대로 잘 번역이 될꺼 같지는 않지만... 재미삼아~ ㅋ
- 참고 할 곳 : 씨디맨님 블로그 [관련 글 바로가기]
5. 좋은 글쓰기 따라하기
- 이거는 평생 해야하는 거죠.ㅎ 어떻게 하면 깔끔하고 맛깔나게 글을 쓰느냐~ 글만 잘 쓰면 방문자 수를 걱정할 이유 자체가 없어지는데 말이죠. 경험 많으신 블로거님들의 관련 글들이 많던데 차근차근 읽어보고 꾸준히 노력해야겠습니다.
■ 마치며
- 쓰다보니 스크롤의 압박이... 항상 짧고 간결하게 쓰려는데 쉽지 않네요. ㅠ 그래도 나름 공을 들인... ㅡㅡ;
- 지금까지 제가 블로그 스킨을 바꾸면서 윈도우 포맷하는 심정으로 다시 세팅해본 내용들입니다. 초보 블로거 분들에게 조금이라도 도움이 됐으면 좋겠네요. 개인적으로도 다음에 또 스킨 바꿀 때 이 글을 참고하면 되겠네요. 일석이조~
- 그리고 제가 본문에 언급하지 않았지만 유용한 팁 있으시면 트랙백 날려주시면 감사하겠습니다. ^^
- 아, 제가 참고한 글들에 전부 트랙백 걸고 싶은데 어떻게 하나요? -ㅅ-; 하나 걸고 저장하고, 다시 걸고 저장하고 해야되나;; 좀 알려주세요~ => 하나 보내고, 또 하나 보내고 하니깐 되는군요. -ㅅ-;
- 읽어주셔서 감사합니다. 오늘도 좋은하루 되세요~
 왠지 받으면 곤란할꺼 같은 추천. 그래도 받으면 좋을거임. -ㅅ-; vernhart |