노무현 전 대통령 서거 추모글 남기기

티스토리 툴바





우선 이 글은  위즈군의 라이프로그

에서 http://wiz.pe.kr/544 번 글을 보고 쓴 글입니다.

물론 그대로 배낀건 아니구요. 이 글을 보고 부족한점을 제가 보안하여 쓴 글입니다.

우선 광고를 제외한

티스토리 블로그 하단에 올 수 있는 것은 4가지 입니다.

블로거 뉴스, 믹스블로그, 카테고리 글목록, 그리고 올블로그입니다.

이 모두를 적용시킬 경우 블로그 하단은 다음처럼 지저분해집니다.




보기에도 너무 지저분해서

정리하던 법을 찾던 중

아까 소개한 블로그에서 정리하는 법을 배웠습니다.

우선 배운 것과 새로 발견한 것을 하나하나 씩 설명드리겠습니다.

우선 블로거 뉴스와 믹시블로그만 사용하는 경우
다음처럼 위아래가 아닌 좌우로 버튼을 정렬할 수 있습니다.

스킨의 HTML/CSS를 들어가서

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;}



그럼 다음과 같이 추천 버튼이 좌 우로 정렬합니다.


그리고 블로거 뉴스와 믹시 그리고 카테고리의 다른 글 보기 옵션을 사용하시는 경우

 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;}

다음을 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:block;float:right;clear:both;width:350px !important;}
div.blogger-news-widget embed {float:left;}
플러그 인의 올블릿 설정을 가셔서

하단 올블릿의 크기를 350으로 적용해주시면

다음과 같이 정렬이 됩니다.

카테고리 다른글은 쓰시던 안쓰시던 상관없이

올블릿과 블로거 뉴스, 그리고 믹시가 깔끔하게 정렬됩니다.

 
위즈님꼐서 올블릿을 사용안하셔서 거기에 대한 정리는 없었는데

저의 경우 올블릿까지 사용해서

위즈님의 CSS를 조금 연구해서 불필요한 것을 지우고 올블릿을 수정한 결과입니다.

뭐 간단한 수정이지만

다른 블로그에는 올블로그까지 정리하는 것이 없기에 이렇게 올려봅니다.


그리고 마지막으로 올블로그와 카테고리 다른 글만 사용하는 경우

다음과 같이 하시면 됩니다.


우선 올블릿 관리에 들어가서

하단 올블로그 폭을 350으로 하고 저장을 하십니다.

그런뒤 사용으로 되어있는 설정을 미사용으로 바꿉니다.


그런 뒤 올블릿 관리 아래 있는

올블릿 고급 설정하러가기를 누릅니다.


그럼 올블릿 페이지로 가는데


사용하고자 하는 본문하단 올블릿의 코드를 누르시면

다음과 같이 나옵니다.

올블릿 소스 코드를 카피합니다.

그런 뒤


스킨의 HTML/CSS로 갑니다.

여기서 우선

아까 복사한 올블릿 코드를

HTML에 넣는데

어디 넣냐면
 ##_article_rep_desc_## 




라고 써진 뒤에 넣으시면 됩니다.


그런 뒤

CSS의 맨 마지막에는

 div.another_category {display:inline;float:right;clear:right;width:350px !important;}

라고만 넣습니다.

그렇게 하면!

다음처럼 정리가 됩니다.

올블릿과 카테고리만 쓰는 경우는 좀 다른 것보다 복잡합니다;




참고로 이 모든 것은 블로그의 본문 좌우폭이 700을 넘을때 가능합니다.

700보다 좁을 경우 짤리게 되니 유의하시기 바랍니다~



질문은 덧글로 남기시면 답변해드리겠습니다~



글이 마음에 들면 구독버튼을 눌러주세요
믹시 Add to Google 위자드닷컴에서 구독 Subscribe with Bloglines


Posted by love virus

