믹시 추천버튼 '믹스업 위젯'을 다음뷰와 같은 크기로 만들어보자!


본문 하단의 추천위젯을 정리할 때면 많은 고민을 하게 됩니다.
추천버튼을 어떻게 하면 더 깔끔하고 블로그에 어울리도록 만들 수 있을까.
블로그를 운영하는 분이라면 누구나 해봄직한 고민인데요.

다음뷰 추천 위젯은 네가지의 크기로 제공되죠.
그 중 버튼 형태의 버튼을 많이 사용하고 계십니다.
바로 오른쪽과 같은 형태입니다.

그런데 믹스업 위젯은 한가지 밖에 제공하고 있지 않아요.
다음뷰 추천 위젯을 박스 형태로 사용할 때에는 거의 같은 크기이기 때문에 별 문제 없지만 다음뷰 추천 위젯을 위와 같은 버튼 형태로 사용한다면 믹스업 위젯도 같은 크기면 더 깔끔할 텐데라는 고민을 하게 됩니다.

그래서 여기에서는 아래와 같이 다음뷰 추천 위젯과 믹스업 위젯을 같은 크기, 같은 디자인으로 만들어 깔끔하게 정리할 수 있도록 하는 방법을 소개합니다.



바로 이런 모습을 가지게 됩니다.






첫번째! 우선 바탕 이미지입니다.


위의 이미지를 다운받아주세요.
이름을 small_mixup으로 확장자를 gif로 저장해주신 후에 티스토리 관리자 페이지에서 '스킨 탭'의 'HTML/CSS 편집'에 있는 '파일업로드'에 이미지를 등록해주세요.






두번째! 스킨html에 적용할 소스입니다.

