SAVE THE DEVELOPERS <!> Upgrade IE 6 Now!

이 배너는 IE6 사용자에게만 보여집니다. 브라우저 업데이트로 보다 편리한 웹세상을 만나보세요!

«   2024/04   »
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30        

Jellybox for Foo_title

jellyboxdownload

more..

 

NEW TOP Image...

Trebuchet MS

1. Trebuchet MS



Swis721 Cn BT D-Type

2. Swis721 Cn BT D-Type



저기.. 바쁘지 않으신분. 지나가시는 분이라도 좋습니다. 누구라도! :) 지금 제 블로그의 제목 글꼴이 1번으로 보이시나요? 2번으로 보이시나요? 더불어 어느 글꼴이 더 낫다. 이런 코멘트 환영합니다. 감사합니다.

:)

 

아 이런..



어짜피 똑똑한 브라우져들은 다 무시해 버릴테지만.. 부끄..럽네... *ㅡ,.ㅡ* 부끄럽긴 하지만, 다시 수정해서 올려두긴 귀찮아.. 패스~! 그런데 언제부터 저 상태로 배포했던 걸까?
 

칠판 선물 도착.

태터툴즈에서 보내준 화이트보드&칠판 선물이 도착했습니다. 지난 토요일에 도착했습죠. 주말에 제가 집에 없다 보니, 제 방안에서 포장도 뜯겨지지 않은채, 이틀을 홀로 보냈을 겁니다.^^; 선물답게 예쁜 한지로 포장되어 왔던데, 포장까지 예쁘게 해주신 정성에 감사드립니다.
사진이라도 한장 찍어 보여드리면 좋겠지만, 아쉽게도 그럴만한 상황이 못 돼서...;; 꼭 제 손에서 디카가 없을 때만 이런일이 생기는군요. :(

아무튼, 생각했었던 것보다 큽니다! 모니터(?)만 합니다! 어디에 어울릴것 같냐 하면, 음.. 그.. 테이크 아웃 커피샵 같은데.. 혹은 이탈리안 레스토랑(?)같은데.. 오늘의 특선메뉴(?) 따위 적어 놓기 딱 좋아 보입니다. 책상위에다 올려두기 좀 부담 스럽기도 하고.... 마땅히 쓸데는.... 없네요..;;

함께 들어 있던 태터툴즈 배지와 핸드폰 고리도 잘 받았습니다. 이로써 태터툴즈 배지는 4개, 핸드폰 고리는 2개가 되었네요.

brooch

이게 제일 예뻐요!

아~ 사이드바 위, 구글 광고 위쪽으로 태터툴즈에서 보내준 스킨 디자이너 리본을 달았습니다. 참 예쁩니다! gif 이미지와 swf 플래쉬 두가지 종류가 있던데.. 반짝반짝 하는게 예뻐 보여서 플래쉬로 된 리본을 달았습니다. 그러나 문제는 제가 플래쉬의 '플'자도 모른다는 겁니다. :) 링크를 안 걸었는데도, 클릭하면 정의 되지 않은 어딘가로 연결하려는 걸 보면 플래쉬 안에 링크가 들어 있는 건가요? ㅎ 이거 어떻게 수정할 방법도 없고.. =_=;;; gif 로 바꿔야 겠습니다. <- 혼자 바보짓. ㅡ,.ㅡ'



 

Monochrome Skin [Ver2.0] 2nd A/S

5월의 스킨 디자이너 선정 기념으로(워~..ㅡ,.ㅡ;) 알면서도, 모른척 했던것들을 수정했습니다. @_@''
자세한 내용은 원래 스킨 배포글을 참고해 주세요.. :)

 

5월 스킨 디자인 공모의 디자이너상.

어처구니(?) 없게도 내 스킨이 선정.. :) 이거 1등 한건가? 규모도 다르고 상품의 크기도 다르지만, 어쨌던 1등이라기에 조금 부담 느낌. 물론 싫다는 건 아니고.. 예전에 인기상 받았을때와는 다른 느낌이라고 말하고 싶을 뿐.. 과연 1등으로 선정될 만한 스킨일까? 피식~

