팡상닷컴

다음뷰&믹시 추천버튼 + 카테고리 더보기 합치기

IT/Blog/2009. 5. 18. 11:10



제 블로그에 설정되어있는 추천 위젯 + 카테고리 더 보기를 합친 모습입니다. MissFlash 님의 블로그에서 [팁] 티스토리에서 믹시&블로거뉴스 추천 위젯, 카테고리 글 더보기 위치 설정하기!!!   의 포스팅을 보고 응용해서 만든 추천 위젯 + 카테고리 글 더보기 입니다. 소스 코드를 물어보는 블로거님들이 몇분 계서서 직접 포스팅하게 되었습니다.

 차려진 밥상에 숟가락 올리기
  

MissFlash  님의 포스팅을 보고 제대로 동작한다면 이제 응용만 하면 됩니다. 테이블을 만들어 행과 열을 구성하고 그안에 해당된 소스 코드만 삽입하면 작업이 완료됩니다.
만약 테이블을 만들지 않고 추천 위젯과 카테고리 글 더보기 를 배치할 경우 생각했던 위치에 만들어지지 않고 엉망진창이 되어서 테이블 안에 소스 코드를 삽입하는 방법을 사용했습니다.
테이블 하나를 이용해서 만들 수도 있지만, 저는 테이블 2개를 이용해서 UI 를 구성하였습니다.

1. 바깥 테이블 구성하기
      
 
FIELDSET STYLE 을 이용한 테두리 만들기

<fieldset style="border:3px solid #a1b0db;text-align:center;width:99%;height:260px;padding:0;margin:0 auto;position:relative;">
<legend align=center style="margin:0 0 0 10px;padding:0 3px; border:1px;color:#3A5FCD">포스팅이 유익하셨다면 추천해 주세요!</legend></fieldset>


border : 테두리의 두께
width : 가로
height : 높이

포스팅이 유익하셨다면 추천해 주세요!

좀더 세련된 테이블 구성을 위해 fieldset style, legend 을 이용해서 바깥 테두리에 해당 문구를 삽입 하였습니다.

2. 안 테이블 구성하기
      

TABLE 을 이용한 테이블 만들기1

<table width="98%" height="70%"  valign="bottom" border="1" cellpadding="0" >
    <tr>
         <td align=center width=80%>  카테고리 글 더보기 플로그인 삽입부분</td>
         <td align=center> 믹시 & 다음뷰 추천 위젯 삽입 부분</td>
    </tr>
</table>

border="0" 으로 할 경우 테이블 테두리가 나오지 않습니다.

카테고리 글 더보기 플로그인 삽입부분 믹시 & 다음뷰 추천 위젯 삽입 부분

TABLE 을 이용한 테이블 만들기2

<table width="98%" height="70%"  valign="bottom" border="1" cellpadding="0" >
    <tr>
         <td align=center width=80% rowspan=2>  카테고리 글 더보기 플로그인 삽입부분</td>
         <td align=center > 믹시 추천 위젯 삽입 부분</td>
    </tr>
         <td align=center >다음뷰 추천 위젯 삽입 부분</td>
    </tr>
</table>

rowspan=2 : 열을 2개 합칩니다.

카테고리 글 더보기 플로그인 삽입부분 믹시 추천 위젯 삽입 부분
다음뷰 추천 위젯 삽입 부분

TABLE 을 이용한 테이블 만들기3

 <table width="98%" height="70%"  valign="bottom" border="1" cellpadding="0" >
    <tr>
         <td align=center width=80% rowspan=2>  카테고리 글 더보기 플로그인 삽입부분</td>
         <td align=center > 믹시 추천 위젯 삽입 부분</td>
    </tr>
         <td align=center >다음뷰 추천 위젯 삽입 부분</td>
    </tr>
    </tr>
         <td align=center colspan=2>추천 엠블럼 삽입부분</td>
    </tr>
</table>

colspan=2 : 행을 2개 합칩니다.

카테고리 글 더보기 플로그인 삽입부분 믹시 추천 위젯 삽입 부분
다음뷰 추천 위젯 삽입 부분
추천 엠블럼 삽입부분

테이블 만들기1 과 테이블 만들기2 는 차이가 있는 것처럼 보이지만 테두리를 안보이게 하면 2개 모두 똑같은 모습을 보입니다. 그래서 저는 테이블 만들기1로 구성하였고, 믹시 & 다음뷰 추천 위젯의 공간을 작게 구성하여 위젯의 가로배치를 세로배치처럼 만들었습니다.

제가 만든 UI 에 추천 엠블럼 삽입을 하고 싶은 분은 테이블 만들기3 의 구성으로 추천 엠블럼 삽입부분에 소스크드를 입력하면 됩니다.

 최종 소스 코드
  

<fieldset style="border:3px solid #a1b0db;text-align:center;width:99%;height:260px;padding:0;margin:0 auto;position:relative;">
<legend align=center style="margin:0 0 0 10px;padding:0 3px; border:1px;color:#3A5FCD">포스팅이 유익하셨다면 추천해 주세요!</legend>

<table width="98%" height="70%"  valign="bottom" border="1" cellpadding="0" >
    <tr>
         <td align=center width=80%>
            <!-- 카테고리 글 더보기 플러그인 삽입 start -->
            <div id="MF_Reference" class="another_category another_category_color_gray"></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_gray";
            var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category");
            MF_Reference.innerHTML = ref_source;
            MissFlash_Div_Num += 1;
            //]]>
            </script>
            <!-- 카테고리 글 더보기 플러그인 삽입 end -->
             </td>
         <td align=center>
            <!-- 믹시 추천 위젯 삽입 start -->
            <div id="MissFlash_Div">
            <div class="MF_Left_Float" style="height:70px; margin-left:5px;">
                <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='73' 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=15160&guid=http://pangsan.tistory.com/&rdate=&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=15160&guid=http://pangsan.tistory.com/&rdate=&showhitcnt=1&platform=2' quality='high' wmode='window' width='73' height='79' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
                </object>
            </div>
            <!-- 믹시 추천 위젯 삽입 end -->
&nbsp;
            <!-- 다음뷰 추천 위젯 삽입 start -->
            <script type="text/javascript">
            //<![CDATA[
            // Created by MissFlash(http://blog.missflash.com)
            var MissFlash_Div = document.getElementById('MissFlash_Div');
            MissFlash_Div.setAttribute("id", "MissFlash_Div" + MissFlash_Div_Num);
            var MF_Recommend_ID = "MF_Recommend" + MissFlash_Div_Num;
            var MF_Recommend_Div = document.createElement('div');
            MF_Recommend_Div.setAttribute("id", MF_Recommend_ID);
            MF_Recommend_Div.className = "MF_Right_Float";
           
            // by chatii - http://chatii.tistory.com/52
            // last updated at 09/03/15
           
            // Modified by MissFlash(http://blog.missflash.com)
            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>
            <!-- 다음뷰 추천 위젯 삽입 end -->
            </td>
    </tr>
</table>
</fieldset>

MissFlash 님의 포스팅에 있는 소스코드를 변경하지 않고, 제가 만든 테이블 안의 해당 위치에 소스코드를 삽입하면 끝입니다. MissFlash 님의 포스팅을 완성해야 이 방법을 사용할 수 있다는 점 거듭 강조합니다.
저작자표시

야이노마

» Contact Me: yainoma00@gmail.com




티스토리툴바