Tampilkan Semua Label/Genre Dengan Filter Abjad

Menampilkan semua label/genre post dengan filter abjad atau sort abjad untuk blogger, fitur kali ini menggunakan javascript sedikit & mudah untuk dipasang diblog kamu

Tutorial ini hampir mirip dengan Recent Post Label filter abjad yang sudah saya buat sebelumnya, namun kali ini hanya menampilkan labelnya saja bukan tautan postnya.
Untuk lebih jelasnya kalian bisa lihat contoh atau pratinjau dibawah ini :

Demo

Cara menampilkan semua label/genre dengan filter abjad

1. Buka Blogger > tema > Edit HTML
2. Letakkan CSS berikut ke dalam <b:skin><![CDATA[/ .... ]]></b:skin> atau <style>...</style>

/* Show All Label with sort alphabet - arlethdesign
 =================================================== */
#labelshort{max-height:400px;overflow:auto}
#labelshort ul{list-style:none;padding:0;margin:auto}
#labelshort ul li{display:block;padding:0 5px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#labelshort ul li a{display:block;padding:5px;background:#222;color:#fff;border-radius:2px;text-decoration:none;text-overflow:ellipsis}
#labelshort ul li a:hover{background:#333}



3. Jika sudah save tema.
4. Kemudian Buka Tata Letak > Add Widget > HTML/Javascript
5. Tambahkan html & javascript berikut kedalam widget tersebut

<script>
    function labelx(json){
        var label = json.feed.category;
        var labelc=[];
        document.write('<ul>');
        for (i=0; i<label.length; i++){
          labelc[i] = "<li><a href='/search/label/" + label[i].term + "?&max-results=8'>" + label[i].term + "</a></li>"; 
        }
         document.write(labelc.sort().join(''));
        document.write('</ul>');
    }
</script>

<div id='labelshort'>
<script src="/feeds/posts/summary?alt=json&max-results=0&callback=labelx"></script>
</div>

Jika ada pertanyaan atau error silahkan beri komentarnya dibawah post ini. Sekian artikel ini saya buat and sampai jumpa dipost selanjutnya.