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

CSS로 티스토리 추천버튼 정렬하는 방법 (55)	2009/04/30
CSS로 티스토리 추천버튼 정렬하기! (82)	2009/04/27
티스토리에 필요한 기능을 건의합니다. (6)	2009/04/23
블로그로 돈벌면 나쁜놈 또는 속물? (8)	2009/04/10

Krang 2009/04/27 18:53 E / R

완전 멋지네요!
멋진 기능을 제안해 주신 이즈님과
빠른 개선을 해주신 티스토리에 감사드립니다. ^0^

위즈 2009/04/28 09:55 E: Krang님도 즐거운 하루되세요.^^

마벨야그 2009/04/27 20:00 E / R

멋진 기능이군요.. 기능 개선도 빠른시간에 이루어지고.. 티스토리도 대단합니다. ㅎㅎ
믹시와 다음 추천버튼 길이가 달라서 그려려니 했는데
수정하고 나니 한결 보기 좋습니다..^^
저는 카테고리글 없이 중앙에만 정렬했습니다..

위즈 2009/04/28 09:56 E: 티스토리에서 빠르게 작업하는 모습을 보고 정말 깜짝 놀랐습니다.^^
마벨야그님 오늘하루 즐겁게 보내세요.

koc2000/SALM 2009/04/27 20:53 E / R

좋은 기능이네요. ^^b

위즈 2009/04/28 09:56 E: 조금이나마 깔끔하게..^^

nkokon 2009/04/28 07:49 E / R

와 깔끔하네요.

위즈 2009/04/28 09:56 E: 감사합니다.^^

즐거운하루 2009/04/28 14:07 E / R

깔끔하니 좋은기능인데요 이기능 제 블로그에도 사용하고 싶어지는데요

위즈 2009/04/28 18:54 E: 감사합니다.^^ 즐거운하루님 즐거운 하루되세요.^^

demun 2009/04/29 12:10 E / R

안녕하세요.정말 좋은 기능입니다.
초보자들을 위해 자세히 설명좀 해주시죠^^;

예를들어 예제2번을 하고 싶으면 소스를 복사해서 어디다 삽입하면 되나요?
수정은 어떻게 해야하는지?
좀 알려주세요. 수고하세요.

위즈 2009/04/30 09:44 E: 별도 포스트로 작성을 하겠습니다.^^
그래도 빨리 적용을 하고 싶으시면
메뉴에서 (관리자 화면 -> 스킨 -> HTML/CSS 편집) 으로 이동 합니다.
이후에 style.css 편집 화면의 가장 하단에 코드를 넣으면 됩니다.^^
즐거운 하루되세요.

demun 2009/04/30 12:42 E / R

고맙습니다.누구나 간단히 할수 있는거네요^^
도움 많이 됐습니다. 고마워요.

블로그를 보니 좋은내용이 넘 많군요.
전 이쪽으로는 영 꽝이라....많이 배우고 있습니다.

위즈 2009/04/30 12:59 E: 감사합니다.^^ 자주 방문해주세요.
오늘 하루도 즐거운 일 가득하세요.

배낭돌이 2009/05/03 13:48 E / R

우왕 정말 깔끔하네요!@
좋은 정보 공유 감사합니다. ^0^

위즈 2009/05/03 21:49 E: 감사합니다.^^

mun317 2009/05/10 23:10 E / R

안녕하세요 글을 참고해서 글을 하나 썼습니다.

물론 단순 퍼간건 아니구요

이글을 참고한 뒤 추가하여 포스팅했습니다.

출처에 대해서는 명확히 표기했으니

너그럽게 이해 부탁드립니다.

위즈 2009/05/11 09:01 E: 제가 빠트린 부분까지 챙긴 글을 작성해 주셔서 기분이 좋습니다. 올블릿을 포함한 다른 것들은 생각도 못했네요.^^
즐거운 하루되세요.

놀러와 2009/05/14 14:04 E / R

안녕하세요 이렇게 좋은 기능알게 되었네요 제 블로그에도 적용해야겠습니다 감사합니다

위즈 2009/05/15 13:24 E: 네..감사합니다.^^

Krang 2009/05/15 09:57 E / R

위즈님 저 Krang인데요.
저의 글에서 이 글을 링크로 소개했는데...
( http://krang.tistory.com/519 )
혹시 문제가 된다면 말씀해 주세요. :)
감사합니다.

위즈 2009/05/15 13:25 E: 소개까지 해주시다니 감사합니다. 즐거운 하루되세요.

Joa 2009/05/15 10:32 E / R

