CSS로 티스토리 추천버튼 정렬하기!

"티스토리에 필요한 기능을 건의합니다."를 통해서 블로그 추천기능 플러그인에 클래스 값을 추가해달라는 요청을 했었습니다. 티스토리 담당자의 빠른 처리를 통해 서버에 적용이 되었습니다. (믹시 위젯을 변경한 것으로 보입니다.)
믹시 추천버튼에 "mixup_widget" class 이름이 할당되었습니다.
덕분에 CSS를 조금 수정해서 깔끔하게 정렬이 가능하게 되었습니다.

예제 1

div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:350px !important;overflow:hidden !important;margin-top:10px;border-right:1px solid #c3c9e0;}
div.mixup_widget {display:inline;float:right;clear:both;width:350px !important;}
div.another_category {clear:none;width:350px !important;}
div.another_category tr {line-height:15px;height:15px;}
div.blogger-news-widget embed {float:left;}

예제 2

div.blogger-news-widget {display:inline;float:left;clear:left;width:350px !important;overflow:hidden;padding-top:20px;}
div.blogger-news-widget embed {float:left;}
div.mixup_widget {display:inline;float:right;clear:right;width:350px !important;}

간단한 예제 부분을 스킨의 사이즈에 맞춰서 넣으면 다양한 활용이 가능합니다. 블로그 스킨을 만드시는 분들 앞으로 이 부분도 참고해서 만들면 더 깔끔한 스킨이 나올 수 있을 것 같네요.
멋진 스킨도 기대해봅니다.
빠르게 작업을 해서 적용해주신 티스토리 관계자분들 고생 많으셨습니다.

*  서비스 별로 추천 버튼 사이즈를 좀 규격화 하면 사용자가 사용하기 편하겠지만 너무 큰 욕심일까요! 언젠가 규격화된 사이즈의 추천 기능이 만들어지길 기대해봅니다.

CSS로 티스토리 추천버튼 정렬하는 방법에 HTML/CSS를 처음 접하시는 분들을 위한 추천버튼 정렬하는 방법을 간단하게 정리했습니다. 참고하시면서 수정을 해보세요.^^

* 추가 : IE6 버그(IE6 : Duplicate Characters Bug) 관련 수정을 했습니다. display 속성값을 block에서 inline으로 수정했습니다.^^ (개발자들을 위해서 IE6를 업데이트[http://www.microsoft.com/windows/internet-explorer/worldwide-sites.aspx] 하세요.^^)

* 2009.05.11 추가 : 올블릿을 사용하는 분들은 love virus님이 작성한 
"티스토리 하단 정리하기 - 추천버튼과 카테고리 글 정렬하기"를 추가로 보시면 도움이 될 것 같습니다.^^