블로그코리아 통합위젯이 깨지는 경우

블로그코리아의 메일 한통

얼마 전 블로그코리아에서 메일을 한통 받았다. 현재 블로그코리아에서 진행하고 있는 통합위젯서비스 클로즈 베타의 참석 여부를 묻는 메일이었다. 블로그코리아에서 진행하고 있는 블로그마케팅에 대해서는 나름대로 좋은 이미지를 가지고 있고 블로그마케팅에 대한 필로스님의 고민도 여러 번 들은 적이 있기 때문에 반갑게 참여를 신청했다. 원래는 10일에 오기로 한 위젯 코드이지만 막상 받은 것은 11일 저녁이었다.

예전에 글을 올렸지만 최근에 블로그 스킨을 바꿨다. 아울러 Category는 스킨에서 권장하는 대로 의미있는 마크업을 위해 [##_category_list_##]를 사용해 왔다. [##_category_list_##]가 좋기는 하지만 [##_category_list_##]를 사용하 사이드바에 블로그코리아 통합 위젯을 놓을 자리가 없다. 결국 통합위젯 클로즈 베타를 신청하면서 사이드바에 블로그코리아 위젯을 놓을 자리를 확보하기 위해 [##_category_##]으로 바꿔둔 상태였다.

따라서 받자마자 바로 스킨에 삽입했다. 그런데 어떻게 된 일인지 스킨에 삽입하지 않으면 정상적으로 뜨는 블로그코리아 위젯이 스킨에 삽입하면 항상 그림처럼 위젯이 깨졌다. 기본값인 red를 이용하면 조금 나아지기는 하지만 역시 오른쪽이 잘려서 표시됐다.

깨지는 블로그코리아 위젯

IFRAME를 사용하기 때문에 Internet Explorer에서는 잘 보인다. 스킨에 삽입하지 않으면 잘 보이는 이유도 사용하는 편집기인 EdtiPlus 역시 Internet Explorer 엔진을 사용하기 때문이다.

'red'에는 정상적으로 표시되지만 오른쪽이 짤리는 것을 보고 이 문제가 'IFRAME'의 폭이 좁아 발생한 문제일 것으로 생각했다. 따라서 이 문제는 상당히 간단히 해결했다. 물론 블로그코리아 통합위젯서비스 클로즈 베타에 참석하고 있는 사람이 얼마되지 않기 때문에 이 글이 많은 사람에게 도움이 될 것으로는 생각하지않는다. (광고: 도아의 세상사는 이야기는 단 한명의 고충도 해결해 줍니다)

<iframe src="http://www.blogkorea.net/bnmsvc/widget.do?gu=main&user_num=4042&ad=218018&skin=<font color="blue">red</font>" width="<font color="red">171</font>" height="350" frameborder="0" scrolling="no" allowtransparency="true"></iframe>

위에서 보면 알 수 있지만 width 속성의 값을 170에서 조금만 키우면 된다. 사실 이 문제는 원래 IFRAME을 도입한 Internet Explorer에서는 발생하지 않는다. 따라서 비 Internet Explorer 브라우저를 사용하는 사람을 위해 고처 주는 것이 좋다. 마지막으로 skin=red로 코드를 보내 주었지만 색상은 그림처럼 RED, GRAY, BLUE, BLACK가 가능하다. 따라서 네 개의 색상 중 자신의 스킨에 맞는 색상으로 빠꿔 달아도 된다.

관련 글타래

글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
2008/12/13 07:27 2008/12/13 07:27
오늘의 글
인기있는 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베

Trackback

Trackback Address :: https://offree.net/trackback/2179

Facebook

Comments

  1. bluenlive 2008/12/13 08:15

    엥?
    치환자(또는 치환자 형식)가 본문에 들어갈 수 있나요?
    신기신기...

    참고로, 티스토리에선 과감하게 씹어먹어버립니다. ㅠ.ㅠ

    perm. |  mod/del. reply.
    • 도아 2008/12/13 08:39

      텍큐에서 판올림하면서 이 문제를 해결했습니다 꽤 된 것으로 생각합니다. 티스토리는 태터툴즈 기반이라 아직도 씹는 것이고요.

  2. 화군 2008/12/13 10:10

    크롬으로 다른 블로그에 접속했더니 몇몇 블로그가 깨져보였는데.. 이거 때문이였군요.

    perm. |  mod/del. reply.
    • 도아 2008/12/13 11:33

      예. 저도 크롬을 사용하기 때문에 알 수 있었던 부분입니다.

  3. 필로스 2008/12/13 13:56

    기술자가 아니라 무슨 말인지는 모르겠지만, 버그를 찾아내고, 직접 해법까지 찾아주셔서 감사드립니다...;; 베타테스트 첫 버그리포팅이네요..^^;;

    perm. |  mod/del. reply.
    • 도아 2008/12/14 06:54

      버그라기 보다는 크로스 브라우징입니다. IE에서 잘보이지만 다른 브라우저에서는 깨지는 문제니까요.

  4. 공상플러스 2008/12/13 14:25

    윽...

    perm. |  mod/del. reply.
  5. 진아랑 2008/12/14 09:41

    IE의 Padding 와 margin 관련 문제인가요?

    perm. |  mod/del. reply.
    • 도아 2008/12/14 10:49

      그럴 수도 있습니다. 아무튼 IE에서는 잘 보이는데 다른 브라우저에서는 깨지더군요.

  6. 학주니 2008/12/15 07:08

    파이어폭스에서는 그런 현상이 없었는데 크롬에서는 깨져서 보이나보군요.
    저도 스크립트 수정을 했습니다(그래도 제 블로그에서는 큰 변화는 없네요 ^^).

    perm. |  mod/del. reply.
    • 도아 2008/12/15 08:47

      예. 아마 크롬 엔진(웹킷)을 사용하는 브라우저에서는 모두 깨져 보일 것 같더군요.

  7. rince 2008/12/15 12:41

    광고가 참으로 인상적인 포스트였습니다. ^^;;;

    perm. |  mod/del. reply.
    • 도아 2008/12/15 12:54

      감사합니다. 처음에는 무슨 광고인가 싶었습니다.

(옵션: 없으면 생략)

글을 올릴 때 [b], [i], [url], [img]와 같은 BBCode를 사용할 수 있습니다.