이번 포스팅은 저번 포스팅에 소개되었던 여러가지 추천버튼 정렬 중 제가 적용하고 있는 정렬 형태에 대한 소개입니다.



이런 형태의 추천버튼을


바로 이렇게 만드는거죠.

그럼 출발!





추천위젯 작게 만들기  

다음뷰 추천위젯은 자체적으로 위에 보이는 형태로 지원하고 있죠.
하지만 블로그독과 믹시는 큰 위젯만 지원하고 있어요. (다음뷰랑 믹시는 크기라도 같은데 블로그독만 작아서 보기 좋지 않은 @_@ㅋ)

추천위젯 작게 만드는 소스는 전에 소개했던 아래의 블로그에서 구하시면 된답니다.

이에반(스몰테일)님의 스몰테일 블로그
http://smalltale.tistory.com/84

스몰테일님의 블로그가 닫혀버려 위 링크의 글을 현재 볼 수 없습니다.
그래서 제가 정리한 추천버튼을 작게 만드는 글을 링크합니다.(글을 수정하는 2011. 2. 1. 현재 블로그독 서비스는 곧 종료될 예정이므로 블로그독 추천 위젯은 제외하였습니다.

[Blog/Blog Tip] - 믹스업 위젯 작게 만들기 (다음뷰와 믹시 추천 위젯 같은 작은 크기로 정렬)





믹시 추천위젯 다시 크게 만들기  


이제 본론!
위 블로그에 가셔서 얻은 스킨html 소스와 스타일시트 소스를 모두 적용하시면 블로그독과 다음뷰, 믹시 모두 작은 위젯으로 모습이 변경되어 있을텐데요.
믹시 위젯만 다시 키워보도록 하죠.


<center>
<table border="0" width="138" height="80" cellspacing="0" bordercolordark="white" bordercolorlight="black" cellpadding="0">
<tr>

<!--블로그독 시작-->
<td width="67" valign="top" align="left">
블로그독 소스
</td>
<!--블로그독 끝-->

<!--다음뷰 시작-->
<td width="67" valign="top" align="left">
다음뷰 소스
</td>
<!--다음뷰 끝-->

<!--믹시 시작-->
<td width="67" valign="top" 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='67' height='79' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
    <param name='allowScriptAccess' value='always'/>
    <param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=151985&guid=http://smalltale.tistory.com/[# #_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=151985&guid=http://smalltale.tistory.com/[# #_article_rep_id_# #]&rdate=[# #_article_rep_date_# #]&showhitcnt=1&platform=2' quality='high' wmode='window' width='67' height='79' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
    </object>
</div></div></div>
</td>
<!--믹시 끝-->

</tr></table></center> 


적용하신 소스는 이런 모습일껍니다.
(블로그독과 다음뷰는 단순화시켰어요 ^^;;)

여기에서 붉은색 음영 표시된 부분을 우선 다음과 같이 수정해주세요.

<div id="MissFlash_Div">       
<div class="MF_Left_Float" style="height:89px; margin-left:0;">

푸른색 음영 표시된 부분은 자연스럽게 </div></div> 이렇게 바꿔주시면 되구요.





표 너비 맞추기  


이제 믹시 추천위젯은 다시 큰 사이즈로 돌아왔습니다.
그런데 브라우저에 따라 추천위젯들이 가운데로 정렬이 되지 않거나 잘려나오는 등 정렬이 되지 않은 상태로 보일 수가 있어요.

그렇다면 표 너비를 정리해주셔야 합니다.
위의 소스는 작게 만든 추천위젯의 사이즈에 맞춘 표 너비 이기 때문에 표 너비를 커진 믹시에 맞추어 수정만 해주시면 되요.


<center>
<table border="0" width="544" height="100" cellspacing="0" bordercolordark="white" bordercolorlight="black" cellpadding="0">
<tr>

<!--블로그독 시작-->
<td width="67">
블로그독 소스
</td>
<!--블로그독 끝-->

<!--다음뷰 시작-->
<td width="67">
다음뷰 소스
</td>
<!--다음뷰 끝-->

<!--믹시 시작-->
<td width="410">
<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='67' height='79' align='left' style="border-bottom: 1px solid #CFD4DA; border-right: 1px solid #CFD4DA;">
    <param name='allowScriptAccess' value='always'/>
    <param name='movie' value='http://www.mixsh.com/widget/mixup/loader.html?muid=151985&guid=http://smalltale.tistory.com/[# #_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=151985&guid=http://smalltale.tistory.com/[# #_article_rep_id_# #]&rdate=[# #_article_rep_date_# #]&showhitcnt=1&platform=2' quality='high' wmode='window' width='67' height='79' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
    </object>
</div></div>
</td>
<!--믹시 끝-->

</tr></table></center> 


소스에서 믹시에 해당되는 칸의 너비와 표 전체 너비를 수정해주시면 되요.

믹시 추천위젯의 정확한 너비는 측정해보지 않았는데 대략 410정도면 되더라구요. @_@ㅋ
그리고 다른추천위젯의 너비를 더해 표 전체의 너비까지 수정해주세요.
(믹시의 추천위젯이 작은 사이즈의 다음뷰, 블로그독 추천위젯에 비해 높이가 크기 때문에 높이도 80에서 100으로 수정해줍니다.)

이렇게 수정해주고 나면 블로그독과 다음뷰 사이의 여백과 다음뷰와 믹시 사이 여백이 다를 수 있습니다.
믹시가 스타일시트에 적용해놓은 소스 영향을 받지 않기 때문인데요.


.small_blogdoc_o {background: url(images/small_blogdoc.gif); margin-bottom:0px; padding:11px 9px; border:1px solid #dedede; height:56px; width: 47px;}
.small_blogdoc_m {height:44px; width: 44px !important;overflow:hidden; border:1px solid #dedede;}
.small_blogdoc_i {margin:-14px 0px 0px -16px; height:58px; width: 60px !important;overflow:hidden;}

.small_daumview {height:80px; width:67px; margin-left:4px;}

.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:4px;}
.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;}


믹시도 작은 사이즈일땐 위에서 보이는 것과 같이 다음뷰 왼쪽, 믹시 왼쪽에 4px의 바깥여백이 적용되었기 때문에 여백이 같았는데, 믹시 추천위젯은 다시 키워서 왼쪽 바깥여백이 적용되지 않죠.

그렇다면 좀 다르게 생각해서 꼼수?를 부려볼까요? :D

바로 표 안에 칸을 하나 더 만드는거예요.


<center>
<table border="0" width="544" height="100" cellspacing="0" bordercolordark="white" bordercolorlight="black" cellpadding="0">
<tr>

<!--블로그독 시작-->
<td width="67">
블로그독 소스
</td>
<!--블로그독 끝-->

<!--다음뷰 시작-->
<td width="67">
다음뷰 소스
</td>
<!--다음뷰 끝-->

<td width="4"></td>

<!--믹시 시작-->
<td width="410">
믹시 소스
</td>
<!--믹시 끝-->

</tr></table></center> 


짠!
이런식으로 다음뷰와 믹시 사이에 칸을 만들어놓으면 됩니다 :)