잘 아시다시피 본문 부분인 [# #_article_rep_desc_# #] 을 찾아서 원하는 위치에 아래의 소스를 넣어주세요.


<CENTER>
<TABLE border=0 cellSpacing=0 borderColorLight=black borderColorDark=white cellPadding=0 width=140 height=80>
<TBODY>
<TR>

<TD vAlign=top width=67 align=left>

<DIV class=small_daumview>
<object type="application/x-shockwave-flash"
data="http://api.v.daum.net/static/recombox3.swf?nurl=http://kkid.tistory.com/[# #_article_rep_id_# #]"
width="67" height="80">
<param name="movie"
value="http://api.v.daum.net/static/recombox3.swf?nurl=http://kkid.tistory.com/[# #_article_rep_id_# #]" />
</object>
</DIV>

</TD>

<TD vAlign=top width=67 align=left>

<DIV class=small_mixsh_o>
<DIV class=small_mixsh_m>
<DIV class=small_mixsh_i>
<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=184371&amp;guid=http://kkid.tistory.com/
[# #_article_rep_id_# #]&amp;rdate=[# #_article_rep_date_# #]&amp;showhitcnt=1&amp;platform=2'/>                <param name='quality' value='high'/>
<param name='wmode' value='window'/> <embed src='http://www.mixsh.com/widget/mixup/loader.html?muid=184371&amp;guid=http://kkid.tistory.com/[# #_article_rep_id_# #]&amp;rdate=[# #_article_rep_date_# #]&amp;showhitcnt=1&amp;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></DIV>

</TD>

</TR></TBODY></TABLE></CENTER>

윗 부분은 다음뷰 추천 위젯의 코드이고 아래에 있는 코드가 믹스업 위젯 코드입니다.

다음뷰 추천 위젯 코드에서는 와인색으로 표시한 부분을 본인의 블로그 주소로만 변경해주시면 됩니다.

믹스업 위젯은 보라색으로 표기한 부분을 변경해주셔야 하는데요.
제 블로그 주소로 표시된 부분은 다음뷰와 마찬가지로 본인 블로그 주소로 변경해주시면 되고, 숫자 부분은 믹시 홈페이지에 들어가셔서 고유 번호를 얻어오셔야 해요.

믹시 홈페이지에서 로그인 후 '마이믹시'로 들어가시면 왼쪽 하단에 '믹스업 위젯' 이라는 버튼이 있어요.
클릭하시면 몇가지 선택사항을 선택하신 후 믹스업 위젯 코드를 얻을 수 있습니다.
저의 경우는 아래와 같은데요.


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

이 코드에서 빨갛게 표시된 부분이 바로 자신의 고유 번호입니다.
바로 변경해주세요 ^^

!!! [# #_블라_블라_# #] 부분은 # # 을 ## 으로 붙여서 변경해주시는 센스!!!






세번째! 스타일시트에 적용할 소스입니다.

아래의 소스를 style.css 부분 마지막에 넣어주세요.


/* 추천위젯 정리 */

.small_daumview {height:80px; width:67px; }

.small_mixsh_o {background: url(images/small_mixup.gif); margin-bottom:0px; padding:11px 9px; border:1px solid #dedede; height:56px; width: 47px; margin-left:5px;}
.small_mixsh_m {height:46px; width: 46px !important;overflow:hidden;}
.small_mixsh_i {margin:-12px 0px 0px -14px; height:58px; width: 60px !important;overflow:hidden;}

위의 소스에서 빨갛게 표시된 부분은 믹스업 위젯의 왼쪽 여백을 조절해줍니다.



스킨html 소스와 스타일시트 소스를 함께 적어놓은 메모장 파일입니다.
위의 소스가 잘 안 긁히시거나 ##부분을 수정하기 귀찮으신 분들은 아래의 메모장 파일을 다운받아주세요. :)







끝! 적용된 모습입니다.

위 이미지를 등록하시고, 소스를 수정하여 스킨html에 넣어주시고, 스타일시트의 소스까지 넣어주셨으면 아래와 같이 적용된 모습을 확인하실 수 있습니다.



잘 적용되었나요? :D



기존에 위 정보를 얻었던 스몰테일님의 블로그가 현재 닫혀있는 상태라 새로 정리해 보았습니다.
원래 블로그독, 다음뷰, 믹시 세 메타사이트의 추천버튼을 정리하였었는데 블로그독 서비스 종료를 앞두고 있어 블로그독은 제외하였습니다.

믹스업 위젯을 다음뷰 추천 위젯처럼 작게 만들어 다른 위젯들과 함께 원하시는 디자인으로 본문 하단을 꾸며보세요 ^^

급히 정리한다고 제대로 되었는지 모르겠네요.
잘 이해되지 않는 부분이나 궁금한 사항. 언제든지 댓글로 남겨주세요 :)



관련글

[Blog/Blog Tip] - 본문 하단 추천위젯, 카테고리글 더보기 정렬하기

[Blog/Blog Tip] - 추천버튼 정렬 가이드
(현재 제 블로그에 적용되어 있는 다음뷰는 작은 크기 그대로, 믹시는 다시 원래 크기로 적용하는데 도움이 될 글입니다,)
신고

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. BlogIcon B백야 2011.02.03 20:23 신고  Addr  Edit/Del  Reply

    좋은글 감사합니다 저도 이렇게 해보고싶었는데 헤헤 새해복많이 받으세요 ㅎ

    • BlogIcon 그냥 꼬꼬마 2011.02.03 22:21 신고  Addr  Edit/Del

      도움이 되었으면 좋겠습니다 ^^
      백야님도 새해 복 많이 받으세요 :D
      남은 연휴도 즐겁게 보내시구요 ㅎ

  3. BlogIcon 하얀잉크 2011.02.18 01:29 신고  Addr  Edit/Del  Reply

    저는 전에 블독까지 세 개 버튼을 작게 정렬했었는데 크롬에서 믹시가 오류나더라구요. 결국 다시 바꾼기억이 나네요.
    꼬꼬마 님 블로그도 테스트 해보니 크롬에서 다음뷰가 오류납니다. 수정하시길

    • BlogIcon 그냥 꼬꼬마 2011.02.18 02:09 신고  Addr  Edit/Del

      저도 크롬을 자주 사용해서 다음뷰 추천버튼 오류를 알고 있는데도 어떻게 바꿔야할지 방법을 몰라서 놔두고 있었어요 ㅠㅠ
      더 알아봐야겠습니다 @_@

    • BlogIcon 그냥 꼬꼬마 2011.02.18 03:10 신고  Addr  Edit/Del

      이번 기회에 좀 살펴보니까 너무나도 간단한 곳에서 제가 실수했었네요 @_@;;;
      이제 크롬에서도 다음뷰 추천버튼이 잘 작동되는 것으로 보입니다.
      일깨워주셔서 너무 너무 감사합니다 ^^

    • BlogIcon 하얀잉크 2011.02.18 03:44 신고  Addr  Edit/Del

      제가 일깨워주긴요.뭘 늦은시간까지 계시네요. 전 가르쳐주신좋아요 버튼과 씨름중입니다. 겨우 원하는 위치에 넣었는데 뷰애드가 밀렸네요 ㅠㅠ

  4. BlogIcon Nofate87 2011.02.18 12:57 신고  Addr  Edit/Del  Reply

    감사합니다. 그런데 믹시 버튼 안에 추천이 안보이는건 제가 어디 실수한걸까요? ㅎㅎ

    • BlogIcon 그냥 꼬꼬마 2011.02.18 15:16 신고  Addr  Edit/Del

      본문 안에 믹시버튼을 넣을 때와 스킨 html 상에서 믹시버튼을 넣을 때
      스킨 html 소스를 그대로 본문에 넣으면 위처럼 믹시버튼이 제대로 적용되지 않아 하얗게 나온답니다.
      스킨 html에 적용하시면 정상적인 모습으로 만나실 수 있을꺼예요 ^^

  5. BlogIcon Nofate87 2011.02.18 15:32 신고  Addr  Edit/Del  Reply

    님 감사합니다 ^^ 님은 천재 ㅎ

  6. BlogIcon Zetetic 2011.04.03 01:51 신고  Addr  Edit/Del  Reply

    정말 유용한 정보 감사합니다.~ 근데 저는 익스플로러9에서는 믹시위젯이 테두리만 보이는 현상이 나타납니다. 크롬에서는 뷰 추천위젯과 믹시업 위젯 둘다 잘 보이는데 말이죠...흑흑..도대체 뭐가 잘못 된 걸까요?... 쥔장님 설명과 똑같이 했는데 말이죠..

  7. BlogIcon tiffany jewelry 2011.09.23 01:20 신고  Addr  Edit/Del  Reply

    외계인이나 UFO는 있을 법 한데, 아직 제대로된 '확인'이나

  8. BlogIcon Flour Mill Machine 2011.11.16 10:14 신고  Addr  Edit/Del  Reply

    저도 이거 봤는데 이 곳 저곳에서 리뷰를 보고 간 상태라서
    그냥 추리물 보다는 코믹물이라 생각하고 봤더니 괜찮았습니다~

  9. BlogIcon wall decal 2012.01.20 14:57 신고  Addr  Edit/Del  Reply

    그것은 아주 좋은 건강한 체격을 가지고 유용하게 남성 또는 여성의 수 있습니다. 그것은 독성 방출에 도움이됩니다. 그런 다음 물의 수량은 충족해야합니다.

  10. BlogIcon Custom Car Items 2012.01.25 10:53 신고  Addr  Edit/Del  Reply

    하나가 바쁜 경우, 다른 기업이 권장되며, 그 반대도 마찬가지 수 있습니다. 하나는 원자재 부족하면, 다른 하나는 도움이 될 수 있습니다. 그들은 또한 각 회사의 대상이 될 한계뿐만 아니라, 고객의 조건에 동의 수 있습니다.

  11. BlogIcon unlock iphone 4s 2012.02.02 21:47 신고  Addr  Edit/Del  Reply

    다른 나라 한국 사람의 이민은 남한과 북한 사이의 충돌로 인해 발생합니다. 그들이 이동하는 것이 안전합니다. 그들은 전쟁에 참여하지 않습니다.

  12. BlogIcon Girl Games 2012.02.05 21:45 신고  Addr  Edit/Del  Reply

    그것은 당신이 이미 이익을 만들려는 얼마나 많은 비즈니스 거래 알게되면, 모든 것이 얼마나 명확 볼 수 주목할 것입니다. 아주 소수 기업이 목표를 계산하기 위해 시간을 내주지만, 성공적인 비즈니스는 항상 이루어집니다.

  13. BlogIcon webmaster forum 2012.02.08 08:11 신고  Addr  Edit/Del  Reply

    최근 서울은 북한의 공격을합니다.한국은 병역을 입력하기 위해 남성 시민를 원합니다. 그것은 차별없이 사람들의 모든 종류에 발생합니다.

  14. BlogIcon Fishing Lodges Alaska 2012.02.24 22:59 신고  Addr  Edit/Del  Reply

    마케팅 아이디어 성공에 매우 중요하지만, 나 또한 올바른 태도가 성공 그 자체를 결정하는 것입니다. 지금까지 많은 성공적인 사업가들과 일한 것은 매우 행운이다.

  15. BlogIcon outdoor furniture online 2012.02.26 01:29 신고  Addr  Edit/Del  Reply

    때때로, 사람들은 실제 책 형태로 지루합니다.실제 도서 종류는 서술로 가득 차 있습니다. 때로는, 향후 전망은 스토리가 매력 없다는 것을 믿습니다.

  16. BlogIcon Custom USB 2012.02.28 14:43 신고  Addr  Edit/Del  Reply

    VW는 아마 잘 알려진 자동차 브랜드 이름입니다. 어떤 자동차가 고급스러운 1입니다. 몇 사람이 그것을 살 능력이 있으므로 구입 가격은 아주 높다.

  17. BlogIcon a b testing 2012.03.27 19:35 신고  Addr  Edit/Del  Reply

    최신 Microsfot의 직장은 Microsoft 직장 2010입니다. 그것은 당신이 마이크로 소프트 직장 2007보다 그 작업에 효율성을 증가 제공합니다. 이것에도 불구하고, 일부 사람에서는 Microsoft 직장 2007를 사용하는 것을 선호하고 있습니다. 그들은 이미 그것을 사용하는 계정에

  18. BlogIcon free instrumentals 2012.04.13 01:44 신고  Addr  Edit/Del  Reply

    교육은 시험하는 좋은 방법입니다. 그것은 일반적으로 학교에서 발생합니다. 그것은 많은 지식을 가지고하는 옵션입니다.

  19. BlogIcon Download 2012.05.05 07:53 신고  Addr  Edit/Del  Reply

    나나 이트는 못 할 것 같아.5~6는먹야먹 거 같거요 .

  20. BlogIcon Software ERP Indonesia 2013.01.19 17:53 신고  Addr  Edit/Del  Reply

    축하드립니다.. 참말로 베스트리뷰에 뽑히면 좋겠슴다.
    어제 레뷰 돌아댕기다가 꼬꼬마님 글 발견해서 벌써 그슥해드렸어요. ㅋㅋ
    근데 경쟁이 꽤 치열할 듯 보이더라구요. 꼬꼬마님 베스트 뽑히면 저도 레뷰놀이 시작합니다. ㅎㅎㅎ
    남은 설 연휴도 맛있게 보내세요... ^^;

  21. BlogIcon Loan Consolidation 2013.02.01 20:28 신고  Addr  Edit/Del  Reply

    주어진 튜토리얼 주셔서 감사합니다

티스토리 툴바