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

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

2009.04.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님이 작성한 
"티스토리 하단 정리하기 - 추천버튼과 카테고리 글 정렬하기"를 추가로 보시면 도움이 될 것 같습니다.^^
이전 댓글 더보기
[subit] 2009.08.24 02:05 신고 E / R
저도 추천버튼 정리하고 싶어서 물어물어서 이렇게 왔습니다. +_+
왼쪽에 에드센스 넣고 싶은데.. 흠... 어렵네요 ㅋㅋ
시간나면 적용해보아야겟습니다. ㅋ
위즈 2009.08.24 13:20 신고 E
적용해보시고, 어려운 점이 있다면 제가 최대한 도와 드리겠습니다.^^
즐거운 하루되세요.
cogito8ergo4sum 2009.08.27 13:25 신고 E / R
감사합니다. 저도 이 포스트 보고 왼쪽에 애드센스를 넣었습니다.
한 가지 질문이 있어서...~~

오른쪽에 있는 믹시와 다음 뷰 추천 버튼을 왼쪽으로 살짝, 한 10픽셀 정도 옮길 수 있을까요? 너무 왼쪽 정렬 되어 있어서 광고와 부자연스럽다고할까?

지금 광고 크기가 200 200 인데 250 250 으로 하면 세로 길이가 너무 길어서 이상하고, 200 200 하니 지금처럼 너무 떨어져서 뭔가 어색하다고 할까요? ㅋㅋ

제 블로그에 오셔서 상태를 한 번 봐주세요ㅠㅠ
위즈 2009.08.28 11:10 신고 E
cogito8ergo4sum님의 경우는 추천버튼의 넓이를 넓혀서 조금 깔끔하게 할 수 있을 것 같네요.

아래 자세히 보시면 width:320px !important; 로 되어 있던 것 을 width:402px !important;로 변경을 했습니다.
사이즈에 맞게 이 넓이를 조금씩 조절해서 깔끔하게 정리 하시면 될 것 같습니다.

또 한가지는 div.blogger-news-widget 부분에서 border-right:1px solid #c3c9e0;를 제거해서 다음뷰 추천의 우측 부분에 나타나는 선을 제거 하시면 됩니다.
아래 소스 부분 참고해서 대체를 하시거나 수정하시면 됩니다.
적용을 해보시고 이상하면 다시 댓글 달아주세요.^^

- 소스 - - - - - - -
div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:402px !important;overflow:hidden !important;margin-top:10px;}
div.mixup_widget {display:inline;float:right;clear:both;width:402px !important;}
- - - - - - - - - -

꼭 성공하시기를~~!
cogito8ergo4sum 2009.08.28 11:38 신고 E
정말 깔끔하게 원하는대로 정렬되었습니다.
이렇게 세심하게 수정해 주시니 이 감사의 마음을 어떻게 전해야 할지....

정말 감사합니다^^7
해맑은탱쟈 2009.09.09 13:06 신고 E / R
감사합니다.
가르쳐주신대로 글 보고 정렬했습니다. ^^
저도 왼쪽에 애드센스를 넣었는데요~ 하라는대로 해도 절대 안되는겁니다.
알고봤더니 이올린에 글 보내기 플러그인이 있으면 애드센스가 아래로 내려가더라구요~
그래서 플러그인 해제 했더니 잘 됐어요~

그런데 파폭에서 틀어져서 보이네요~
더 연구해봐야겠습니다~^^
해맑은탱쟈 2009.09.09 13:31 신고 E
div.han {display:inline;float:right;clear:both;align:center;width:400px !important;overflow:hidden !important;}
div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:400px !important;overflow:hidden !important;margin-bottom:-5px;}
div.mixup_widget {display:inline;float:right;clear:both;width:400px !important;margin-bottom:-5px;}
div.GAD {clear:none;width:250px !important;display:inline;float:left;}
div.GAD iframe {display:inline;overflow:hidden;float:left;}
div.blogger-news-widget embed {float:left;}

이렇게 썼는데요...
왜 익스플로러에서만 제대로 보이고~
파폭이나 크롬에선 아래로 내려가서 보일까요?
해맑은탱쟈 2009.09.09 15:36 신고 E
이유는 모르겠으나 어찌됐든 성공했습니다.
아래와 같이 했더니 되네요...

한rss구독 버튼이 자꾸 아래로 내려가서 강제로 끌어올렸어요 ;;
감사합니다~^^

