티스토리 블로그에서는 카테고리 글 더보기와 다음뷰, 믹시의 추천 위젯을 플러그인으로 쉽게 설정할 수 있게 제공하고 있습니다.
하지만 플러그인으로 모두 설정을 해보면 순서가 뒤죽박죽 원하는 순서로 배치할 수 없어요.
SNS 글 보내기가 가장 위에 위치하고 다음뷰 추천위젯, 카테고리 글 더보기, 믹시 추천위젯 순으로 배치되고 페이스북 좋아요 버튼은 그 중간에 들어가고 보기에 뭔가 어수선하게 되죠.

원하는 순서대로 정렬하기 위해서는 플러그인을 설정해제하고 스킨 탭에 있는 HTML/CSS 편집에서 직접 소스를 넣어줘야 합니다.

이번에는 다음뷰 추천위젯과 믹시 추천위젯, 그리고 카테고리 글 더보기의 위치를 변경하는 방법을 소개합니다.
우선 각각의 소스를 알아본 뒤 어디에 넣어주면 되는지 알아보도록 하죠.





다음뷰 추천위젯  

우선 플러그인의 Daum View에서 Veiw on 박스를 '표시하지 않음'으로 바꿔주세요.



다음뷰 추천위젯의 소스는 다음과 같습니다.

<center>
<object type="application/x-shockwave-flash" data="http://api.v.daum.net/static/recombox3.swf?nurl=http://본인 블로그 주소/[##_article_rep_id_##]" width="67" height="80">
<param name="movie" value="http://api.v.daum.net/static/recombox3.swf?nurl=http://본인 블로그 주소/[##_article_rep_id_##]" /></object>
</center>


위의 소스를 적용하면 이런 손가락만 나타나는 추천위젯의 형태로 적용됩니다.
그런데 다음뷰 추천위젯은 네가지의 크기로 제공되죠.
다른 크기의 추천위젯은 'recombox'부분과 너비, 높이 부분(width, height)을 바꿔주기만 하면 됩니다. 어떻게 수정하면 되는지 알아보죠.


가장 보편적인 이 형태의 추천위젯은 'recombox1' 입니다. 3을 1로 바꾸시면 되요.
그리고 너비와 높이 부분을 width="400" height="80" 이렇게 바꿔주시면 됩니다.


높이가 낮아진 이 형태는 'recombox2' 로 너비와 높이는 width="400" height="58" 로 적용해주시면 됩니다.


마지막으로 최근 추가된 글 중간중간에 넣기 좋은 이 위젯은 'recombox4' 로 너비와 높이는 width="82" height="21" 가 됩니다.





믹시 추천위젯  

다음뷰와 마찬가지로 우선 플러그인의 믹시에서 mixUP위젯을 표시안함으로 바꿔주세요.


믹시의 추천위젯 소스는 두가지 방법으로 적용시킬 수 있습니다.

우선 첫번째 방법!
믹시 홈페이지에서 로그인 하신후 상단의 마이믹시를 클릭하시면 왼쪽 하단에 믹스업위젯 이라는게 있습니다. 클릭해주세요.


아래 쪽에 위와 같은 부분이 보이실텐데요.
각 설정을 선택 하신 후 위의 코드를 그대로 따오시면 됩니다.

<script type='text/javascript'>document.write("<scr"+"ipt type='text/javascript' src='http://www.mixsh.com/widget/mixup/loader.js?muid=184371&guid=http://"+document.domain+"/[##_article_rep_id_##]&rdate="+escape("[##_article_rep_date_##]")+"&rawhtml=&skin=1&showhitcnt=1&platform=1'></scr"+"ipt>");</script>

이런 형태일꺼예요.
위의 숫자는 제 위젯의 고유번호입니다. 그대로 적용하시면 안되요~



두번째 방법.

                <div id="MissFlash_Div">       
                <div class="MF_Left_Float" style="height:89px; margin-left:0;">
                <object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' width='399' height='89' align='left' style="border-bottom: 1px solid #ffffff; border-right: 1px solid #CFD4DA;">
                <param name='allowScriptAccess' value='always'/>
<param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=숫자&guid=http://본인 블로그 주소/[##_article_rep_id_##]&rdate=[##_article_rep_date_##]&showhitcnt=1&platform=2'/>
                <param name='quality' value='high'/>
                <param name='wmode' value='window'/>
 <embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=숫자&guid=http://본인 블로그 주소/[##_article_rep_id_##]&rdate=[##_article_rep_date_##]&showhitcnt=1&platform=2' quality='high' wmode='window' width='399' height='89' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
                </object>
                </div></div>

