티스토리에서 카테고리 드롭다운 형태로 변신 시키기
작업하기전, 카테고리는 리스트형으로 선택해야 함. [##_category_list_##] <-으로..(ul태그로 출력하는...)
첫째, 티스토리에서 사용하는 스킨의 편집모드에서 아래 스크립트를 <head>와</head>사이에 넣습니다.
<script type="text/javascript">
// 티스토리용 카테고리 -> 드롭다운 형태로 변신 시키기
function categoryConvert(id){
var getHtml = '[##_category_list_##]';
getHtml = getHtml.replace(new RegExp("<ul>", "gi"), "");
getHtml = getHtml.replace(new RegExp("</ul>", "gi"), "");
getHtml = getHtml.replace(new RegExp("</li>", "gi"), "");
getHtml = getHtml.replace(new RegExp("</a>", "gi"), "");
getHtml = getHtml.replace(new RegExp("<li class=\"(.*)\"><a(.*)", "gi"), "<li><a class=\"selected\""+"$2");
var getSelect = "";
var tmpSplitA = "";
var tmpSplitB = "";
var subLine = "";
var getSelected = "";
var regSplit = getHtml.split("<li>");
var regLink = new RegExp('<a(.*)href="(.*)">(.*) <span.*', 'i');
var regTitle = new RegExp('<a[^>]*>(.*) <span .*?>', 'i');
var regCnt = new RegExp('<span class="c_cnt">(.*)</span>', 'i');
var selectStart = "<select id=\"s_Category\" onchange=\"location.href=''+this.value;\">\n";
var selectEnd = '</select>\n';
for(var i=1; i<regSplit.length; i++){
getLink = regLink.exec(regSplit[i]);
getTitle = regTitle.exec(regSplit[i]);
getCnt = regCnt.exec(regSplit[i]);
tmpSplitA = regSplit[2].split("/");
tmpSplitB = regSplit[i].split("/");
getSelected = getLink[1].replace(" ","").length;
if(getSelected != 0) getSelected = " selected";
if(tmpSplitA.length < tmpSplitB.length){subLine = " - ";}else{subLine=""};
getSelect = getSelect + '\t<option value="' + getLink[2] + '" '+getSelected+'>' + subLine + getTitle[1] + ' ' + getCnt[1] + '</option>\n';
}
return document.getElementById(id).innerHTML = selectStart + getSelect + selectEnd;
}
</script>
둘째, 편집중인 스킨에서 '[##_category_list_##]'과 아래 태그코드로 대체함.
<div id="CategorySelectbox"><script type="text/javascript">categoryConvert("CategorySelectbox");</script></div>
위 예제,
<s_sidebar_element>
<!-- 카테고리 모듈 -->
<div class="category">
<h3>카테고리</h3>
<!-- [# #_category_list_# #] -->
<div id="CategorySelectbox"><script type="text/javascript">categoryConvert("CategorySelectbox");</script></div>
</div>
</s_sidebar_element>
- 예제 블로그 : http://www.jparker.co.kr/blog/
- 드롭다운 메뉴의 가로길이 또는 스타일을 조정하려면, 사용스킨의 css편집에서 아래와 같이 추가하여 조절하시면 됩니다.
#s_Category{
width:180px;
color:#777;
font:9pt tahoma;
}