div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:400px !important;overflow:hidden !important;margin-bottom:-5px;}
div.mixup_widget {display:inline;float:right;clear:both;width:400px !important;margin-bottom:-5px;}
div.GAD {clear:none;width:300px !important;}
div.GAD tr {line-height:15px;height:15px;}
div.han {clear:none;width:400px !important;float:right;margin-top:-50px;}
div.blogger-news-widget embed {float:left;}
위즈 2009.09.10 13:18 신고 E
코드 살펴보고, 조금 이상하다 싶었지만 급하게 일이 생겨서 자세히 볼 수 없었는데.. 성공하셨다니 다행입니다.
복어군 2009.09.12 14:53 신고 E / R
좋은 정보 감사합니다, 덕분에 잘 만들었어요
위즈 2009.09.14 13:44 신고 E
즐거운 블로깅 하세요.^^
shinlucky 2009.11.19 15:14 신고 E / R
다른 정보까지 링크걸어주시다니 감사합니다.
이글도 도움 많이되었어요 ^_^!!
위즈 2009.11.20 14:48 신고 E
즐거운 하루되세요.^^
MastmanBAN 2009.11.19 22:50 신고 E / R
좋은 정보 감사드립니다.
위즈님 블로그를 참고로 해서 제가 원하는대로 위치 이동을 했습니다. ^^
트랙백 남기고 가겠습니다.
위즈 2009.11.20 14:48 신고 E
감사합니다. 즐거운 하루되세요.
윤뽀 2009.12.14 18:09 신고 E / R
위즈님 궁금한게 있어서 이렇게 글 남깁니다
카테고리 다른글 갯수 조정은 어떻게 하나요?
광고 사이즈라던가 추천버튼 사이즈 조정을 같이 하기 위해서도 그렇고
나름 제가 노출하고싶은 갯수를 정하고 싶은데 이게 찾아도 잘 안보이네요 ㅠㅠ
다른 분들과 저의 노출 수는 분명 다른 것 같은데 -ㅠ- 어떻게 하는지 혹시 아시면 알려주실 수 있으세요?
위즈 2009.12.14 19:24 신고 E
"관리자->플러그인->플러그인 설정 -> 카테고리 글 더 보기"에서 "목록 개수 설정"으로 조절하면 됩니다.
그럼 좋은 하루되세요.
윤뽀 2009.12.14 20:16 신고 E
아 감사합니다 ㅠㅠ
전에 변경했는데 아무리 봐도 메뉴에 없어서 위즈님께 여쭤보게 되었던것이었는데
해결되었습니다 히히~^^
위즈 2009.12.14 21:43 신고 E
해결되셨다니 다행이네요.^^ 즐거운 하루되세요.
함차가족 2009.12.17 18:02 신고 E / R
위즈님..안녕하세요 예전에 위즈님 글을 보고..본문 하단을 정리하려다..결국 못하고 다시 도전하고 있습니다.
표기된 소스를 그대로 적용한다고 했는데
다음추천박스가 위쪽으로 올라가네요( 본문 폭 680)

왼쪽 : 구글광고 200
오른쪽 : 다음(위), 믹시(아래) 450

설정하려니 다음 추천박스크기가 줄어들지 않네요..줄곧 위쪽에 표기되고 있습니다.
해결방법이 없을까요..

CSS 제일 아래에..

div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:450px !important;overflow:hidden !important;margin-top:10px;border-right:1px solid #c3c9e0;}
div.mixup_widget {display:inline;float:right;clear:none;width:450px !important;}
div.blogger-news-widget embed {display:inline;float:left;}
div.GAD {clear:none;width:200px !important;display:inline;float:left;}
div.GAD iframe {display:inline;overflow:hidden;}

추가하였습니다.
위즈 2009.12.20 21:21 신고 E
div.mixup_widget {display:inline;float:right;clear:none;width:450px !important;}
div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:450px !important;overflow:hidden !important;margin-top:10px;border-right:1px solid #c3c9e0;}
div.blogger-news-widget embed {display:inline;float:left;}
div.GAD {clear:none;width:200px !important;display:inline;float:left;}
div.GAD iframe {display:inline;overflow:hidden;}

이렇게 변경을 해보세요. 소스는 문제가 없는 것 같은데 왜 적용이 안되는지 좀 더 확인을 해보겠습니다.
함차가족 2009.12.21 08:58 신고 E
네..위즈님..믹쉬가 위로 올라가는거네요..

