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

CSS로 티스토리 추천버튼 정렬하는 방법

2009.04.30 14:24
"CSS로 티스토리 추천버튼 정렬하기!"에서 작성한 추천버튼 정렬 방법을 티스토리 블로그에 적용하는 방법을 간단하게 설명하겠습니다.
CSS나 HTML 수정 경험이 없는 일반 사용자를 위한 간단한 방법입니다.
수정코드는 "CSS로 티스토리 추천버튼 정렬하기!"에서 복사를 해서 사용하면 됩니다.

관리자에 로그인을 하고, 관리자페이지의 상단 메뉴에서 스킨 -> HTML/CSS 수정 메뉴를 클릭해서 스킨 코드 수정 페이지로 이동을 합니다.

티스토리 스킨 수정

수정 페이지에는 skin.html 수정 항목과 style.css 수정 항목이 있습니다. 추천 버튼 정렬을 위해서는 style.css 항목만 수정하면 됩니다.
style.css 수정항목을 스크롤해서 가장 하단에 복사한 코드를 입력합니다.
코드 복사는 "CSS로 티스토리 추천버튼 정렬하기!"에서 선택해서 복사하시면 됩니다.

티스토리 스킨 수정

미리보기 버튼을 눌러서 스킨에 정상적으로 잘 적용된 것을 확인하신 후 저장하면 됩니다.
아주 간단한 방법으로 추천버튼의 정렬이 가능하기 때문에 누구나 적용이 가능합니다.

스킨에 따라 추가적인 코드 수정이 필요할 수 있습니다. 스킨에 정상적으로 적용이 되지 않는 분은 댓글 남겨주시면 최대한 도와 드리겠습니다.^^  즐거운 연휴 보내세요.
이전 댓글 더보기
JiNi 2009.05.07 15:00 신고 E / R
위즈님.
위에 태그 다시 한번 봐 주시겠어요?
위의 태그로 본문아래는 제 자리를 잡았는데 블로그 맨하단에 믹시업 버튼이 또 나오네요.
그것 때문인지 블로그 접속 속도가 엄청 느려지고 창이 계속 다운되는데요.
번거롭게 해 드려 죄송합니다.
위즈 2009.05.07 17:16 신고 E
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:none;width:350px !important;}
div.blogger-news-widget embed {display:inline;float:left;}
div.GAD {clear:none;width:250px !important;display:inline;float:left;}
div.GAD iframe {display:inline;overflow:hidden;}
이렇게 수정을 해보세요. 덕분에 버그 처리를 했습니다. 해보시고 적용이 안되면 다시 알려주세요.
위즈 2009.05.07 17:17 신고 E
그리고 광고정렬에 사용한 코드도 수정하시는게 좋을 것 같네요.^^
<center> 태그는 향후 지원이 안되기 때문에 사용하지 않도록 권고 하는 태그거든요.^^

변경전
<!--링크프라이스 광고물 소스 시작-->
<center> ~~~~~~~~~~~~~~~ </center>
<!--알라딘 북광고-->
<center> ~~~~~~~~~~~~~~~ </center>

변경후
<!--링크프라이스 광고물 소스 시작-->
<br />
<div style="text-align:center;display:block;clear:both;margin-top:5px;">~~~~~~~~</div>
<!--알라딘 북광고-->
<div style="text-align:center;display:block;clear:both;">~~~~~~~~</div>
JiNi 2009.05.07 20:21 신고 E
여전히 아래에 또하나의 믹시업 버튼이 보이는데요.
어떨 때는 안보이기도 하고요.
그 넘이 자꾸 보여서 위즈님에게 너무 미안하네요.
주책없이 왜 자꾸 나타나는지...
위즈 2009.05.08 09:53 신고 E
제가 IE6를 사용하지 않고 있어서 작업이 느려요.^^
style.css 부분에서 수정을 해주세요.
* 수정전
div.GAD iframe {display:inline;overflow:hidden;}

* 수정후
div.GAD iframe {display:inline;overflow:hidden;float:left;}

코드를 가지고 테스트 했을때는 정상적으로 출력이 되는데 실제 스킨에 적용하면 어떤지 모르겠네요.^^
한번더 테스트 해보시고 알려주세요.^^
JiNi 2009.05.08 11:51 신고 E
마찬가지인데요.
아무 변화가 없습니다.
위즈 2009.05.08 13:08 신고 E
skin.html 의 가장 하단에 있는 "제트센스"관련 스크립트 코드를 "구글 추적코드" 위로 올리면 호완모드에서는 정상적으로 보이는데 한번 적용을 해보세요.

