구글 텍스트큐브닷컴용 3단 스킨 (사이드바가 좌, 우 총 2개)

텍스트큐브가 구글에 인수된지도 꽤 지났다.

하지만 서비스 업데이트를 포기했는지 정말 조용하다.

기존 텍스트큐브에서 구글로 이사를 온 많은 사람들의 불만 중 하나는 바로 스킨이 절대적으로 부족하다는 것이다.

현재 구글 텍스트큐브닷컴은 총 21종의 스킨을 제공하고 있지만 그 구성이나 레이아웃이 모두 동일하고 배경 이미지등이 조금씩 틀린 붕어빵 스킨이 대부분이다.

나도 얼마되지 않은 블로그 라이프이지만 블로그에 위젯 몇개만 붙이고 나면 위 아래로 무한정 길어지는 레이아웃에 사뭇 불만이 많았다.

그런 전차에 우연치 않게 텍스트큐브닷컴의 추천 포스트를 통해 기존의 텍스트큐브의 스킨을 수정하여 구글의 텍스트큐브닷컴에 적용할 수 있는 스킨이 있다는 것을 알게 되었다.

솔직히 스킨을 만들어서 적용할 수 있다는 것도 처음 알았다..ㅡㅡ

CSS는 개념만 알지 쓸줄은 모르는 생 날짜 초짜인 나로서는 스킨을 만드는 것은 어불 성설..

열심히 정말로 열심히 스킨을  찾았지만 검색되는 외부 스킨의 수는 절대적으로 적었다..

그 중에 popeye님의 블로그에서 그나마 가장 맘에 드는 스킨을 찾게 되었다.

이름하야 텍스트큐브닷컴용 4단 스킨

기쁜 마음에 다운로드 받아 설치해 본 결과 몇가지 문제가 발생했다.

우선 최하단에 위치한 위젯을 놓는 사이드바가 필요치 않았다. 서당개 3년이면 풍월을 읊는다 했던가..

웹서비스 기획자에 코더까지 했던 개발 실력으로 열심히 수정을 하여 어설프게 3단 스킨으로 만들었다. 하지만 popeye님이 인터넷 익스플로러 6에서 레이아웃이 깨진다면서 친절하게 도움의 손길을 주셨다.

그래서 만들어진 텍스트큐브닷컴용 3단 스킨을 배포하는 바이다.

이 스킨은 원래는 콤포지션님이 개인 전용으로 사용하시는 건데, 콤포지션님과 Mr.Dj님이 popeye님에게 공유하는 것에 관해 흔쾌히 승락하셨고 나는 다시 popeye님에게 허락을 얻어 공개하는 바이다.

혹시 4단 스킨을 원하시는 분은 popeye님의 블로그를 방문하시길 바란다.

우선은 popeye님에게 받은 3단 스킨을 다시 한번 손질을 하였다. 손질한 부분은 아래와 같다.

1. 원본은 블로그 타이틀을 이미지로 출력하게 되어 있는 것을 텍스트로 출력하도록 수정하고 위치를 약간 조정하였다.

펼쳐두기..

혹시 popeye님의 원본처럼 블로그 타이틀을 이미지로 출력하기를 원하시는 분은 skin.html에서

<div id="headerBox">

