How to create nested category list in blogger



In the default label widget of blogger, we can get a list or cloud to show labels (Categories; Tags). However the default label widget is not really good for huge number of categories. Because they take a lot of space in the webpage. Therefore we need to design it to show nested categories. We cannot achieve this with blogger's template language. Therefore, we have to use HTML/CSS/Javascript.

There are 2 ways to achieve it.

First way

First one is using HTML tags. Inserting <details> and <summary> to the label widget with Javascript code.

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>


It needs to be placed under the </b:section> tag of where the label widgets are. It has been tested with the label widget version = 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;}

This CSS code is written for my blog design, so it needs modification before you put it in your blog theme.

Second way

The second one is using DOM event 'onclick', we insert event attribute to the tags to hide/show the list.

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>

It needs to be placed under the </b:section> tag of where the label widgets are. It has been tested with the label widget version = 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;}


This CSS code is written for my blog design, so it needs modification before you put it in your blog theme.

No comments:

Post a Comment