제 블로그 사이드바 상단에 마이믹시 위젯을 설치했습니다. 아직은 많은 기능을 포함하고있는 위젯이 아니지만 조만간 mixUP 위젯과 합쳐진다고 하니 기대해도 좋을 것 같습니다.

8월 1일 마이믹시 위젯이 오픈되었지만 아직 많은분들이 모르시는 것 같아서 소개해 드리고자 포스팅합니다. 그리고 지금 위젯 달았어요! EVENT 를 하고 있어서 겸사겸사 믹시 메인에 제 블로그를 소개하고자 포스팅합니다.


현재 제 믹시를 듣고 계시는 블로거님들이시고, 이 분들에 의해 마이믹시 위젯이 생겼다는 것을 알게 되었습니다. 이 글로서 감사의 말을 남깁니다.

 위젯 달았어요! EVENT 참여방법
 


믹시사이트 우측상단을 보면 위와같은 것이 있습니다. 빨간네모박스 부분을 클릭하여 mixsh inside 에 접속하여 포스팅한 글을 트랙백으로 보내면 됩니다.
이벤트에 상금같은 것은 없지만 자신의 블로그가 위의 그림처럼 믹시 메인에 소개되는 것 입니다.

야이노마

» Contact Me: yainoma00@gmail.com






제 블로그에 설정되어있는 추천 위젯 + 카테고리 더 보기를 합친 모습입니다. 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/[##_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=15160&guid=http://pangsan.tistory.com/[##_article_rep_id_##]&rdate=[##_article_rep_date_##]&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




1