상품은 이~것~..

User inserted image

혹시나 해서 검색해 봤더니 역시나 검색! 19,800원 이구나~ 생긴것 답지 않게 비싸네~ 뭐에다 쓰지? 조카들한테 멋진 삼촌이나 되어 볼까나아~
혹시나 해서 6월 상품도 검색! 와 더 비싸구나아~ 멋지구나아~ 상품이 좋아서 그런지 6월 스킨 공모는 벌써 부터 쟁쟁한 스킨들이 즐비... :)
이런짓 하면 태터툴즈에서 싫어할까? 피식~

아무튼 태터툴즈 .. :)
(명예의 전당은 별 관심 없어요. 하지만 스킨디자이너 뱃지와 리본은 왜 안주시나효? ㅡ_ㅡ;)(안달하고 졸라서 뱃지와 리본 획득...@_@')


 

Monochrome Skin [Ver2.0] 1st A/S

상태 불량한 스킨에 지나친 관심 감사드리며.. 일일히 답하는것 보다, 한꺼번에 적는 것이 편할 것 같아 몇 자 적어 보렵니다. "두서" 가 없어도, "논리" 가 "정연" 이를 만나지 못해도 이것을 알아보면 당신이 챰피욘~!


스킨을 깔았는데 글 제목의 폰트가 너무 크게나와서 2줄로 되는군요.

1. 본문글 제목의 글자 크기는 style.css 에서 변경하실수 있습니다.


style.css 574라인 부근에... (에디터에서 post title 을 찾으시면 금방 찾으실수 있습니다.)
#content h2 a{    /* post title Link*/
    font: 29px Trebuchet MS, Verdana, Arial, 맑은 고딕, 굴림, gulim, sans-serif;
    color: #555;
    font-weight: 400;
    letter-spacing:-3px;
    text-decoration:none;
    padding: 15px 15px 3px 10px;
    border-bottom: 2px solid #f4f4f4;
}
29px 를 적당히 줄여주시면 OK~

그에 더해서 조금 더 아래 보시면.. (589라인..)
#content h3 {    /* tag, search, location, guestbook title */
    background: url(images/title2.gif) no-repeat top left;
    padding: 15px 15px 3px 50px; 
    font: 29px Trebuchet MS, Verdana, 맑은 고딕, 굴림, gulim, sans-serif;
    color: #555;
    font-weight: 500;
    letter-spacing:-3px;
    text-decoration:none;
    margin:10px 0;
    border-bottom:1px solid #ddd;   
}
이것은 주석에서 알수 있듯이 태그, 방명록 등등의 제목 글의 크기입니다. 본문 제목의 크기와 동일하게 맞춰 주시면 보기 좋을것 같네요. 물론 수정 하시지 않아도 OK~




맨위의 Home Desktop....Guestbook 처럼 메뉴를 추가하고 활성화 시키려면 어떻게 해야 하는지요.

2. 상단 메뉴바에 다른 링크를 넣으시는 건 아래와 같은 방법으로...


일단 넣으시려는 링크는 어떤 링크라도 상관이 없으나, 현재 페이지에서 활성화(?).. 에 그러니까 현재 페이지를 표시할 수 있는 경우는 태터툴즈의 카테고리 링크만 가능합니다. (태터툴즈의 카테고리만이 각기 다른 Body ID를 가질 수 있을 테니까요.)
우선 태터툴즈 관리자 페이지 - 글 - 분류 관리 에서 상단 메뉴바에 넣으실 카테고리의 Body-ID 를 변경해 줍니다. 형식은 아무래도 상관 없으나 tt-body-dtopshot, tt-body-diary 이런 형식으로 넣으시는게 좋겠어요.
그 다음, skin.html을 에디터로 열고.. 37라인 부근에서 아래와 같은 부분을 찾습니다.
    <div id="menu1">
        <div id="tabsB">
            <!-- CSS Tabs 상단 탭에 추가하실수 있습니다-->
            <ul>
                <li class="tab_hm"><a href="[##_blog_link_##]" title="처음으로~"><span>Home</span></a></li>
                <li class="tab_lc"><a href="[##_localog_link_##]" title="위치로그"><span>Location</span></a></li>
                <li class="tab_tag"><a href="[##_taglog_link_##]" title="태그"><span>Tag</span></a></li>
                <li class="tab_key"><a href="[##_keylog_link_##]" title="키워드"><span>Keyword</span></a></li>
                <li class="tab_guest"><a href="[##_guestbook_link_##]" title="방명록"><span>GuestBook</span></a></li>
            </ul>
        </div>
    </div>

