위즈군의 라이프로그
Reboot... Search /

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

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

예제 1
CSS로 티스토리 추천버튼 정렬하기!
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
CSS로 티스토리 추천버튼 정렬하기!
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님이 작성한 
"티스토리 하단 정리하기 - 추천버튼과 카테고리 글 정렬하기"를 추가로 보시면 도움이 될 것 같습니다.^^
위즈군의 라이프로그

Category

전체 (564)
개발 (0)
일반정보 (0)
IT 일반 (1)
일상&사진 (0)
정리중 (563)

Recent Entry

    Recent Comments

      Recent Trackbacks

        Tags

        Links

          Total:
          Today: / Yesterday:
          Powered by Tistory / Skin by 위즈 라이센스정책 rss 2.0