깔끔해서 좋은데 제 블로그가 워낙에 폭이 좁아놔서 적용시키면 삐져나갈 것 같아요 ㅜ_ㅜ
다음에 본문폭 넓은 스킨 사용할 때, 시도해봐야겠어요!
좋은 팁 감사합니다~

위즈 2009/05/15 13:25 E: 즐거운 하루되세요.

즐거운하루 2009/05/15 15:40 E / R

이렇게 좋은 기능있는줄 지금 알았네요 제 블로그에도 적용해봐야겠습니다

위즈 2009/05/16 00:54 E: 벌써 깔끔하게 정리가 되어 있네요.^^
즐거운 하루되세요.

야이노마 2009/05/15 19:57 E / R

좋은기능이네요 ^^ 여기에 한가지만 추가하면 더욱 좋을 것 같습니다.
한가지는 다음뷰와 믹시 추천버튼을 작게 하는 것입니다.
혹시 만드시면 방법점 소개점 시켜주세요

위즈 2009/05/16 00:59 E: div.blogger-news-widget 과 div.mixup_widget 안에 width 뒤에 숫자 값을 줄이면 됩니다.
예를 들어 width:350px 부분을 width:80px 이렇게요.
그리고 div.mixup_widget 끝 부분 } 앞에 overflow:hidden;을 추가 해주면 됩니다.
더 상세하게 설정 하시려면 덧글 남겨주세요. 즐거운 하루되세요.

야이노마 2009/05/16 11:57 E: 추천버튼 축소보다도 추천버튼만 사용할 수는 없나요?

위즈 2009/05/16 23:39 E: 현재는 추천버튼만 보이게 옆쪽을 잘라서 사용하는 방법 뿐입니다.
추천 버튼만 사용할 수 있도록 하는 방법을 찾아 보겠지만 아무래도 다음과 믹시에서 API형태로 지원을 해줘야 가능 할 것 같습니다.
또다른 방식의 http://blog.missflash.com/549 도 참고를 해보세요.^^
혹시라도 다른 방법을 찾게 되면 포스팅하겠습니다.
바로 도움을 드리지 못해 죄송하네요. 즐거운 주말되세요.

열산성 2009/05/15 23:10 E / R

아, 늘 정리하고 싶다는 생각을 했던 부분인데 감사합니다 ^^
예제2번으로 했는데 담에 1번으로 적용을 해봐야겠습니다~

위즈 2009/05/16 01:00 E: 잘적용된 것 같아서 기분이 좋네요.
즐거운 하루되세요.

즐거운하루 2009/05/16 10:19 E / R

안녕하세요
제 블로그 포스팅하면서 이글을 설명과링크 소개했습니다.
그리고 트랙백으로 발송했습니다
(http://goodlifegood.tistory.com/692)
만약 혹시 문제가 되는부분 된다면 말씀해주세요
감사합니다.

위즈 2009/05/16 23:36 E: 문제될 것 전혀 없습니다.
소개해주셔서 제가 더 감사합니다. 즐거운 하루되세요.

jonggyu 2009/05/27 09:32 E / R

좋은 팁 감사합니다.
제 블로그에 적용했어요.

위즈 2009/05/27 14:56 E: 칭찬 감사합니다. 즐거운 하루되세요.^^

BWaL 2009/06/15 18:28 E / R

감사합니다! 이걸로 저는 왼쪽에 애드센스 넣어서 했어요~
다른분들이 어케했나 싶어서 궁리하고 있던차인데!!
위즈님 팁으로 완벽히 해소 됬네요~ (__)

위즈 2009/06/15 21:18 E: 감사합니다.^^ 즐거운 하루되세요.

Gadgeteer 2009/07/25 00:01 E / R

와, 감사합니다. 빨리 적용해봐야 겠네요! 이런 분이 계셔서, 제 블로깅의 하루 하루가 그나마 버틸만 합니다.

위즈 2009/07/27 21:13 E: ^^ 즐거운 하루되세요.

[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: 즐거운 하루되세요.^^

질문있습니다. 2010/07/29 01:56 E / R

제 블로그 http://get-well.tistory.com/ 보시면
하단 카테고리옆에 클릭박스라는 광고를 달았는데
위에 다음뷰 추천버튼 옆에 올블릿 광고를 달아보려고 합니다.

이렇게 저렇게 해봐도 도저히 삽입이 안되서 고민인데요,
지금의 광고는 그대로 놔두고 다음뷰 버튼옆에 올블릿 470픽셀 광고 다는 방법 좀 알려주시면 감사하겠습니다.