<ul> 안에다 넣고 싶은 링크를 넣습니다. href 안에 치환자 형식이 아닌 일반 링크를 넣으시면 되요. :)
예를 들면..
 
<li class="AAAAA"><a href="http://hi8ar.net/category/이후 주소" title="팝업창에 뜨게할 문구"><span>메뉴이름</span></a></li>
이렇게 말이에요. ;; 다만 li class 를 넣어 주셔야 하는데.. (설명의 편의를 위해 AAAAA 로 하겠습니다.) 나중에 기억하실수만 있다면, 아무렇게나 적으셔도 됩니다. ^^
이런식으로 skin.html 에 모두 추가하셨다면,

style.css 를 열어.. 거의 마지막 부분..(1109라인..) /*bodyID TAB Navigation SET 를 찾습니다.
/*bodyID TAB Navigation SET  ===============================================
body#tt-body-page #tabsB .tab_hm a,
body#tt-body-location .tab_lc a,
body#tt-body-tag #tabsB .tab_tag a,
body#tt-body-keylog #tabsB .tab_key a,
body#tt-body-guestbook #tabsB .tab_guest a,
body#tt-body-dtopshot(관리자페이지 분류에서 설정했던 Body id) #tabsB .AAAAA a {
    background:url("images/tableftB2.gif") no-repeat left top;
}
body#tt-body-page #tabsB .tab_hm a span,
body#tt-body-location .tab_lc a span,
body#tt-body-tag #tabsB .tab_tag a span,
body#tt-body-keylog #tabsB .tab_key a span,
body#tt-body-guestbook #tabsB .tab_guest a span,
body#tt-body-dtopshot #tabsB .AAAAA a span {
    background:url("images/tabrightB2.gif") no-repeat right top;
    color:#993333;
}
body#tt-body-page #tabsB .tab_hm a:hover span,
body#tt-body-location .tab_lc a:hover span,
body#tt-body-tag #tabsB .tab_tag a:hover span,
body#tt-body-keylog #tabsB .tab_key a:hover span,
body#tt-body-guestbook #tabsB .tab_guest a:hover span,
body#tt-body-dtopshot #tabsB .AAAAA a:hover span {
    color:#000;
}
결론 부터 말씀드리면, ID #tabsB 아래 앞서 class AAAAA로 설정했던 li 를 각각 다른 body ID 에서만 반응할 수 있도록 하는 것입니다..(에.. 이게 뭔 말인지...ㅡ,.ㅡ;) 그러니까, body-ID 하나와 li class 는 각기 한쌍씩이 되어...ㅡ,.ㅡ' 설명이 불필요하게 복잡하지만, 빨강색으로 적힌 부분을 찬찬히 보시고, 위와 같은 형식으로 추가해 주시면 OK~

아래는 현재 제 블로그의 소스입니다. ;;

	<div id="menu1">
<div id="tabsB">
<!-- CSS Tabs 상단 탭에 추가하실수 있습니다-->
<ul>
<!-- CSS Tabs -->
<li class="tab_hm"><a href="http://hi8ar.net/" title="처음으로~"><span>Home</span></a></li>
<li class="tab_ds"><a href="http://hi8ar.net/category/Dtop%20Shot" title="데스크탑 스냅샷"><span>Desktop</span></a></li>
<li class="tab_wp"><a href="http://hi8ar.net/category/Wallpaper" title="월페이퍼"><span>Wallpaper</span></a></li>
<li class="tab_ms"><a href="http://hi8ar.net/category/Misc" title="잡동사니"><span>Misc</span></a></li>
<li class="tab_cn"><a href="http://hi8ar.net/category/C.note" title="커스토마이징 노트"><span>C.note</span></a></li>
<li class="tab_dr"><a href="http://hi8ar.net/category/Diary" title="다이어리"><span>Diary</span></a></li>
<li class="tab_mu"><a href="http://hi8ar.net/tag/Music" title="음악이 필요해?"><span>Music</span></a></li>
<li><a href="http://hi8ar.net/19" title="이것저것 링크~"><span>Link</span></a></li>
<li class="tab_tag"><a href="http://hi8ar.net[##_taglog_link_##]" title="태그"><span>Tag</span></a></li>
<li class="tab_key"><a href="http://hi8ar.net[##_keylog_link_##]" title="키워드"><span>Key</span></a></li>
<li class="tab_guest"><a href="http://hi8ar.net[##_guestbook_link_##]" title="방명록"><span>GuestBook[##_today_guest_##]</span></a></li>
</ul>
</div>
</div>

/*bodyID TAB Navigation SET  =============================================================*/
body#tt-body-page #tabsB .tab_hm a,
body#tt-body-dtopshot #tabsB .tab_ds a,
body#tt-body-wallpaper #tabsB .tab_wp a,
body#tt-body-misc #tabsB .tab_ms a,
body#tt-body-cnote #tabsB .tab_cn a,
body#tt-body-diary #tabsB .tab_dr a,
body#tt-body-tag #tabsB .tab_tag a,
body#tt-body-keylog #tabsB .tab_key a,
body#tt-body-guestbook #tabsB .tab_guest a {
background:url("images/tableftB2.gif") no-repeat left top;
}
body#tt-body-page #tabsB .tab_hm a span,
body#tt-body-dtopshot #tabsB .tab_ds a span,
body#tt-body-wallpaper #tabsB .tab_wp a span,
body#tt-body-misc #tabsB .tab_ms a span,
body#tt-body-cnote #tabsB .tab_cn a span,
body#tt-body-diary #tabsB .tab_dr a span,
body#tt-body-tag #tabsB .tab_tag a span,
body#tt-body-keylog #tabsB .tab_key a span,
body#tt-body-guestbook #tabsB .tab_guest a span {
background:url("images/tabrightB2.gif") no-repeat right top;
color:#993333;
}
body#tt-body-page #tabsB .tab_hm a:hover span,
body#tt-body-dtopshot #tabsB .tab_ds a:hover span,
body#tt-body-wallpaper #tabsB .tab_wp a:hover span,
body#tt-body-misc #tabsB .tab_ms a:hover span,
body#tt-body-cnote #tabsB .tab_cn a:hover span,
body#tt-body-diary #tabsB .tab_dr a:hover span,
body#tt-body-tag #tabsB .tab_tag a:hover span,
body#tt-body-keylog #tabsB .tab_key a:hover span,
body#tt-body-guestbook #tabsB .tab_guest a:hover span {
color:#000;
}