을 검색하신 후에 그 다음의 아래 부분에 해당하는  제 코드를 지우시고 아래 코드로 바꾸시면 됩니다.

   <div id="header">
     <!-- 타이틀 이미지 버전 (수정판) <div style="position:absolute; top:2px; left:-15px;"><a href="[##_blog_link_##]" title="[##_title_##]"><img style="border:0px;" src="./images/title_img.gif" /></a></div> -->
    <!-- 타이틀 텍스트 버전 (오리지널) <h1><a href="[##_blog_link_##]" title="[##_title_##]">[##_title_##]</a></h1>  -->
   
    <div style="position: absolute; top:20px;"><a href="[##_blog_link_##]" title="[##_title_##]"><img style="border:0px;" src="./images/img_title.jpg" /></a></div>

    <!-- 타이틀 끝-->
  <div class="blogMenu">
            <a href="[##_blog_link_##]">Main</a> |
            <a href="[##_blog_link_##]notice">Notice</a> |
            <a href="[##_taglog_link_##]">Tags</a> |
            <a href="[##_media_link_##]">Media</a> |
            <a href="[##_localog_link_##]">Locations</a> |
            <a href="[##_guestbook_link_##]">Guestbook</a> |
            <a href="[##_owner_url_##]">Admin</a> |
            <a href="[##_blog_link_##]owner/entry/post">Write</a>
      </div>
    </div>
</div>
<!-- header close -->

타이틀 이미지는 img_title.jpg 을 여러분의 이미지로 바꾸시면 됩니다. 크기는 알아서 잘 맞춰보세요.

2. No More IE6 운동을 지지하는 의미에서 인터넷 익스플로러 6로 접속할 경우 브라우저 업그레이드를 권고하는 베너를 하나 삽입했다.

펼쳐두기..

혹시 이 베너가 맘에 들지 않으신다면 skin.html에서

<!-- header close -->

을 검색하신 후에 바로 다음에 이어지는 아래 부분을 삭제하시면 됩니다.

<!--[if lt IE 7]><div style='border: 1px solid #7E9ECC; background: #E2ECFF; text-align: center; clear: both; height: 75px; position: relative;'><div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick='javascript:this.parentNode.parentNode.style.display="none"; return false;'><img src='http://ie6nomore.s3.amazonaws.com/cornerx.png' style='border: none;' alt='Close this notice'/></a></div><div style='width: 666px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'><div style='width: 64px; margin-top: 6px; float: left;'><img src='http://ie6nomore.s3.amazonaws.com/warning.png' alt='Warning!'/></div><div style='width: 560px; float: left; font-family: Arial, sans-serif;'><div style='font-size: 14px; font-weight: bold; margin-top: 6px; margin-left: 13px;'>최신 브라우저로 지금 업그레이드 해주세요.</div><div style='font-size: 12px; line-height: 12px; margin-top: 2px; margin-left: 13px;'> 아래 최신 브라우저는 쉽고 다양한 온라인 기능 및 본 사이트에 최적화된 서비스를 제공합니다.</div></div><div style='width: 145px; margin-top: 4px; margin-left: 13px; float: left;'><a href='http://www.mozilla.or.kr/ko/' target='_blank'><img src='http://ie6nomore.s3.amazonaws.com/downloadfirefox.png' style='border: none;' alt='Get Firefox 3.5'/></a></div><div style='width: 145px; margin-top: 4px; float: left;'><a href='http://www.apple.com/kr/safari/' target='_blank'><img src='http://ie6nomore.s3.amazonaws.com/downloadsafari.png' style='border: none;' alt='Get Safari 4'/></a></div><div style='width: 145px; margin-top: 4px; float: left;'><a href='http://www.google.com/chrome?hl=ko' target='_blank'><img src='http://ie6nomore.s3.amazonaws.com/downloadchrome.png' style='border: none;' alt='Get Google Chrome'/></a></div><div style='margin-top: 4px; float: left;'><a href='http://www.microsoft.com/korea/windows/internet-explorer/default.aspx' target='_blank'><img src='http://ie6nomore.s3.amazonaws.com/downloadie.png' style='border: none;' alt='Get Internet Explorer 8'/></a></div></div></div><![endif]-->

3. 메뉴바가 출력되도록 수정했다.

펼쳐두기..

메뉴바라 하면 아래 표시된 부분을 가리킨다.

혹시 이 부분이 표시되지 않도록 하고 싶으시다면 style.css에서

#tt-GNB {display:block;}

으로 된 부분을

#tt-GNB {display:none;}

로 변경하시면 됩니다.

그리고 메뉴바를 표시하신다면 '꾸미기 - 스킨설정 - 메뉴바스킨'에서 어두운 스키용을 선택하시면 가장 보기 좋습니다.

4. 관심블로그 등록하기를 자신의 BlogAPI Blog ID로 수정해야 한다.

펼쳐두기..

skin.html에서 23101 을 검색하셔서 23101 두군데를 모두 여러분의 BlogAPI Blog ID로 수정해 주셔야 합니다.

수정하지 않으시면 다른 블로거가 여러분을 관심블로그로 등록할 때 제가 등록됩니다. 저는 좋습니다. 하하하..

BlogAPI Blog ID는 '환경설정 - 글쓰기'에서 찾으실 수 있습니다.

각각의 수정 방법은 필요에 따라 펼쳐 보셔서 유용하게 적용하시기를 바란다.

그리고 실제 결함인지는 잘 모르겠지만 혹시나 구글 프렌즈 툴바를 설치할 경우 인터넷 익스플로러 6에서는 자바스크립트 에러와 함께 레이아웃이 부서지는 치명적인 결함이 있다.

혹시라도 구글 프렌즈 툴바를 적용하고 싶으신 분은 적용 후에 성공하시거든 꼭 연락 주시면 고맙겠습니다.

저는 지금 인터넷 익스플로러 6를 무시하고 적용해야할까?를 고민하고 있습니다.

그리고 저도 실력이 미천하고 원제작자가 아니기 때문에 A/S에는 한계가 있다기 보다는 거의 해드릴 수 없습니다.

필요하신 분은 저보다는 popeye님에게 문의하시는 것이 더 나을 것 같습니다.

다시한번 좋은 스킨을 공유해주신 popeye님에게 고마움을 표시하며, 앞으로 당분간은 이 스킨을 쭈욱 쓰게 될 것 같다.

그럼 여러분들도 즐거운 블로그 라이프 되시길 바랍니다.

LetsDreambig-1-3-for-textcube-dot-com.zip

아.. 그러고 보니.. 스킨을 어떻게 적용하는 것인지 궁금하신 분도 있으시겠네요...

스킨은 '꾸미기 - 스킨편집' 에 가셔서 파일 업로드에 있는 모든 파일을 선택해서 지우신 후에 파일 업로드에서 다운로드 받으신 zip을 선택해 주시면 알아서 올라갑니다.

그리고 스킨을 변경하시면 기존에 적용하신 CC 라이센스나, 각종 툴바, 믹시업 등은 모두 초기화가 되기 때문에 혹시 기존 스킨에서 변경해서 적용하셨던 부분은 모두 백업을 받아두셨다가 스킨을 적용후에 다시 적용해 주셔야 합니다.

그럼.. 이만..