믹시(Mixsh) 위젯 버전업 후 표시되지 않는 문제 해결하기

코드를 변형한 믹시(Mixsh) 위젯

티스토리 블로그를 처음 시작하면서 여러 메타블로그에 제 블로그를 등록했던 기억이 납니다.

 

메타블로그에 등록을 하면 내 블로그에 올린 글이 메타블로그에 노출되어 더 많은 사람들이 볼 수 있게 되죠.

 

제가 티스토리 블로그를 처음 개설했던 몇 년전만해도 다음 뷰와 함께 믹시는 주요 메타블로그 중 하나였습니다.

 

하지만 시간이 지나면서 믹시에서의 유입은 거의 없었고(제 블로그만 그러한지 모르겠습니다), 자리만 차지하고 있는 커다란 위젯이 보기 싫어 아예 빼버릴까 생각도 했습니다.

 

하지만 적은 숫자이지만, 믹시를 통해 제 블로그 글을 구독하는 분들도 있어 믹시를 떼어버리진 못했고, 대신 믹시 위젯의 크기를 줄이고 위치를 옮기는 방법을 써왔습니다.

아마도 많은 분들이 다음 뷰 위젯과 믹시 위젯의 위치를 적절히 조합하여 블로그에 올려놓았을 텐데요, 저는 MissFlash님의 믹시 & 다음뷰 위젯 조정 방법을 이용하여 다음 뷰 위젯과 믹시 위젯의 위치를 조합해 써왔습니다.

믹시 위젯, 버전업으로 인해 보이지 않는다

그런데 어제부터 믹시 위젯이 표시되지 않는 것을 발견했습니다. 제 블로그의 소스 코드는 건드린 적이 없으니 믹시 위젯의 일시적인 문제인가 싶어 다른 블로그를 방문했더니 믹시 위젯의 모양이 바뀌었더군요.

 

믹시 위젯을 원본 그대로 쓰고 있는 블로그는 위젯이 제대로 표시되고 있었지만, 저처럼 편법(?)을 써서 위젯의 크기나 위치를 바꿔 쓰고 있는 블로그는 여지없이 믹시 위젯이 보이지 않거나

보이더라도 아래와 같은 에러 메시지를 표시하고 있었습니다.

 

저는 자바스크립트도, HTML도 할 줄 모르는터라 MissFlash님과 같은 고수가 수정해 주기 전까지는 꼼짝없이 빈 자리 그대로 살아야겠구나, 이 기회에 믹시 위젯을 아예 떼버릴까? 생각도 들었지만, 막상 믹시 코드를 살펴보니 iframe 기반으로 되어 있어 의외로 쉽게 문제를 잡을 수 있었습니다.

 

그 방법을 간단히 알아보겠습니다.

이 방법은 MissFlash님의 방법을 이용하여 믹시 위젯과 다음 뷰 위젯을 임의로 조정해 쓰던 분 들 중 에러가 나는 분들을 위한 수정법이므로 기본 믹시 위젯을 이용하는 분, 또는 믹시 위젯이 제대로 표시되는 분은 따로 손 댈 필요가 없습니다.

아울러, 저는 HTML이나 스크립트 전문가가 아니기 때문에 여기서 언급한 이외의 문제에 대해 답변을 드리기 어려운 점을 미리 말씀드립니다.

믹시업 위젯 코드 복사하기

일단 믹시 사이트에 접속하여 내 믹시 위젯 코드를 복사해야 합니다. 믹시 사이트에 접속하여 로그인 후 [마이믹시]  항목을 클릭하고

 

왼쪽의 [믹스업위젯] 항목을 클릭한 후 믹스업 위젯을 블로그 환경에 맞게 설정한 후 생성된 설치 코드를 복사합니다.

 

제 믹시 위젯 코드는 이런 식입니다.

티스토리 관리자의 HTML/CSS -> skin.html 수정하기

복사한 믹시 위젯 코드를 티스토리 관리자의 HTML/CSS -> skin.html에 붙여 넣어야 합니다.

해야할 작업은 간단합니다.

1. 티스토리 관리자의 HTML/CSS 편집 메뉴로 들어가 원래 사용하던 믹시 위젯 코드를 주석 처리
   보라 색으로 칠한 부분이 기존 믹시 코드입니다. 코드 앞뒤를 <!--, -->으로 둘러싸면 주석 처리가 됩니다. 주석 처리 대신 아예 지워버려도 되지만, 혹시라도 복구해야할 때를 대비, 주석 처리했습니다.
2. 앞서 복사한 믹시업 위젯 코드를 원래 믹시 위젯 코드가 있던 자리에 붙여 넣었습니다.
3. 믹시업 코드를 각자의 블로그 환경에 맞게 수정합니다.
   - 가운데 정렬(center)로 되어 있던 정렬 기준을 왼쪽 정렬(left)로 바꾸고 믹시 위젯 너비를 100픽셀로, 높이를 80픽셀로 수정했습니다(width='100' height='80')

 

수정 후 미리 보기를 해보니 원래 사용하던, 조그만 믹시 위젯을 볼 수 있었습니다.

익스플로러, 크롬에서 모두 정상적으로 보이니 저장을 하면 끝! 입니다.

 

참 쉽죠??

 

관련글

• 2013/08/16 - 내 블로그에 닥친 큰 위기, 새삼 느낀 스킨 백업의 중요성
• 2013/08/02 - 구글의 PageSpeed Insights로 내 블로그 개선점을 찾아보자
• 2013/05/09 - 티스토리 이미지에 나만의 도장, 워터마크 간편하게 찍는 법
• 2013/04/12 - 블로그에 올린 사진 색감, 포토샵에서 보던 것과 달랐던 원인은?
• 2013/03/05 - 모빌리스 웹폰트 유료화에 따른 구글 웹폰트의 티스토리 설정법
• 2012/10/13 - 다음뷰로 발행한 티스토리 글의 에러, 한 끝차이의 문제
• 2012/06/25 - 어도비가 내 블로그를 체크해준다 - Adobe BrowserLab
• 2012/06/22 - 깔끔한 내 블로그, 다른 브라우저에선 깨질 수 있다?
• 2012/06/11 - 내 포스팅의 HTML 소스는 왜 이리 지저분할까?
• 2012/06/09 - 티스토리 이미지와 글 간격을 줄이려면?
• 2012/06/05 - 티스토리 각주 글꼴 색상 설정하려면?