맨위에 플립형 시계 플러그인은 어떻게 달수 있나요?

3. 플립형 시계는 ClockLink 에서 제공하는 템플릿? 위젯?..
뭐 그런겁니다.. ㅡ,.ㅡ'

http://www.clocklink.com/ENG/gallery_digital.htm
페이지 제일 하단쯤에 있습니다. :)

우연찮게 모노크롬 스킨과 딱 어울리는 녀석을 발견해서 달아 봤습죠.. 냐냐냐~

아무튼, View Html Tag 를 누르시면.. 아래와 같은 창에서 (색상과 Timezone을 선택하신후) 시계를 넣으실수 있는 태그를 얻으실수 있습니다.
User inserted image

태터툴즈는 당연히 script 를 넣을수 있으니 Embed 가 아닌 Script 태그를 복사하신후..

skin.html 제일 마지막 부분 쯤에 적당히 쑤셔 넣습니다. :)
</div> <!-- Container END-------------------------

<div id="clock">

  <script src="http://www.clocklink.com/embed.js"></script><script type="text/javascript" language="JavaScript">obj = new Object;obj.clockfile = "5012-gray.swf";obj.TimeZone = "JST";obj.width = 91;obj.height = 30;obj.wmode = "transparent";showClock(obj);</script>
</div>