소스적용했는데 추천버튼이 모두 광고 위쪽으로 표기되고 있습니다.
이상한점은 다음추천 오른쪽에 라인이 하나더 나오네요
위즈 2009.12.21 10:03 신고 E
div.GAD {display:inline;clear:none;width:200px !important;float:left;}
div.GAD iframe {display:inline;overflow:hidden;}
div.mixup_widget {display:inline;float:right;clear:none;width:450px !important;}
div.blogger-news-widget {display:inline;float:right;clear:none;text-align:left;width:450px !important;overflow:hidden !important;margin-top:10px;border-right:1px solid #c3c9e0;}
div.blogger-news-widget embed {display:inline;float:left;}

IE 버그 때문에 나타나는 현상인데 스킨 전체적인 조정이 필요 할 수도 있을 것 같네요..
우선 위 소스로 CSS 소스를 변경하고, 본문하단에 위치한 "RSS, SNS 이웃신청"이 들어 있는 table 태그 안에
style="clear:both;"
를 추가해주시면 될 것 같은데요.
함차가족 2009.12.21 10:36 신고 E
네..관심가져주셔서 고맙습니다.
새로 적용을 해보니. 광고영역이 200이 아닌 본문 전체영역으로 표기되고 있습니다. 또한 다음추천번튼은 오른쪽에 라인이 하나더 생기구요..

전체적인 스킨수정이라면..자신없네요..에궁
yeojuin 2009.12.22 11:08 신고 E / R
위즈님 저는 왕초보인데요.
이것저것 봐도 잘 모르겠고, 광고랑 믹시랑다음뷰가 같이 정리가 안되용,,
제가 뭘 잘못한건지 모르겠어요.
혹 수정하게 도와주실수 있나요?ㅠ.ㅠ
현재는 이렇게 해놨어요.

div.blogger-news-widget {display:inline;float:right;clear:both;text-align:left;width:410px !important;overflow:hidden !important;margin-top:10px;}
div.mixup_widget {display:inline;float:right;clear:both;width:420px !important;margin-bottom:-5px;}
div.GAD {clear:none;width:200px !important;}
div.GAD tr {line-height:15px;height:15px;}
div.blogger-news-widget embed {float:left;}
위즈 2009.12.22 20:41 신고 E
<div id="GAD"~~~~~~</div> 부분을 바로 뒤로 옮겨주세요.

현재
<div class="article"></div>
<div id="GAD"~~~~~~</div>

수정 후
<div class="article">
<div id="GAD"~~~~~~</div>
</div>

이렇게 수정하면 됩니다.
yeojuin 2009.12.22 23:11 신고 E
오 수정 후에 정상이 되었어요.
^^
정말 감사합니다.
그런데 쟤 구글 광고를 좀더 오른쪽으로 이동시키고 싶거든요. 애들이 너무 떨어져 있어서요..
이건 어떻게 하면 될까유..
즐거운 연말 되세요~
위즈 2009.12.22 23:26 신고 E
스킨 코드수정에서 div.GAD 부분을 아래 코드와 같이 수정을 해주세요.
div.GAD {clear:none;width:200px !important;margin-left:20px;}
가장 뒤에 붙은 여백을 조절해서 원하는 레이아웃을 설정하면 됩니다.
즐거운 하루되세요.
CrazyForYou 2010.01.27 03:34 신고 E / R
으헝... 어려워요;;;ㅋㅋ 아직 잘 모르겠내요~ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅎ 나중에 더 자세히 위즈님 다른 글도 읽어보면서 해봐야겠어요~ㅎㅎ
위즈 2010.01.28 09:39 신고 E
한번 해보면 다른 것들 하기도 쉬워집니다.^^
꼭 성공하시고 즐거운 하루되세요.
rura 2010.04.15 00:21 신고 E / R
안녕하세요~! 블로그 스킨 수정하면서 헤메다가 왔어요~!
좋은 정보 감사드려요!
그런데 .. 제가 사용하고 있는 스킨에 예제1처럼 수정하고 싶은데, css에 붙여넣으면 서로 다른곳에서 정렬이 되어요
다음뷰랑 믹시는 올블릿 광고 위에서 우측 정렬되고 카테고리는 트랙백 위에서 좌측으로 정렬이 된답니다.
한 지역으로 합해서 하는 방법이 없을까요?

그리고.. 한가지 더 질문이요~!
액션 트레일 과 페이징 사이에 생긴 공간 없애는 방법도 알고 싶어요>_<

답변 부탁드립니다~^^
위즈 2010.04.21 11:45 신고 E
div.another_category {clear:none;width:350px !important;} 부분에서 width:350px 부분의 사이즈를 조절해보세요. 200정도를 넣어서 보시고..정상적으로 출력되면 사이즈를 조금씩 늘려가면서 적절한 크기를 맞추면 될것 같습니다.^^
즐거운 하루되세요.
김현희 2010.04.27 16:05 신고 E / R
안녕하세요??
여기처음왔는데 글이많네요 (아님말구요??)
위즈 2010.04.28 18:26 신고 E
오늘도 즐거운 하루보내시고, 앞으로 자주 방문해주세요.
초록날개 2010.05.15 13:38 신고 E / R
안녕하세요?
블로그 운영중이넫요, 사정이 있어서 믹시 위젯 소스를 수동으로 삽입했더니 위 처럼 표시됩니다.
해결방법 알려주시면 감사하겠습니다~^^
위즈 2010.05.16 11:59 신고 E
어떤 형태로 보이는지.. 구체적으로 알려주세요..
메일로 화면을 캡쳐해서 보내주셔도 되고...
즐거운 하루되세요.
바람도없다 2010.05.17 06:22 신고 E / R
제홈피에는 이소스 css마지막에 붙여도 적용이 안되는데 왜그런걸까요 ....혹 알수잇나요...
위즈 2010.05.20 09:46 신고 E
아무래도 추천한 다른분 글 이라는 다음 뷰 항목 때문에 그렇게 나오는 것 같네요.
플러그인에서 그 부분을 제외하고 다시한번 시도해보시면 될 것 같습니다.
즐거운 하루되세요.
alberto 2010.06.12 14:39 신고 E / R
이런 팁이! 잘 보고 갑니다. 꼭 써봐야겠네요. ^^
위즈 2010.06.15 10:41 신고 E
즐거운 하루되세요.^^
yohimbine 2011.05.04 17:26 신고 E / R
이렇게 저렇게 해봐도 도저히 삽입이 안되서 고민인데요,
지금의 광고는 그대로 놔두고 다음뷰 버튼옆에 올블릿 470픽셀 광고 다는 방법 좀 알려주시면 감사하겠습니
위즈 2011.05.11 19:40 신고 E
블로그 주소를 알려주시면 확인해보도록 하겠습니다.
phenibut 2011.05.07 02:52 신고 E / R
삽입이 안되서 고민인데요,
지금의 광고는 그대로 놔두고 다음뷰 버튼옆에 올블릿 4
위즈 2011.05.11 19:41 신고 E
블로그 주소를 알려주시면 확인해보도록 하겠습니다.
위즈 2011.05.16 20:36 신고 E / R
------------------------------------------------------------
문의 하실때 오류를 확인 할 수 있는 페이지 링크를 걸어주세요.
블로그가 아닌 페이지로 링크 하는 경우는 광고로 생각하고 삭제 할 수 밖에 없습니다.
------------------------------------------------------------
제이 2011.06.12 23:12 신고 E / R
제 스킨이 이상한건지 다음뷰는 어딜봐도 안보이네요.. (전 잘 모르겠지만 HTML,CSS 소스 모두 다음뷰와 관련된 내용은 없는것 같습니다ㅠㅠ)

올블릿 / 다음뷰 / CCL / 목록 순으로 정렬이 되어있는데 보기 껄끄럽네요. 정렬하고자니 너무 어렵고....
현재 위즈님께서 예제로 올려놓으신 정렬하는 소스는 아직 쓰지 않았구요.
하게된다면 올블릿(정사각형으로)과 다음뷰를 놓고 아래에 믹시 등을 놓을 생각이구요 (ㅁ= 모양으로요)
그 아래에 카테고리와 알라딘광고를 간단하게 넣으려고 합니다.
ㅁ=
ㅁㅁ 모양이 되겠네요.

조금만 시간내주셔서 도와주셨으면 감사하겠습니다.^^ (제 블로그 링크해두었습니다.)
좋은하루되세요..ㅎㅎ;
미나미32 2013.03.16 00:55 신고 E / R
티스토리 유용한 팁 소개글을 작성하면서 이 팁도 링크했습니다.
좋은 팁은 두고두고 다음에 적용할일이 있지 않을까 싶어서요. 좋은 정보 감사드립니다.
Name : Password : Blog : ( )

위즈군의 라이프로그

Category

전체 (569)
개발 (0)
정보 (0)
일상 (0)
정리중 (569)
Total:2,137,638
Today:832 / Yesterday:211
Daum 코드
Powered by Tistory / Skin by 위즈 / Copyright Click Here 라이센스정책 rss 2.0