<!-- 제트센스 -->
<script ################ ></script>
<!--구글 추적코드-->

이런 형태가 되도록이요.
JiNi 2009.05.09 11:06 신고 E / R
위즈님.
하루정도 블로그를 유지해본 결과 이제는 오류 없이 깔끔히 추천버튼이 자리를 잡았습니다.
수정전에는 블로그 하단에 추천 버튼이 새로 한개 나오기도 했고 제 블로그에 접속하면 인터넷창이 멈춰버리는 결과가 있었습니다.
덕분에 며칠동안 블로그 방문자수가 급감하기도 했었죠.ㅎㅎ

이제 태그도 완전하게 되었으니 이 글의 본문 태그를 수정하면 어떨까 생각합니다.
제 댓글은 삭제해도 괜찮으니 다른 사람이 혼동일으키지 않게 정리를 부탁드립니다.
제가 이 태그에 대한 포스팅을 하려고 합니다.
완성되면 이 글에 트랙백을 걸어 두겠습니다.

암튼 장시간 동안 저의 과도했을 수도 있는 질문에 일일이 답변해 주시고 태그를 수정해 주셔서 감사를 드립니다.
하시는 일 형통하기를 기원합니다.
위즈 2009.05.11 08:58 신고 E
잘 처리 되었다면 다행이네요. 덕분에 저도 도움 많이 받았습니다.^^
JiNi님도 즐거운 블로깅 하세요.^^
이름이동기 2009.05.14 10:14 신고 E / R
저는 왼쪽에 다음애드클릭스 광고 오른쪽에 추천버튼을 하고 싶은데 애드클릭스가 쩌~밑으로 내려가서 안올라와요 ㅠ

맨위 - 애드클릭스 ㅣ 추천버튼 2개
중간 - 올블릿
아래 - 카테고리 글 더보기

이렇게 꾸미고 싶은데 ... 어찌해야 할까요 ?? ㅠ
위즈 2009.05.14 13:37 신고 E
올블릿 역시 ID 값이 없어서 이동기님의 형태로 구성은 불가능 할것 같네요.

다음추천버튼 | 믹시추천버튼
올블릿 | 카테고리 글

아마도 이런 형태는 가능 할 것 같은데요.
김꽃돌군 2009.05.15 11:26 신고 E / R
안녕하세요^^ 좋은 정보 정말 잘 얻고 갑니다~
그런데 제 블로그에는 좀 문제가 있어서요 ㅠ.ㅠ
광고붙은것은 없는데...
크기가 달라서 그런지 왼쪽은 공백이고 오른쪽에 다음뷰와 믹시가 생기고
그 아래에 칸의 오른쪽에 카테고리 다른글 보기가
위치합니다 ㅠ.ㅠ 왼쪽은 공백이구요 ㅠ.ㅠ
저에게 부디 도움을 주세요~!
위즈 2009.05.16 01:57 신고 E
카테고리 별로 글이 적어서 생기는 문제인 것 같네요.
조금 더 분석해서 수정한 코드를 방명록에 남겨드릴께요.
즐거운 하루되세요.
웨이 2009.07.04 17:38 신고 E / R
위즈님의 글과 아래 댓글들을 전부 읽어보았습니다. 위즈님께서 일일이 체크해주심에 제3자로서 감사를 표합니다.
저도 문제가 있어서 수 시간째 연습을 해보고 따라 해보았지만 소득은 없습니다.
제 문제는 김꽃돌군님의 사항과 같고 단지 그 아래에 별도로 믹스가 하나 더 뜹니다.
부디 도움을 주시면 고맙겠습니다! *^^*
위즈 2009.07.06 08:34 신고 E
웨이님의 블로그 소스를 보니까 믹시 소스가 2번 들어가 있네요.
우선 블로그의 플러그인으로 추가된 1가지가 표시되고, 스킨코드에서 직접 추가된 부분이 같이 출력되서 그런 것 같습니다. 스킨 수정에서 믹시 코드 부분을 찾아서 빼주시면 될 것 같네요.^^
답변이 늦어서 죄송합니다. 해보시다가 안되면 다시 댓글남겨 주세요.^^
박지은 2009.07.18 11:56 신고 E / R
안녕하세요^^ 스킨을 수정하던 중 좋은 정보있어서 도움받아 갑니다^^