</body>
position을 absolute로 잡을것이기 때문에 소스의 위치는 <body> 의 안에만 위치하면 괜찮겠습니다. 냠냠~ ㅡ,.ㅡ' 다만, 아무래도 페이지 로딩시 clocklink 사이트에 다녀 와야 할테니, 다른 콘텐츠를 모두 띄우고, 시계가 로드 될 수 있도록 마지막 쯤에 적어 주시는게 좋겠어요.

style.css 를 열어.. 아래와 같이 추가 합니다.
#clock {
position: absolute;
right:10px;
top:10px;
}
이렇게만 해 주시면 That's it~!

예쁘긴 하지만, 사이트 로딩 속도를 더디게 할 테니, 썩 추천하고 싶은 시계는 아닙죠. :)



메인 상단 이미지는 어떻게 넣어야 되는 건가요?

4. 메인 상단의 이미지는 이런식으로...

User inserted image
스킨의 images 폴더에 보시면, top.gif 파일이 있습니다.
<- 요로코롬 생긴 녀석.. 가로 242 x 세로 156 크기의 그림이 반복되는 형태입니다.









style.css 239라인
#timg {
    text-align: left;
    padding: 85px 15px 0px;
    background: #000 url('images/top.gif') repeat;
    height: 50px;
}
기본적으로 검정색(#000)을 배경으로 하고, 그 위에 top.gif 파일을 반복해서 출력하는 형태... 실제 상단 메인 이미지가 갖는 세로 크기는 135px 쯤 되겠으니 그림의 아래 부분이 살짝 짤리는 형태입니다.

아무튼 저의 경우는 가로크기 1280px 짜리 이미지를 넣었습니다.
User inserted image
이따만한것을 통째로... ㅡ,.ㅡ'' 따라서 모니터의 해상도가 1280px 이 넘지 않는 이상 한개의 그림만 보인다 이것입죠. 냐냐냐~ 따라서 모니터 해상도 가로크기 1280px 이신 분의 모니터에선 우측에 위 이미지가 하나 더.... 아무튼 썩 훌륭하지 않은 편법입니다. :)

앞서 position: absolute 를 모기발의 피 만큼 설명했으니, 적당한 이미지를 가운데쯤 하나 딱 띄우실 수도 있겠네요.


웹표준?? 그런건 이런것으로 밥 벌어 드시는 분들께 맡기도록 하고...


다행이 내일은 온 세상 밝히시러 부처님이 오신날이라.. 푹 잘수....ㅡ,.ㅡ'
위 내용은 뭐라 적었는지 본인도 알아 볼수가 없으므로, 죄송 또 죄송하며...
불량 A/S 끝...

아! 보증 기한이 이제 지났으니, 앞으로는 유상 A/S 만 가능하겠습니다. ;P

 

Monochrome Skin 가로크기 800px 만들기.

원하시는 분이 계셔서 css 만 수정해서 되는지 안 되는지 해 봤습니다. container의 배경만 남기고 나머지는 날려버리니 되긴 되는군요. 그러니까 content와 footer의 배경이미지는 쓸데없는 짓이었어요. 낄낄낄..

아무튼.. 몇 군데 크기만 수정하면 되는데.. 일일이 적기 힘드니(굳이 원하시는 분이 계시면 일일이 적어 보겠습니다.), 테스트했던 style.css 와 index.xml을 올려둡니다. 다운 받으신 Monochrome Ver2.0에서 이 두 파일만 교체해서 적용하시면 됩니다. (index.xml 의 내용은 반드시 스킨을 새로 적용하셔야만 반영됩니다.)



