블로그에 MSN메신저 달기

Infomation/Computer 2007.12.07 13:38
서명덕 기자님의 블로그를 보다가 발견한 새로운 놀이!~
블로그 쥔장과 대화를 나눌 수 있는 공간 발견~~ㅋ

오른쪽에 보이는 MSN메신저를 블로그에 달았습니다.
http://settings.messenger.live.com/applications/WebSettings.aspx
이페이지 가셔서 로그인하시고 몇가지 설정을 해주시면 html코드가 생성되요.
iframe을 이용해서 생성시키네요.
코드는 아래와 같이 생성이 됩니다.

<iframe src="http://settings.messenger.live.com/Conversation/
IMMe.aspx?invitee=732be294295fe62f@apps.messenger.live.com&mkt=ko-KR" width="300" height="300" style="border: solid 1px black; width: 300px; height: 300px;" frameborder="0"></iframe>


근데 한가지 큰 문제점을 발견하고 말았다는....;;;
제 블로그의 사이드바의 width는 200px로 설정되어 있는데.
메신저를 달려면 최소 300px이상이 되어야 하더군요.
그래서 강제로 수치를 조절했습니다.

<iframe src="http://settings.messenger.live.com/Conversation/
IMMe.aspx?invitee=732be294295fe62f@apps.messenger.live.com&mkt=ko-KR" width="200" height="300" style="border: solid 1px black; width: 200px; height: 300px;" frameborder="0"></iframe>

직업이 웹 프로그래머인지라 이 까짓것쯤이야~ 쿠쿠쿠~하면서 당당히 고쳐서 달았습니다.
근데 MSN메신저는 역시 호락호락하지 않았습니다.


위와 같은 짜증나는 결과가...-_-;;
로그인 하지 않고 말을 걸기 위해선 특수문자를 입력해야 했던 것이었습니다...
이런....뭐 대화 한번 하는데 저런거 까지 검증을 해야하나 싶기도 했지만...-_-;;; 제가 저걸 뜯어 고칠수도 없는 노릇이고...어쩔수 없이 제 스킨을 늘렸습니다.

좀 쉽게 늘려보려고 스킨 위자드로 들어갔으나... 불행히도 스킨위자드에서는 사이드바 width를 조절 할 수 없네요..-_-;; 그래서 HTML/CSS 편집으로가서 style.css 편집창을 죽어라 들여다 보시면

#sidebar {
    float:right;
    width:300px;
    padding:30px 10px 0 10px;
        margin : 0 5 0 5;
        background-color : #EEE
}

요부분이 보이실겁니다. 여기서 width:300px; 이녀석을 조절하시면~ 사이드바가 확~ 늘어난답니다.ㅋㅋ

ㅇㅋㅂㄹ~ 저장하고 블로그를 확인해보니!! 이런대박사태가!!!!
사이드바가 사라진겁니다!! 이거이거 어디간겨ㅡ,.ㅡ?? 하면서 스크롤을 휙휙~ 돌려보니 사이드바가 아래로 뚝~ 떨어져 있었던 겁니다. 그 이유는 스킨의 구조때문에 그렇습니다.

블로그의 레이아웃은 style.css에 의해서 결정되는데요. 아래를 보시면
본문 내용이 들어가는곳이 #content 이녀석이구요. 사이드바는 #sidebar 그리고 이 두녀석을 감싸고 있는게 #container 입니다.
아래 설정 내용을 보시면...
전체를 둘러 싸고있는 container의 길이는 890px.
content 길이는 610px.
sidebar 길이는 방금 변경해서 300px
고로 content + sidebar 길이가 container길이를 오버해 버린샘이죠. 그래서 사이드바가 옆에 들어갈 공간이 없어서 밑으로  뚝~ 떨어졌던 겁니다.

/* 블로그 레이아웃 */
#container {
    width:/*@post-width:280*/ 890px /*@*/;
    margin:0 auto;
}

#headerBox {
    width: 100%;
    margin:0;padding:0;
    /*@title-background-image=background-image:url(images/head_bg.gif);*/ background-image: url("images/head_bg.gif"); /*@*/
    /*@title-background-image-position=background-position:left top;*/ background-position: left top; /*@*/
    /*@title-background-image-repeat=background-repeat:repeat-x;*/ background-repeat: repeat; /*@*/
    /*@title-background-color=background-color:#1A1A1A;*/ background-color: #1A1A1A; /*@*/
    height:/*@title-height=100*/ 100px /*@*/;
}
#header {
    width:/*@post-width:250*/ 860px /*@*/;
    margin:0 auto;
    padding:45px 0 0 30px;
}
/* ***** Header ***** */

#header h1 a { padding:0; margin:0; font-family:/*@title-font-family=dotum*/ dotum /*@*/; /*@title-color=color:;*/ color: #fff; /*@*/  font-weight:bold;  font-size:/*@title-font-size=14px*/ 16px /*@*/; line-height:1.0;}
#header .blogMenu { font-family: dotum; font-size:12px;  color:#484848; margin: 12px 0 0 0;float:right;}
#header .blogMenu a { color:#868686;}

#content {
    margin:0;
    float:left;
    width:/*@post-width*/ 610px /*@*/;
    padding: 35px 0 0 30px;
}

#sidebar {
    float:right;
    width:300px;
    padding:30px 10px 0 10px;
        margin : 0 5 0 5;
        background-color : #EEE
}


#footer {
    background:#FFF;
    clear:both;
    padding:20px 0 0 0;
}

해결 방법은 간단합니다.
container 의 width를 넉넉하게 늘려만 주심 됩니다요~흐흐~

그래서 지금 보시는 거와 같이 이쁘게~ 잘 들어간 모습이 보이시죠.^^?

신고
크리에이티브 커먼즈 라이선스
Creative Commons License

'Infomation > Computer' 카테고리의 다른 글

누구냐 넌?  (6) 2007.12.08
블로그에 MSN메신저 달기  (1) 2007.12.07
[flickr] 플리커와 테터툴즈 연동!!  (0) 2007.12.02
[DIY스킨] 움직이는 사이드바  (2) 2007.06.20


티스토리 툴바