위의 소스를 그대로 붙여넣으시면 됩니다.
이때, 첫번째 방법에서 가져온 소스의 muid= 부분의 숫자를 넣어주고 블로그 주소를 넣어주셔야 되요.
결국 고유번호를 얻기 위해 믹시 홈페이지에서 소스를 따와야 하는거니 두번 작업하는게 되는거죠.


일반적으로 이런 기본적인 위젯을 적용하실 땐 첫번째 방법으로 충분합니다.
두번째 방법은 아래와 같은 믹스업 위젯을 다음뷰 추천위젯 중 'recombox3' 스타일과 같은 크기로 작게 만들 때 사용하게 됩니다.






카테고리 글 더보기  

카테고리 글 더보기는 소스를 두개 적용해 주셔야 해요.

<!-- 카테고리 다른글 위치 변경 소스1 시작 -->
<script type="text/javascript" language="javascript">
var MissFlash_Div_Num = 1;
</script>
<script type="text/javascript" language="javascript">
function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){
    // JavaScript function was developed by MissFlash (http://blog.missflash.com)
    var classElements = new Array();
    if(node == null) node = document;
    if(tag == null) tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    var j = 0;
    var MissFlash_Check = 1;
    var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num;
    for(i=0; i<elsLen; i++){
        if(pattern.test(els[i].className)){
            classElements[j] = els[i];
            j++;
            if(els[i].id.indexOf("MF_Reference") == -1){
                var result = els[i].innerHTML;
                els[i].style.display = "none";        }        }    }
    return result; }
</script>
<!-- 카테고리 다른글 위치 변경 소스1 끝 -->

<!-- 카테고리 다른글 위치 변경 소스 2 시작 -->
<div id="MF_Reference" class="another_category another_category_color_black"></div>
<script type="text/javascript">
//<![CDATA[
// Created by MissFlash(http://blog.missflash.com)
var MF_Reference = document.getElementById('MF_Reference');
MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num);
MF_Reference.className = "another_category another_category_color_black";
var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category");
MF_Reference.innerHTML = ref_source;
MissFlash_Div_Num += 1;
//]]>
</script>
<!-- 카테고리 다른글 위치 변경 소스 2 끝 -->

우선 '카테고리 다른글 위치 변경 소스 1' 을 HTML/CSS편집의 'skin.html' 에서 처음부분 <title>바로 아래에 넣어주세요.


여기서 잠깐!
카테고리 글 더보기 플러그인을 보면 색상별로 제공하고 있죠.
회색, 빨간색, 파란색, 초록색, 보라색을 선택할 수 있는데요.
위의 두번째 소스에서 제가 붉은 글씨로 표시한 두 곳을 각각 gray, red, blue, green, violet 으로 바꿔주시면 각 색상으로 적용하실 수 있어요. 전 검은색으로 하고 싶어서 목록에 없는 black 으로 적용해보았는데 되더라구요 +_+



위처럼 과감하게 넣어주세요 ㅎ

그리고 '카테고리 다른글 위치 변경 소스 2'는 다음뷰 추천위젯과 믹시 추천위젯 소스와 함께 잠시 가지고 계세요 :)





적용해 보자!  

이제 다음뷰 추천위젯, 믹시 추천위젯, 카테고리 글 더보기 의 소스를 모두 알았으니 본문 하단에 직접 적용하기만 하면 됩니다.
본문 하단에 적용하기 위해선 skin.html 에서 본문부분이 어딘지 알아야겠죠?



<div class="article">
[# #_article_rep_desc_# #]

이 부분에 소스를 넣어주세요.

</div>

'article_rep_desc'이 본문 부분이예요 이 부분을 찾으신 후 바로 아래에 지금까지 알아 놓은 다음뷰 추천위젯과 믹시 추천위젯, '카테고리 다른글 위치 변경 소스 2' 의 소스를 원하시는 순서대로 넣어주시면 됩니다.



스킨html 과 스타일시트를 수정하실 때에는 혹시 모를 사고에 대비해서 항상 미리 스킨 저장을 해놓으시는 센스!!! 잊지마세요. ^^



다음뷰 추천위젯, 믹시 추천위젯, 카테고리 글 더보기의 소스를 알고 스킨에 입력하는 것까지 알아봤습니다.
급하게 정리해서 설명이 부족한 부분이 있을텐데요. 부족한 부분이나 잘못된 부분 지적해주시면 바로바로 수정하도록 하겠습니다 :)