그런데.. 문제가 좀 있어서요;;;;
다음뷰의 경우 크기가 조정이 되는데...
믹스업의 크기가 조정이 안되네요;; 왜이런건지 잘 모르겟네요^^;;;

바쁘실텐데.. 답변좀 부탁드리겠습니다^^
위즈 2009.07.20 09:25 신고 E
사이즈 자체가 줄어들지 않는 건가요? 혹시 IE6 사용을 하고 계신가요?
내용을 확인 할 수가 없어서요.^^
웨이 2009.07.19 08:52 신고 E / R
플러그인에서 기본적으로 믹스 하나가 주어지고 추가로 다니 그렇군요!
지금에사 봤습니다.
하나를 없애주니 정상적으로 돌아왔습니다!
정말 감사합니다!
늘 건강하시고 뜻한바 소망 이루시길 기원합니다 *^^*
위즈 2009.07.20 09:20 신고 E
정상적으로 출력되니까 다행이네요.^^ 즐거운 하루되세요.
빡지 2009.07.27 16:15 신고 E / R
안녕하세요 위즈님^^
위즈님의 글을 보고 하단 광고물을 정리했는데요;;

추천버튼이랑 구글 광고랑 너무 떨어져서 나오는데;;
위에 어떤분이 질문하신거 보고 바꿨더니 오히려 추천버튼이 가로로 출력되더라구요;;
어떻게 해야할지 몰라서 이렇게 코멘트를 남깁니다^^

아, 그리구; 그 추천 버튼 위에 글을 좀 쓰고 싶은데요...
예를 들먼 "추천 한번 클릭해 주세요~" 뭐 이런거요;;
어떻게 해야할지;;; 답변좀 부탁드릴께요^^
위즈 2009.07.27 21:18 신고 E
스킨 수정에서 skin.html에서 <div class="GAD">~~</div> 를 <div class="article">~~[요기]</div> "[요기]"부분 즉 가장 마지막에 넣어주면 됩니다.
어려우시면 메일로 wizys 다음메일로 Skin.html 내용을 보내주시면 작업해서 보내드릴께요.
즐거운 하루되세요.
빡지 2009.07.27 23:17 신고 E / R
skin.html 파일 메일로 보냈습니다^^;;;;;; 잘부탁드립니다^^
위즈 2009.07.28 14:06 신고 E
수정내용 답장 보내드렸습니다.
잘 나왔으면 좋겠네요.^^
빡지 2009.07.29 01:26 신고 E / R
스킨 수정파일 잘 받았습니다;;;
그런데 다름이 아니라;; 제가 다음 뷰 위에 텍스트를 삽입하고 싶은데요;;;;
그것에 대한 수정이 안된것 같더라구요;;
번거로우실텐데 자꾸 질문해서 죄송합니다......ㅠㅠㅠㅠㅠ

구글광고 넣은 소스 다음에 텍스트를 넣으면 다음뷰 위에 출력되지 않고 구글광고 밑에 출력되더라구요;;;
어떻게 해야할지;; 한번만더 도와주십사 부탁드립니다^^;;
위즈 2009.07.30 08:51 신고 E
이 부분은 자바스크립트로 코딩이 들어가야 하는 부분이라 조금 무거울 수 있는데 그래도 필요하시다면 작성해서 메일로 보내드릴께요.^^
빡지 2009.07.30 10:42 신고 E / R
ㅠㅠ 부탁드릴께요........ㅠㅠㅠㅠㅠ
위즈 2009.07.30 15:59 신고 E
포스트로 작성을 했습니다. 참고하세요.^^
http://wiz.pe.kr/577
라이제르 2009.12.23 16:02 신고 E / R
ㅜ.ㅜ저 님처럼 정렬이 안되고 이상하게 되요.ㅠ.ㅠ
그리고 옆에다가 어떻게 광고넣나요?
위즈 2009.12.24 10:21 신고 E
글 내용과 댓글 읽어보시면 본문이 작을때 사이즈 조절 하는 부분과 광고 설정 하는 내용들이 있습니다.^^
찾아보시고 안되면 다시 댓글 남겨주세요.

http://wiz.pe.kr/545
http://wiz.pe.kr/545

