도구

구글 블로그에서 티스토리처럼 폴더형 카테고리 만들기



구글 블로그의 기본 카테고리(라벨, 테마) 위젯에서는 목록 형식이나 클라우드 형식으로 카테고리를 나타낼 수 있습니다. 하지만 이 기본 카테고리는 많은 종류의 카테고리들을 전부 다루기에는 디자인적으로 힘듭니다. 게다가 카테고리들을 상위 카테고리를 이용해 구별할 수도 없습니다. 그렇기 때문에 중첩 카테고리를 만들어서, 레이아웃 페이지로부터 카테고리를 쉽게 더하기/삭제/편집을 할 수 있는 시스템을 만들 필요가 있습니다. 구글 블로그의 테마 스크립트로는 할 수 없는 작업이기 때문에 HTML/CSS/Javascript로 문제를 해결합니다.

구글 블로그에서 중첩 카테고리 시스템을 만드는 방법은 두가지가 있습니다.

첫번째 방법

첫번째 방법은 HTML 태그를 이용한 방법입니다. 자바스크립트 코드를 이용해 <details>와 <summary>를 라벨 위젯에 삽입합니다.

javascript.js

<script type='text/javascript'>
//<![CDATA[
    function fixLabels(){
        if(checkClass('Label')){
            var labels = document.getElementsByClassName('Label');
            for(var i = 0; i < labels.length; i++){
                var label = labels[i];
                label.innerHTML = '<details>' + label.innerHTML + '</details>';
                var title = label.getElementsByTagName('h2')[0];
                title.outerHTML = '<summary><span class="label-title">' + title.innerHTML  + '</span></summary>';
            }
        }
    }

    function checkClass(x){
        var theClass = document.getElementsByClassName(x);
        if (theClass.length > 0) {
            return true;
        }
        else{
            return false;   
        }
    }

    fixLabels();
//]]>
</script>


라벨 위젯이 있는 </b:section> 태그 아래에 넣어주시면 됩니다. 라벨 위젯 버젼 1로 테스트 했습니다.

style.css

.Label{
    padding: 0;
    margin: 0;
    overflow: auto;
    width: 100%;
}

.Label details {
    padding: 0;
    margin: 0;
    width: 100%;
}

.Label details summary {
    padding: 10px 0;
    margin: 0;
}

.Label details[open] summary {
    background-color: #eee;
}

.Label details summary:hover {
    cursor: pointer;
    background-color: #ccc;
}

.Label img{display: none;}

.Label a:hover{text-decoration:none;}

.Label ul{
    width: 100%;
    margin: 0;
    padding: 0;
}
.Label ul li {
    width: 100%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.Label ul li span { display: block; margin: 0; padding: 5px; height:100%; width:calc(100%-10px); background-color: #eee;}
.Label ul li a { display: block; margin: 0; padding: 5px; }
.Label ul li:hover { background-color: #ccc;}

위의 CSS 코드는 제 블로그에 맞추어서 쓰여진 것이므로 따로 여러분들의 블로그의 디자인에 맞추어서 스타일링하셔야 합니다.

두번째 방법

두번쨰 방법은 DOM 이벤트 중 하나인 'onclick'을 이용한 방법 입니다. 자바스크립트로 태그에 속성을 삽입해 라벨 리스트를 숨기기/보이기 합니다.

javascript.js

<script type='text/javascript'>
//<![CDATA[
    function OCLabels(n){
           if(checkClass('Label')){
            var labels = document.getElementsByClassName('Label');
            var labelContent = labels[n].getElementsByClassName('widget-content')[0].getElementsByTagName('ul')[0];
            var title = labels[n].getElementsByTagName('h2')[0];
            if (labelContent.style.display == 'block'){
                labelContent.style.display = 'none';
                title.style.backgroundColor = '#fff';
            } else {
                labelContent.style.display = 'block';
                title.style.backgroundColor = '#eee';
            }
        }
    }
   
    function fixLabels(){
        if(checkClass('Label')){
            var labels = document.getElementsByClassName('Label');
            for(var i = 0; i < labels.length; i++){
                var label = labels[i];
                var title = label.getElementsByTagName('h2')[0];
                title.setAttribute('onclick', 'OCLabels(' + i + ');');
            }
        }
    }

    function checkClass(x){
        var theClass = document.getElementsByClassName(x);
        if (theClass.length > 0) {
            return true;
        }
        else{
            return false;   
        }
    }

    fixLabels();
//]]>
</script>

라벨 위젯이 있는 </b:section> 태그 아래에 넣어주시면 됩니다. 라벨 위젯 버젼 1로 테스트 했습니다.

style.css

.Label{
    padding: 0;
    margin: 0;
    overflow: auto;
    width: 100%;
}

.Label h2:hover { background-color: #ccc; cursor: pointer;}

.Label img{display: none;}

.Label a:hover{text-decoration:none;}

.Label ul{
    display: none;
    width: 100%;
    margin: 0;
    padding: 0;
}
.Label ul li {
    width: 100%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
.Label ul li span { display: block; margin: 0; padding: 5px; height:100%; width:calc(100%-10px); background-color: #eee;}
.Label ul li a { display: block; margin: 0; padding: 5px; }
.Label ul li:hover { background-color: #ccc;}

위의 CSS 코드는 제 블로그에 맞추어서 쓰여진 것이므로 따로 여러분들의 블로그의 디자인에 맞추어서 스타일링하셔야 합니다.

Post Image
작성자: 트리지 (Victor Park)
분야: 게임/앱/웹 풀스택 개발, 음악 작곡/편곡, 비트박스, 비디오/이미지 제작, 3D 모델링
블로그: 트리지
문의: treezi1004@gmail.com

댓글 없음:

댓글 쓰기