800px로 적용하시면 이런 모습입니다. 1280x960 해상도에서, 테스트 블로그를 찍었어요. :)
User inserted image
후아~ 넓고 좋구나~ :) 나도 바꿔버릴까나?

 

Monochrome Skin [Ver2.0]

User inserted image
Monochrome 스킨의 새 버전입니다. 지금 이곳에 적용된, 스킨의 배포용 버젼으로 보시면 되겠습니다. 이름을 굳이 모노크롬이라고 또 명명 해야 할 이유는 없지만, 마땅한 다른 이름이 떠오르지 않아.. 그냥 모노크롬 2.0 입니다. 냐하함..

왠지 모르게 만들다 만 듯한 좌우 비대칭과 썰렁함이 콘셉이라면 콘셉..
(사실 만들다가 만 것이 맞아요..;;)

ncloud 님의 simple.js 스크립트를 사용했습니다. 사용을 허락해 주신 ncloud 님께 감사드립니다.

웹표준? 그런 것 잘 모름. :)
저작권? 저작권도 잘 모름.. (As your wish~!)
본문영역 600px, 사이드바 200px
오류사항은? 아래 댓글로 알려주시면 해결방안을 찾아보겠습니다. 모를 확률 90%~! 10%의 확률에 도전해 보실분이라면야.. :P

사용하실 분이 굉장히 없을 것으로 예상되므로 티스토리용은.. 상황을 봐서..
감사합니다.

-----------------------------------
Date : 2007. 5. 13
Name : hi8ar_mono_20
by : h8ar.net


* 2007.5.15 티스토리 버젼.
* 2007.5.17 800px 만들기.

* 2007.5.24 1st A/S

* 2007.6.15 2nd A/S
수정되고 바뀐 내용은 다음과 같습니다. @_@'

  1. listbox2 에도 listbox 와 같은 크기의 윗쪽 여백 추가.
  2. 방명록에 비밀글 기능 추가.
  3. 카운터 위 "Stats" 추가.
  4. 불필요한 플러그인 치환자 제거.. ;;;;
  5. 본문 영역 키워드 위에서 마우스 커서 모양 변경.
    User inserted image
  6. 기타 등등.. :)
  7. 800px 확장 css 의 경우, 방명록 하단 블로그 이름과 배너들이 가운데 정렬 되지 않는 것 수정.
  8. 심심해서 만든 상단 이미지 하나.
top.gif

top.gif


위 이미지가 적용된 모습은 http://hi8ar.tistory.com/ 에서 보실 수 있습니다.
(위 그림 저장하셔서, 파일 이름을 top.gif 로 변경한 후 스킨 images 폴더에 올리시면 변경됩니다. 기대는 마세요. 구리구리 합니다. ;P )

태터툴즈 게시판의 태터툴즈용 스킨, 티스토리 블로그의 티스토리 스킨, 800px 변경하기의 css 파일 모두 수정, 추가되었습니다.. :)


-----------------------------------

다운로드는 태터툴즈 스킨 게시판에서... :)
티스토리용도 따로 만들었데요~!
본문 영역을 800px 로 늘릴수 있습니다.

 

Thanks to iMacnoOn.



까막눈님께서 제보해 주신 충격적인 동영상 입니다. :) 조그만 동영상인데 이유없이 버퍼링이 좀 심합니다. 사이드바 온 상태에서 스크롤과 함께 막 사라졌다 나타났다 합니다. 별 볼일 없는 스킨인데, 밤하늘에 별찾기에요. (상콤한 언어유희~!) 많은분들이 염려해 주셨는데.. 프로가 될수 없는 아마추어 주제에 그만 고민하기로 했습니다. 하하.. 사실 IE 6.0에서 버벅이는 스크롤이 더 걱정...
퀵타임을 삭제해서 볼길이 막막했었는데, 똑똑한 머리가 다음에다 올리라고 말해 주었어요. 아무튼, 맥이 좋군요~! (?) 실제로 움직이는 맥이 더 보고파요. 다른 재밌는 동영상도 만들어주세요. 낄낄..

이제 정말 손 때야지... ;D
TAG ,