즐거운 하루되세요.
라이제르 2010.03.03 20:55 신고 E / R
저 너무 안됩니다.
그니까 믹시와 다음뷰도 블로그에 삐져나오고요.믹시는 그냥 삐져나와버리고요.
다음뷰는 짤려서나오고요.
구글광고 대신 링프광고로 하고싶은데...코드 수정좀 해주세요.
광고를 하단에 넣으면 광고와 카테고리의 다른글이 함께 축소되면서 아래에있고 추천버튼들은 위에 오른쪽에 삐져나와있습니다.
부탁드립니다.ㅜ.ㅜ
위즈 2010.03.04 10:11 신고 E
플래시와 레이어가 복잡한 스킨이라 조금 적용이 힘들 것 같은데요.
라이제르 2010.03.04 16:37 신고 E / R
그럼 방법은 전혀 없나요?ㅜㅜ
메일 가르쳐주시면 어떤현상이 일어나는지 사진으로 캡쳐해서 보내드릴순 있는데..ㅜ.ㅜ
위즈 2010.03.04 16:45 신고 E
관리자->스킨 에서 스킨 다운로드 하셔서 파일을 메일로 보내주세요.
그럼 테스트용 사이트에 올려서 수정해 보도록 하겠습니다.
메일 주소는 http://wiz.pe.kr/notice/181 제일 하단에 나와있습니다.
그럼 좋은 하루되세요.
일개미 2010.04.19 19:47 신고 E / R
제 블로그의 경우 없던데요. ㅎㅎㅎ 소스자체가? 흠. 기본스킨 쓰고 있습니다만.. 흠.
위즈 2010.04.21 12:46 신고 E
스킨선택에서 기본 스킨을 선택해서 다시 한번 적용을 해보세요.
그리고 보시면 아마도 소스를 볼 수 있을 것 같네요.
즐거운 하루되세요.
씨트러스 2010.05.09 02:34 신고 E / R
음 다음뷰 때문에 애 먹다가 여기까지 왔는데...
신기하게도 여기 오니까 해결되었네요~
같은 방법은 아녔지만, 종종 들르게 될 것 같습니다. ^_^
위즈 2010.05.10 11:46 신고 E
즐거운 하루되시고 앞으로도 자주 들러주세요.^^
신사토리 2010.07.01 22:30 신고 E / R
추천버튼 정렬법을 보기좋게 정리해주셨네요..문제가 말끔히 해결됬습니다...
위즈님 블로그를 살펴보니 유익한 내용이 많은 것 같습니다...다음뷰에 등록해놓고 자주 들러야겠어요 ^^
위즈 2010.07.13 09:58 신고 E
^^ 감사합니다.
즐거운 하루되세요.
feminist 2010.07.28 14:19 신고 E / R
css초보자입니다. 코드 복사해서 css 하단에 붙여넣었는데 전혀 달라진 점을 모르겠네요; 어디가 잘못된 걸까요?
ad없고 하단에 추천버튼만 박스처리해서 정돈하고 싶었는데 참 어렵네요...ㅠㅠ
위즈 2010.08.02 09:50 신고 E
사용하고 계신 스킨이 css를 적용하기에는 본문 사이즈가 너무 좁아서 그렇습니다.
적용을 하시려면 우선 본문 사이즈가 넓은 스킨으로 변경을 하셔야 할 것 같습니다.
즐거운 하루되세요.
세상밖으로 2011.04.07 16:22 신고 E / R
다음뷰는 적용이되는데 믹시업은 않되네요.;;
믹시는 바뀌어서 그럴까요??
익넷 2011.08.19 20:55 신고 E / R
위즈님..안녕하세요! 익넷이라고 합니다... ^^ 제가 이부분 무척궁금했었는데요, 필요한 정보를 찾으니 기분이 좋네요... *^^;;... 위즈님의 블로그처럼.. 뷰버튼 주위에 왼쪽은 광고배너 오른쪽은 뷰박스 그아래는 카테고리를 넣고 싶습니다.. 현재 올리신 정보페이지에는 위즈님의 형태가 아니라서..ㅜㅡ... 삽입쏘스 부탁드려도 될런지요... 알려주시면 고맙겠습니다.. 아침,저녁으로 선선합니다.. 감기조심하시구요.. 감사합니다..*^___^
Name : Password : Blog : ( )

위즈군의 라이프로그

Category

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