추천위젯 작게 만들어서 일렬로 정렬하는 방법, 카테고리 글 더보기에서 날짜 지우고 그림을 넣는 방법, 페이스북 좋아요 버튼, 트위터 리트윗 버튼 등 포스팅 할 것들이 많네요. 으쌰으쌰!




신고

댓글을 달아 주세요

  1. BlogIcon 포스티 2011.01.08 17:43 신고  Addr  Edit/Del  Reply

    결국 새로 쓰셨군요 !!

    더 쉽게 된것같아요 ㅎㅎ

    • BlogIcon 그냥 꼬꼬마 2011.01.08 18:07 신고  Addr  Edit/Del

      기존 링크했던 블로그 사라진거 알려주셔서 급하게 썼어요 @_@ㅋ
      너무 길고 복잡하진 않은가 걱정했는데, 다행이예요 ^^

  2. BlogIcon 소노라 2011.01.08 18:14 신고  Addr  Edit/Del  Reply

    좋은 팁 감사합니다. ^^

  3. BlogIcon 白野 2011.01.08 18:36 신고  Addr  Edit/Del  Reply

    굿정보 !! 굿잡 햇네요 ㅎ

  4. BlogIcon 달콩이 (행복한 블로그) 2011.01.08 19:36 신고  Addr  Edit/Del  Reply

    꼬꼬마님 유용한 정보네요 ㅎㅎ
    오늘 하루 행복하게 보내시구요~
    저녁식사 맛있게 드세요 ^^

  5. BlogIcon 재아 2011.01.08 21:01 신고  Addr  Edit/Del  Reply

    별 볼일 있긴 있네요^^;// 본문 중간에 필요하면 넣어야겠습니다.. 정리를 잘 해주신듯

  6. BlogIcon NearU 2011.01.09 15:35 신고  Addr  Edit/Del  Reply

    저도 이거 쓰고싶었는데.. 따로 찾아볼 시간이 안나서 못하고 있었는데..ㅋㅋ
    배우고 가네요^^ 서식에 등록해놓고 써봐야겠네요 ㅋㅋ
    좋은정보감사합니다~

    • BlogIcon 그냥 꼬꼬마 2011.01.10 17:17 신고  Addr  Edit/Del

      별일없이산다 님만의 방법으로, 더 구체적인? 정보와 편리한 정보를 추가해서 다시 한번 정리해보세요 ^^
      더 멋진 지식을 공유할 수 있을 것 같습니다 :)

  7. BlogIcon 맥컬리™ 2011.01.10 16:18 신고  Addr  Edit/Del  Reply

    깔끔하게 정리 해놓았네요.
    저도 꼬꼬마님 설명대로 해놔야겠어요.
    다음뷰 한달정지 먹은게 드뎌 풀렸거든요 ㅋㅋㅋ 근디 지금 작업 좀 하려니 믹시가 또 말썽이네요.
    시간봐서 요대로 따라 해 봐야겠어요. 도움되는 정보 감솸다... ^^;

    • BlogIcon 그냥 꼬꼬마 2011.01.10 17:18 신고  Addr  Edit/Del

      맥컬리님 블로그에 다음뷰 위젯이 사라지고 믹시만 남아있어서 의아했었는데 그런 일이 있었군요 @_@
      왜 정지 먹으셨던건가요 킁;;

    • BlogIcon 맥컬리™ 2011.01.10 19:08 신고  Addr  Edit/Del

      다음뷰에 글 송고할때는
      더욱 신중히 해야겠다고 다짐했심더...
      꼬꼬마님도 지난번 올렸던 아이유 신곡같은경우~
      조심하셔야 함다...
      음원을 올리거나 유튜브에 올라온 뮤직비디오 등등
      이런것에는 몽땅 정지를 먹이네요...
      전 제가 좋아하는 음악을 따로 카테고리 만들어서 관리했었는데,
      그 부분도 모두 삭제했어요. 삭제하라는 경고문이 날아왔었거든요.. ㅋㅋ
      7일경고, 30일경고 이젠 기회가 한번 남았어요.
      그래서 많이 신중하려구요. 다음뷰 송고할땐요..
      꼬꼬마님 블로그는 별로 위반사항은 없지만,
      음악파일 특히나 조심하세요...

  8. BlogIcon 새라새 2011.01.10 18:52 신고  Addr  Edit/Del  Reply

    정리를 잘해주셨네요..
    블로그 처음할때 공생했던 기억이 ㅋ

    • BlogIcon 그냥 꼬꼬마 2011.01.10 22:58 신고  Addr  Edit/Del

      저도 처음 블로그 스킨 수정하고 본문 정리하는데 정말 꽤나 애먹었던 기억이 ㅋ
      그래서 블로그 이제 접하는 분들에게 도움이 될만한 스킨 수정 방법 계속 정리하려구요 ^^

  9. BlogIcon ☆북극곰☆ 2011.01.11 14:10 신고  Addr  Edit/Del  Reply

    호오~~ 저는 그냥 지저분~~ 하게 밑으로 쭈욱 늘여놓곤 했었는데..
    다음뷰 추천박스 크기 줄이는 것은 확실히 화악~~~ 느낌오네요~ ^^ ㅋ

    • BlogIcon 그냥 꼬꼬마 2011.01.11 20:52 신고  Addr  Edit/Del

      저도 처음 본문 하단에 추천위젯 적용할 때는 아무렇게나 우선 넣어놓고 봤었는데, 볼 때마다 별로더라구요 @_@ㅋ
      그래서 하나하나 정리를 :D

  10. BlogIcon 닉쑤 2011.01.12 13:00 신고  Addr  Edit/Del  Reply

    오.. 깔끔하게 정리하셨네요. 저는 귀찮아서 언제할지.. ㅎ

  11. BlogIcon 오중호랑이 2011.01.16 16:39 신고  Addr  Edit/Del  Reply

    도움이 많이 됐습니다.^^ 다음지도 박스도 비슷하게 옮기는거 같은데 어렵네요

  12. BlogIcon 정천식 2011.02.01 12:27 신고  Addr  Edit/Del  Reply

    꼭 필요한 정보였는데, 감사합니다.

  13. BlogIcon Zetetic 2011.04.02 19:34 신고  Addr  Edit/Del  Reply

    믹스업 작은 크기의 위젯, 윽 저는 똑같이 했는데, 왜 안되는 걸까요...

  14. BlogIcon fver1004 2011.05.25 22:32 신고  Addr  Edit/Del  Reply

    잘됩니다! 소스2번째는 색만 바꾸는건줄알고 안넣어도 될줄 알았는데 꼭 넣어야되는군요~

  15. BlogIcon 기신평 2011.06.30 17:35 신고  Addr  Edit/Del  Reply

    덕분에 많은 도움 얻고 갑니다

    근데 댓글 갯수 색 변경은 어떻게 하는거에요?

  16. BlogIcon replica watches uk 2011.08.06 17:51 신고  Addr  Edit/Del  Reply

    너 정말 정신 을 보 였 다.

  17. BlogIcon Hombre Timberland 2012.12.24 12:57 신고  Addr  Edit/Del  Reply

    selon un porte-parole de la gendarmerie, http://www.timberlandbaratas.com Mujer Timberland.n'a pas encore été retrouvée vendredi, http://www.timberlandbaratas.com timberland españa,The slogans suggest very well that all the domestic carriers want to connect to the customer emotionally and through these slogans the airlines are convincing customers that flying is a more leisurely and convenient way of traveling than any other thing it is a challenging thing to retain the customer base, http://www.timberlandbaratas.com outlet timberland. and in a negotiating position, http://www.timberlandbaratas.com Timberland.
    Related articles:


    http://808866.72110.20la.com.cn/bbs/viewthread.php?tid=1864640&extra= http://808866.72110.20la.com.cn/bbs/viewthread.php?tid=1864640&extra=

    http://dtssoft.vicp.net/plus/view.php?aid=66117 http://dtssoft.vicp.net/plus/view.php?aid=66117

    http://www.0517edu.com/plus/view.php?aid=155281 http://www.0517edu.com/plus/view.php?aid=155281

  18. BlogIcon Software ERP Indonesia 2013.01.19 18:09 신고  Addr  Edit/Del  Reply

    레뷰에 이런 기능이 있었군요.
    좋은 정보 감사합니다.

티스토리 툴바