믹시 다음뷰 추천버튼과 카테고리 더보기 글 정리하는 법

demun
블로그/블로그팁
2010. 4. 20. 09:00

이전에 스킨을 변경하기전에 메타사이트 추천 버튼 정리하는 법을 쓰기도하고 적용도 하였습니다. 이 팁은 검색을 하면 많이 나옵니다.
이번에 스킨을 변경하면서 새로 적용을 하려하니 안되서 정리를 해봅니다.

추천버튼과 카테고리 더보기글을 정리하면서 몇가지 주안점을 둔 사항이 있습니다.

다양한 브라우져 호환성을 고려해서 정리하기.
필요하지 않은 메타사이트 버튼은 제외하고 기본적으로 제공하는 믹시, 다음뷰 ,
카테고리 더보기 글만 적용하였습니다.

기존의 글을 참고하시면 더욱 좋습니다.
정리하면서 한가지 먼저 생각해두셔야 할것이 있습니다. 본인의 스킨의 너비입니다. 저도 본문 너비를 넓게 만들어서(700px) 될줄 알았는데 더 넓어야 보기에 좋습니다.

즉,
정리하면 이렇습니다. 스킨의 너비가 700px이상되면 위즈군님처럼 하는것이 좋고 , 너비가 작으면 저처럼 추천버튼을 작게하는것이 보기에 좋습니다.

위즈군님 방법(넓은 스킨) => http://wiz.pe.kr/544
MissFlash님 방법(좁은 스킨) => http://blog.missflash.com/543

물론 꼭 이런것은 아니지만 제가 해보니 이 방법이 좋습니다. 그리고 무엇보다 보기에 좋아야 한다는 점입니다.
본문 너비가 넓은 분은 위즈군님의 방법으로 하면 되고 방법도 간단합니다.

본문 너비가 넓은 분

아래 소스를 스킨편집에 css창에 아무곳에나 넣어두면 됩니다. 코드의 편의를 위해 맨아래 보기좋게 삽입하는것이 좋겠죠.


/* 믹시,  다음뷰, 카테고리 더보기 */
div.blogger-news-widget {
	display:inline;
	float:right;
	clear:both;
	text-align:left;
	width:350px !important;
	overflow:hidden !important;
	margin-top:10px;
	border-right:1px solid #c3c9e0;
}
div.mixup_widget {
	display:inline;
	float:right;
	clear:both;
	width:350px !important;
}
div.another_category {
	clear:none;
	width:350px !important;
}
div.another_category tr {
	line-height:15px;
	height:15px;
}
div.blogger-news-widget embed {
	float:left;
}

그럼 아래처럼 나옵니다.

본문 너비가 작은 분

MissFlash 님 방법은 위의 주소에서 알려드린것과 같습니다. 혹시 안되는분은 블로그를 방문해보세요. 2010-04-19 현재 사용가능합니다.
아래 소스를 html창에서 <head> 와 </head> 사이에 넣습니다. 변경없이 그냥 삽입하면 됩니다.


<!-- 카테고리 더보기 소스 -->
<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>
<!--//카테고리 더보기 소스-->

아래 소스는 html 의 본문 코드( article_rep_desc ) 아래에 넣어주시면 됩니다.
아래 소스중에서 <> 는 [] 로 변경해줘야 합니다.
100298 은 본인의 믹시의 번호로 변경해줘야 합니다. 나머지는 그래도 사용하시면 됩니다. 참고로 믹시버튼이 다음버튼보다 커서 저는 height 79 를 88로 키워 줬습니다.

믹시번호 알기 => http://mixsh.com/widget/mixup/index.html


<!-- 다음  믹시 버튼 정렬 -->
<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='88' 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=100298&guid=http://"+document.domain+"/[#\#_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=100298&guid=http://"+document.domain+"/[#\#_article_rep_id_##]&rdate=[#\#_article_rep_date_##]&showhitcnt=1&platform=2' quality='high' wmode='window' width='73' height='88' allowScriptAccess='always' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>
		</object>
	</div>
		<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>
<!--//소스 끝-->

그다음 css창에서 다듬어주면 됩니다. 저의 코드를 오픈할테니 참고하세요. 약간씩 틀릴수도 있고하니 참고하시고 다듬으세요.
저의경우 믹시버튼과 다음뷰버튼을 margin값으로 위아래로 정렬했습니다.


/* 다음 믹시버튼 css */
.MF_Left_Float {
    float:left; 
    width:76px; 
    margin-top:10px;
}
.MF_Right_Float {
	float:left; 
	margin-left:-72px; /*믹시버튼의 너비만큼을 지정해주고 위아래로 정렬하기 위함입니다.*/
	margin-top:110px;
}

div.another_category {
	clear:none;
	width:570px !important; /*본인의 스킨너비에 따라 수정해야 합니다.*/
	margin-left:90px; 
}
div.another_category tr {
	line-height:15px;
	height:15px;
}
div.blogger-news-widget embed {
	float:left;
}

이제 완료가 됐습니다.
크롬 , 파이어폭스 , IE 6에서도 잘 보이게 됐습니다. 이넘의 IE 6 이 항상 말썽이에요. 이넘 때문에 이방법을 택한 이유도 없지 안하 있습니다.^^
각 브라우져에서 보여지는 이미지를 참고하세요.

개 개

demun(대문블로그)