댓글을 달아 주세요

  1. Favicon of http://wiz.pe.kr BlogIcon 위즈 2009/05/11 09:02  댓글주소  댓글쓰기 수정/삭제

    올블릿까지 정리를 하니까 더 깔끔하게 보이네요..^^ 즐거운 하루되세요.

  2. Favicon of http://kukuhome.tistory.com BlogIcon 쿠쿠양 2009/05/13 01:51  댓글주소  댓글쓰기 수정/삭제

    덕분에 추천버튼 정리 잘 했어요~^^ 감사합니다.추천 날려드리고 가요~

  3. Favicon of http://lucifer625.tistory.com BlogIcon 이름이동기 2009/05/14 10:09  댓글주소  댓글쓰기 수정/삭제

    저는 왼쪽에 다음애드클릭스 광고 오른쪽에 추천버튼을 하고 싶은데 애드클릭스가 쩌~밑으로 내려가서 안올라와요 ㅠ

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

    이렇게 꾸미고 싶은데 ... 어찌해야 할까요 ?? ㅠ

    • Favicon of http://mun317.tistory.com BlogIcon love virus 2009/05/14 11:47  댓글주소  수정/삭제

      안녕하세요 지금 말씀하신것처럼 해보고자 많은 노력을 하였는데요 되지않을 것 같습니다.;

      스킨에서 보면

      본문의 치환차 밖에 광고를 넣도록 되어있습니다.

      그리고 본문안에 추천버튼과 올블릿 그리고 카테고리 글 보기가 들어가있습니다.

      말씀대로 애드클릭스를 올려보고자 노력을 하였는데 올라가지 않네요;;

      올블릿을 수동설정으로 바꿔주시면

      다음 애드클릭스 아래에 올블릿을 넣는것은 되는데

      애드클릭스가 카테고리 글 더보기 위로는 안올라가네요;

      죄송합니다;

    • Favicon of http://lucifer625.tistory.com BlogIcon 이름이동기 2009/05/14 13:12  댓글주소  수정/삭제

      그럼 올블릿이라도 추천 버튼 왼쪽에 나란히 올릴수 있는 방법좀 ^^ㅎ

      써있는 방법으로 해도 안돼서말이죠...ㅠ

    • Favicon of http://mun317.tistory.com BlogIcon love virus 2009/05/14 15:41  댓글주소  수정/삭제

      제 생각에는 본문폭이 문제인듯싶습니다.

      본문폭이 700이라도 여백설정이 있으면 그 안쪽으로 글이 들어가기때문에ㅛ

      스킨의 화면출력에서 본문폭을 넓혀보시는게 좋을 것 같습니다.

    • Favicon of http://lucifer625.tistory.com BlogIcon 이름이동기 2009/05/14 15:48  댓글주소  수정/삭제

      휴..... 간신히 올렸어요 ^^ ㅎㅎㅎ
      다음 추천버튼은 사이즈를 줄였는데
      믹시 추천버튼은 사이즈가 안줄어드는가요 ??

    • Favicon of http://mun317.tistory.com BlogIcon love virus 2009/05/14 16:10  댓글주소  수정/삭제

      지금 어떻게 작업하신지 제 블로그가 아니라서 감이 잘 안오네요 음...믹시 블로그 버튼만 삐죽 튀어나와있네요;;

      CSS를 수정할때 믹시 블로그부분에도

      와이드를 350으로 잡아준 부분이 있는데

      그 부분을 건드신게 아닐까 생각됩니다.

      그것 아니시면..CSS에서 엉킨거같은데...

      달라진 부분이 없는지 확인해 보세요

    • Favicon of http://lucifer625.tistory.com BlogIcon 이름이동기 2009/05/14 17:11  댓글주소  수정/삭제

      힝... ㅠㅠ 되는데로 써야겠어요 ㅠ ㅋㅋㅋㅋㅋㅋ
      그래도 덕분에 깔끔해졌어요 ~ 랄랄라 ~ ㅋㅋ

    • Favicon of http://mun317.tistory.com BlogIcon love virus 2009/05/14 18:12  댓글주소  수정/삭제

      예;;그 제가 보고 연구하던 중에

      하나 더 발견했는데

      말끔하진 않더라구요

      글에 마지막에 보면 사진을 한장 추가해놨습니다.

      혹시 이방법이 궁금하시면 알려드릴꼐요;;

      믹스버튼만 줄이는 방법을 잘 모르겠네요;

    • Favicon of http://lucifer625.tistory.com BlogIcon 이름이동기 2009/05/16 23:24  댓글주소  수정/삭제

      오 ! 마지막에 추가로 올려주시고 너무너무 감사합니다 ㅠ
      궁금해요 궁금해요 ~

      그리고 지금 사용하시는거처럼 추천버튼 2개를 작게 만들어서 올블릿 옆에 붙이는것도 가능할까요 ?

    • Favicon of http://mun317.tistory.com BlogIcon love virus 2009/05/17 00:27  댓글주소  수정/삭제

      ㅋㅋ 다른 덧글에 대답해 드렸는데요

      정리해서 다시 올려드리겠습니다.

      말씀하신것처럼 다음버튼과 추천버튼을 공존시키기 위해서

      많은 연구를 했는데 만족스럽지는 않지만

      연구결과를 통해서 지금과같은 배치를 하게되었습니다.

      애드스마트까지 정리할 수 있다면 참 좋을텐데 그게 안되서 안타깝네요

      정리해서 올리면 바로 알려드리겠습니다.

  4. Favicon of http://toycamera.tistory.com BlogIcon maruzzang 2009/05/17 01:05  댓글주소  댓글쓰기 수정/삭제

    태그넣어봤는데요. 올블로그는 카테고리 하단에, 믹시와 다음은 상단에 존재합니다.
    뭐가 잘못 되었을까요?

  5. Favicon of http://toycamera.tistory.com BlogIcon maruzzang 2009/05/17 02:29  댓글주소  댓글쓰기 수정/삭제

    겨우 해결했습니다.~ 신경써주신 점 감사합니다.

  6. Favicon of http://blackjin.tistory.com BlogIcon 가람검 2009/05/31 06:41  댓글주소  댓글쓰기 수정/삭제

    왼쪽-원하는 글을 적을수 있는 글상자 / 다음 추천버튼
    이렇게 할려면 어떻게 해야 하나요?

    • Favicon of http://mun317.tistory.com BlogIcon love virus 2009/06/03 15:11  댓글주소  수정/삭제

      우선 답글이 늦어서 죄송합니다.
      정신이 없어서요
      원하는 글을 적는다는 말씀이 뭔지 잘 이해가 안가네요~
      좀 더 쉽게 설명해주시면 좋겠습니다.

  7. Favicon of http://blackjin.tistory.com BlogIcon 가람검 2009/06/04 08:55  댓글주소  댓글쓰기 수정/삭제

    그러니깐.. 러브 바이러스님은 왼쪽엔 추천버튼/오른쪽은 광고 잖아요?
    전 왼쪽엔 글적을수 있도록하고 글상자같은거 넣고 / 오른쪽엔 추천버튼 일케 만들고파요.

    • Favicon of http://mun317.tistory.com BlogIcon love virus 2009/06/05 10:19  댓글주소  수정/삭제

      <TABLE style="BORDER-COLLAPSE: collapse" cellSpacing=1 cellPadding=1 width=730 bgColor=#ffffff>
      <TBODY>
      <TR>
      <TD style="BORDER-RIGHT: #dadada 1px solid; BORDER-TOP: #dadada 1px solid; BORDER-LEFT: #dadada 1px solid; BORDER-BOTTOM: #dadada 1px solid" width="50%">하고 싶은 말</TD>
      <TD style="BORDER-RIGHT: #dadada 1px solid; BORDER-TOP: #dadada 1px solid; BORDER-LEFT: #dadada 1px solid; BORDER-BOTTOM: #dadada 1px solid" width="50%">var recombox = document.getElementsByTagName("embed");
      for (var i=0; i<recombox.length; i++) {
      if (recombox[i].getAttribute("src") && recombox[i].getAttribute("src").indexOf("http://api.v.daum.net/static/recombox1.swf") != "-1") {
      var recomdiv = recombox[i].parentNode;
      recomdiv.innerHTML = recomdiv.innerHTML.replace("recombox1.swf", "recombox3.swf").replace("400", "67");
      var param = recomdiv.parentNode.getElementsByTagName("param");
      for(var j=0; j<param.length; j++) {
      if (param[j].getAttribute("value").indexOf("mixup") != "-1") {
      param[j].parentNode.removeAttribute("align");
      recomdiv.appendChild(param[j].parentNode);
      }
      }
      MF_Recommend_Div.innerHTML = recomdiv.innerHTML;
      recomdiv.style.display = "none";
      }
      }
      MissFlash_Div.appendChild(MF_Recommend_Div);
      //]]>
      </script>
      </div></TD></TR></TBODY></TABLE>

    • Favicon of http://mun317.tistory.com BlogIcon love virus 2009/06/05 10:20  댓글주소  수정/삭제

      이렇게 원하시는 부분에 넣어보시면 될거같습니다.


      하고 싶은말이라고 적은 곳을 지우시고 원하시는 글을 적으시면 되구요

      왼쪽에는 다음 추천 뷰가 나올껍니다.

  8. Favicon of http://blackjin.tistory.com BlogIcon 가람검 2009/06/05 10:57  댓글주소  댓글쓰기 수정/삭제

    붙여 넣기 했는데... 근데
    오른쪽에 추천박스가 안나오고 var recombox = docu... 이게 그대로 출력되네요 ㅠㅠ
    혹시 플러그인으로 추천박스가 자동으로 나오게 한거랑 관계있나요?
    저기에 추천박스 들어가면 추천버튼이 2개나 되버리는데 ;;;

    음... 걍 이대로 사용해야겠어요. 답변 감사드리요 ㅠ.ㅠ

    • Favicon of http://mun317.tistory.com BlogIcon love virus 2009/06/05 23:03  댓글주소  수정/삭제

      죄송합니다;; 문제가 뭔지 저도 잘..

      마지막으로 위에 저것을 붙여 넣기 하시고

      마지막에 CSS에 이걸 한번 붙여 넣기 해보시는게 어떨지...

      .MF_Left_Float {float:left; margin-bottom:5px; }

      이래도 안되면;;저도 잘 모르겠어요;;;

      한번 해보시길 추천해드립니다.

  9. Favicon of http://reignman.tistory.com BlogIcon Reignman 2009/06/05 22:38  댓글주소  댓글쓰기 수정/삭제

    진짜 좋은 정보인거 같아요.
    덕분에 저도 나름 깔끔하게 정리했답니다 ^^
    만족스럽네요.
    제 블로그에도 소개할게요~

  10. Favicon of http://linalukas.tistory.com BlogIcon linalukas 2009/06/14 22:37  댓글주소  댓글쓰기 수정/삭제

    안녕하세요^^
    카테고리의 다른글...이것을 아예 안보이게 하려면 어떻게 해야하죠? 이것저것 살펴봐도 잘 모르겠네요--;

  11. Favicon of http://linalukas.tistory.com BlogIcon linalukas 2009/06/15 17:19  댓글주소  댓글쓰기 수정/삭제

    감사합니다. 그동안 html/css만 쳐다보고 있었네요...행복한 새로운 한주 되세요^^*

  12. Favicon of http://suzevi.tistory.com BlogIcon 쓰라린 수제비 2009/07/01 00:50  댓글주소  댓글쓰기 수정/삭제

    좋은정보 너무 감사드려요~~ 저같은 경우는 왼쪽에 추천버튼 오른쪽에 애드센스 광고를 넣으려고 하는데 어찌하면 좋을지 알려주시면 감사드리겠습니다

  13. Favicon of http://luckyjc.tistory.com BlogIcon 퍼진라면스 2009/08/22 23:20  댓글주소  댓글쓰기 수정/삭제

    감사합니다. 도움이 되었어요 ^^*

  14. Favicon of http://toyboies.tistory.com BlogIcon 라이제르 2009/12/23 16:13  댓글주소  댓글쓰기 수정/삭제

    이거 잘안되요.ㅠ.ㅠ 올블로그를 링크프라이스 블로그박스로 똑같이 할려고 180x200으로 설정 하고 님이 포스팅 한것처럼 똑같이 했거든요?
    근데 되긴 됬는데 밑에 쪼끄만 추천 버튼있잔아요?
    제 블로그가 그렇게 되있는데 그쪼끄만 추천버튼도 같이 올라오거든요?
    이거 어떻게 해야되나요?

  15. Favicon of http://ione2u.tistory.com BlogIcon 사짜 2010/03/15 17:30  댓글주소  댓글쓰기 수정/삭제

    감사합니다. 잘 적용했어요.
    이제껏 여기저기 다녀봐도 잘안돼서 포기하고 있었는데...

  16. Favicon of http://tasavi.tistory.com BlogIcon 타사비 2010/03/28 20:46  댓글주소  댓글쓰기 수정/삭제

    좋은 정보 감사합니다! 올려주신 글대로 따라했더니 올블로그까지 같이 정렬됐습니다^^
    덕분에 제 블로그 하단도 조금은 깔끔해졌네요. 감사합니다.

  17. 2010/04/17 13:10  댓글주소  댓글쓰기 수정/삭제

    비밀댓글입니다

  18. Favicon of http://nasil2.tistory.com BlogIcon 나실이 2010/05/06 21:59  댓글주소  댓글쓰기 수정/삭제

    안녕하세요 ~ 저는 블로그 하단에 카테고리의 다른 글 목록이 안뜨게 하고 싶은데..어떻게 해야하나요 ? 여기저기 다 찾아봐도 못찾겠네요 ㅠㅠ 혹시 알고 계시다면 답변 부탁드립니다 ~

  19. Favicon of http://windno.tistory.com BlogIcon 바람도없다 2010/05/15 20:43  댓글주소  댓글쓰기 수정/삭제

    카테리고가 너무 커서 믹시랑 다음뷰랑 안합쳐지는데어떻게 카테리고 크기 줄일수는없나요

  20. 2010/05/23 19:46  댓글주소  댓글쓰기 수정/삭제

    비밀댓글입니다

  21. Favicon of http://cherryboy.tistory.com BlogIcon Cherry™ 2011/02/20 15:44  댓글주소  댓글쓰기 수정/삭제

    다음 뷰 위에 다른 내용의 텍스트를 삽입하고자 할 때는 어떻게 해야 되는지요?