저는 스타일시트의 다음뷰 왼쪽 바깥여백을 10으로 잡은 다음에 블로그독과 다음뷰 사이에도 칸을 만들어 너비를 3으로 잡아주고 다음뷰와 믹시 사이에 만든 칸의 너비를 13으로 잡아주었습니다.
전체 표의 너비는 적당히 맞춰서 늘려주구요 ㅎ





현재 제가 적용시켜 놓은 추천위젯 정렬 방법을 소개해봤습니다.
이렇게 늘어놓으니 너무 내용이 복잡해 보이기만 하네요 ㅠㅠ
더 쉽고 깔끔하게 정리해야되는데,,, @_@;;
능력에 한계가 으윽

질문이 있으시다면 언제든 문의해주세요~
언제든 눈과 귀를 활짝 열고 대기하고 있겠습니다 :)
신고

댓글을 달아 주세요

  1. BlogIcon 맥컬리™ 2010.12.16 06:45 신고  Addr  Edit/Del  Reply

    제가 원하던 추천버튼 정렬 모양입니다.
    설명 괜찮게 하셨는데 전 내용대로 따라해봤더니
    화면이 이상하게 나와서 현재모양 그대로 놔두기로 했습니다.
    익스플로러 버전이 틀리면 모두 다르게 나오나 봅니다.
     
    덕분에 추천버튼 정렬하는 방법에 대해서 많이 배우게 됐습니다. ^^
    꼬꼬마님 글 참고하면, 틈틈이 응용해서 사용할 수 있을듯요...

    • BlogIcon 그냥 꼬꼬마 2010.12.16 18:28 신고  Addr  Edit/Del

      꼭 도움드리고 싶은데 제대로 적용이 안된다니 안타깝습니다 ㅠㅠ
      더 확실한 도움을 드릴 수 있는 방법을 찾아봐야겠어요.

  2. BlogIcon e마루 2010.12.16 07:43 신고  Addr  Edit/Del  Reply

    깔끔해서 보기 좋네요...^^* 그래도 전 다음뷰로의 유입이 믹시보다 많아서...
    꼬꼬마님 블로그는 언제봐도 깔끔~ 그 자체 같아요...부럽부럽~

    • BlogIcon 그냥 꼬꼬마 2010.12.16 18:30 신고  Addr  Edit/Del

      저는 다음뷰에서의 유입이 거의 없어요 흑흑ㅠㅋ
      다음뷰 사용자분들의 눈길을 확 사로잡는 포스팅 제목 정하는 기술을 늘려야 할까요? @_@ㅋ

    • BlogIcon e마루 2010.12.17 03:08 신고  Addr  Edit/Del

      저는 믹시에서 유입이 거의 없네요...ㅡㅜ
      꼬꼬마님은 믹시에서 많이 유입되시던데.. 이웃관리를 잘하셔서 그런가요^^?
      어쨌든 부럽습니다.

  3. BlogIcon 서관덕의 시간이 머문 작은공간™ 2010.12.16 17:16 신고  Addr  Edit/Del  Reply

    오~~ 제 블로그도 이렇게 추천버튼을 달까말까하는 중이였는데.. 덕분에 좋은 참고가 되었네요..^^

    좋은 정보 너무 감사합니다.^^

  4. BlogIcon 달콩이 (행복한 블로그) 2010.12.17 20:15 신고  Addr  Edit/Del  Reply

    좋은 정보 감사합니다 ^^
    다음에 한번ㅅ ㅣ도 해 봐야겠어요 ^^
    추운날씨 감기 조심하세요 ^^

    • BlogIcon 그냥 꼬꼬마 2010.12.18 10:59 신고  Addr  Edit/Del

      방문 감사합니다 :D
      요즘 정말 엄청 추워졌네요 @_@
      눈도 펑펑~
      후회없길님도 감기 조심하세요. 요즘 감기 정말 무섭더라구요.

  5. BlogIcon 닉쑤 2010.12.23 06:03 신고  Addr  Edit/Del  Reply

    둘다 좋아보이는데요~

    저도 하고픈데 귀찮아서.. ㅎ 언젠가 하고말테야 ㅎ

    • BlogIcon 그냥 꼬꼬마 2010.12.23 13:12 신고  Addr  Edit/Del

      ㅎㅎ 천천히 적용해보세요 :)
      저는 레뷰와 블코 버튼도 달고 싶어서 어제도 오늘도 내일도 고민, 연구 중이예요 @_@ㅋ

  6. BlogIcon 포스티 2011.01.08 14:41 신고  Addr  Edit/Del  Reply

    스몰테일님 블로그글 삭제하셨는지 글이 없네요..

  7. BlogIcon 체리보이 2011.02.01 17:48 신고  Addr  Edit/Del  Reply

    헉 링크하신 스몰테일 블로그 통째로 삭제되어 있네요

    • BlogIcon 그냥 꼬꼬마 2011.02.01 18:09 신고  Addr  Edit/Del

      네 ㅠ 그래서 믹시 부분 작게 만드는 소스 따로 정리해야 하는데 계속 미루고 있네요 @_@;;
      빨리 믹시 위젯 막게 만들기 포스팅해야겠어요

  8. BlogIcon Tiffany Jewellery 2012.05.28 14:08 신고  Addr  Edit/Del  Reply

    시대는 인물을 낳고 그 인물은 책을 쓰며 책은 또다시 세상을 바꿉니다. [세상이 주목한 책과 저자]에서 다루는 책과 저자는 어쩌면 그 자체로 인류의 역사이기도 합니다. 14세기 이후 시대는 ..

티스토리 툴바