Accordion sitemap (TOC) cho blogger style 1

accordion sitemap TOC for blogger style1

Site map giúp khách thăm quan blog rễ dàng timg hiểu và theo dõi các mục trong blog của bạn. Hôm nay namkna sẽ giới thiệu thêm một style mới từ accordion javarscip với hiệu ứng thu hẹp và mở rộng các bài viết khi click vào tiêu đề nhãn.

Xin lưu ý thủ thuạt này có kiểu dáng hoàn toàn khác với style 2 mà mình giới thiệu trước đây.

XEM DEMO

Ảnh minh họa:

2. Cách thêm accordion site map cho blogger

1. Đăng nhập vào tài khoản Blogger
2. Vào Trang (Trang)
3. Chọn Trang mới => Trang trống

Tạo thêm trang cho blogger - Hướng dẫn tạo thêm trang cho blogspot cực đẹp và nhanh

4. Check vào phần HTML của trang vừa tạo và dán đoạn code bên dưới vào:

<script type='text/javascript'>
//<![CDATA[
if (typeof jQuery == 'undefined') {
    cekjq = {};
    cekjq.s = document.createElement('script');
    cekjq.s.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(cekjq.s)
}
var postTitle = new Array();
var postUrl = new Array();
var postMp3 = new Array();
var postDate = new Array();
var postLabels = new Array();
var postBaru = new Array();
var sortBy = "titleasc";
var tocLoaded = false;
var numChars = 250;
var postFilter = '';
var numberfeed = 0;

function loadtoc(json) {
    function getPostData() {
        if ("entry" in json.feed) {
            var numEntries = json.feed.entry.length;
            numberfeed = numEntries;
            ii = 0;
            for (var i = 0; i < numEntries; i++) {
                var entry = json.feed.entry[i];
                var posttitle = entry.title.$t;
                var postdate = entry.published.$t.substring(0, 10);
                var posturl;
                for (var k = 0; k < entry.link.length; k++) {
                    if (entry.link[k].rel == 'alternate') {
                        posturl = entry.link[k].href;
                        break
                    }
                }
                var postmp3 = '';
                for (var k = 0; k < entry.link.length; k++) {
                    if (entry.link[k].rel == 'enclosure') {
                        postmp3 = entry.link[k].href;
                        break
                    }
                }
                var pll = '';
                if ("category" in entry) {
                    for (var k = 0; k < entry.category.length; k++) {
                        pll = entry.category[k].term;
                        var l = pll.lastIndexOf(';');
                        if (l != -1) {
                            pll = pll.substring(0, l)
                        }
                        postLabels[ii] = pll;
                        postTitle[ii] = posttitle;
                        postDate[ii] = postdate;
                        postUrl[ii] = posturl;
                        postMp3[ii] = postmp3;
                        if (i < 10) {
                            postBaru[ii] = true
                        } else {
                            postBaru[ii] = false
                        };
                        ii = ii + 1
                    }
                }
            }
        }
    }
    getPostData();
    sortBy = "titleasc";
    sortPosts(sortBy);
    sortlabel();
    tocLoaded = true;
    displayToc2();
    document.write('')
}
function filterPosts(filter) {
    scroll(0, 0);
    postFilter = filter;
    displayToc(postFilter)
}
function allPosts() {
    sortlabel();
    postFilter = '';
    displayToc(postFilter)
}
function sortPosts(sortBy) {
    function swapPosts(x, y) {
        var temp = postTitle[x];
        postTitle[x] = postTitle[y];
        postTitle[y] = temp;
        var temp = postDate[x];
        postDate[x] = postDate[y];
        postDate[y] = temp;
        var temp = postUrl[x];
        postUrl[x] = postUrl[y];
        postUrl[y] = temp;
        var temp = postLabels[x];
        postLabels[x] = postLabels[y];
        postLabels[y] = temp;
        var temp = postMp3[x];
        postMp3[x] = postMp3[y];
        postMp3[y] = temp;
        var temp = postBaru[x];
        postBaru[x] = postBaru[y];
        postBaru[y] = temp
    }
    for (var i = 0; i < postTitle.length - 1; i++) {
        for (var j = i + 1; j < postTitle.length; j++) {
            if (sortBy == "titleasc") {
                if (postTitle[i] > postTitle[j]) {
                    swapPosts(i, j)
                }
            }
            if (sortBy == "titledesc") {
                if (postTitle[i] < postTitle[j]) {
                    swapPosts(i, j)
                }
            }
            if (sortBy == "dateoldest") {
                if (postDate[i] > postDate[j]) {
                    swapPosts(i, j)
                }
            }
            if (sortBy == "datenewest") {
                if (postDate[i] < postDate[j]) {
                    swapPosts(i, j)
                }
            }
            if (sortBy == "orderlabel") {
                if (postLabels[i] > postLabels[j]) {
                    swapPosts(i, j)
                }
            }
        }
    }
}
function sortlabel() {
    sortBy = "orderlabel";
    sortPosts(sortBy);
    var j = 0;
    var i = 0;
    while (i < postTitle.length) {
        temp1 = postLabels[i];
        firsti = j;
        do {
            j = j + 1
        } while (postLabels[j] == temp1);
        i = j;
        sortPosts2(firsti, j);
        if (i > postTitle.length) break
    }
}
function sortPosts2(firstvar, lastvar) {
    function swapPosts2(x, y) {
        var temp = postTitle[x];
        postTitle[x] = postTitle[y];
        postTitle[y] = temp;
        var temp = postDate[x];
        postDate[x] = postDate[y];
        postDate[y] = temp;
        var temp = postUrl[x];
        postUrl[x] = postUrl[y];
        postUrl[y] = temp;
        var temp = postLabels[x];
        postLabels[x] = postLabels[y];
        postLabels[y] = temp;
        var temp = postMp3[x];
        postMp3[x] = postMp3[y];
        postMp3[y] = temp;
        var temp = postBaru[x];
        postBaru[x] = postBaru[y];
        postBaru[y] = temp
    }
    for (var i = firstvar; i < lastvar - 1; i++) {
        for (var j = i + 1; j < lastvar; j++) {
            if (postTitle[i] > postTitle[j]) {
                swapPosts2(i, j)
            }
        }
    }
}
function displayToc(filter) {
    var numDisplayed = 0;
    var tocTable = '';
    var tocHead1 = 'Judul Artikel';
    var tocTool1 = 'Klik untuk sortir berdasarkan judul';
    var tocHead2 = 'Tanggal';
    var tocTool2 = 'Klik untuk Sortir bedasarkan tanggal';
    var tocHead3 = 'Kategori';
    var tocTool3 = '';
    if (sortBy == "titleasc") {
        tocTool1 += ' (descending)';
        tocTool2 += ' (newest first)'
    }
    if (sortBy == "titledesc") {
        tocTool1 += ' (ascending)';
        tocTool2 += ' (newest first)'
    }
    if (sortBy == "dateoldest") {
        tocTool1 += ' (ascending)';
        tocTool2 += ' (newest first)'
    }
    if (sortBy == "datenewest") {
        tocTool1 += ' (ascending)';
        tocTool2 += ' (oldest first)'
    }
    if (postFilter != '') {
        tocTool3 = 'Klik untuk menampilkan semua'
    }
    tocTable += '<table>';
    tocTable += '<tr>';
    tocTable += '<td class="toc-header-col1">';
    tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
    tocTable += '</td>';
    tocTable += '<td class="toc-header-col2">';
    tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
    tocTable += '</td>';
    tocTable += '<td class="toc-header-col3">';
    tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
    tocTable += '</td>';
    tocTable += '<td class="toc-header-col4">';
    tocTable += 'Download MP3';
    tocTable += '</td>';
    tocTable += '</tr>';
    for (var i = 0; i < postTitle.length; i++) {
        if (filter == '') {
            tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td><td class="toc-entry-col4">' + '<a href="' + postMp3[i] + '">' + 'Download' + '</a>' + '</td></tr>';
            numDisplayed++
        } else {
            z = postLabels[i].lastIndexOf(filter);
            if (z != -1) {
                tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td><td class="toc-entry-col4">' + '<a href="' + postMp3[i] + '">' + 'Download' + '</a>' + '</td></tr>';
                numDisplayed++
            }
        }
    }
    tocTable += '</table>';
    if (numDisplayed == postTitle.length) {
        var tocNote = '<span class="toc-note">Menampilkan Semua ' + postTitle.length + ' Artikel<br/></span>'
    } else {
        var tocNote = '<span class="toc-note">Menampilkan ' + numDisplayed + ' artikel dengan kategori \'';
        tocNote += postFilter + '\' dari ' + postTitle.length + ' Total Artikel<br/></span>'
    }
    var tocdiv = document.getElementById("toc");
    tocdiv.innerHTML = tocNote + tocTable
}
function displayToc2() {
    var j = 0;
    var i = 0;
    document.write('<div id="daftar-isi">');
    while (i < postTitle.length) {
        temp1 = postLabels[i];
        document.write('<div class="sublabel">');
        document.write('<div class="judul-label">' + temp1 + '</div>');
        document.write('<div class="judul-list"><ol>');
        firsti = j;
        var tempposition = 'odd';
        do {
            if (tempposition == 'odd') {
                document.write('<li class="data-list list-ganjil">');
                tempposition = 'even'
            } else {
                document.write('<li class="data-list list-genap">');
                tempposition = 'odd'
            }
            document.write('<a href="' + postUrl[j] + '">' + postTitle[j] + '</a>');
            if (postBaru[j] == true) {
                document.write(' - <strong><em><span style="color: rgb(255, 0, 0);">New !!</span> </em></strong>')
            };
            document.write('</li>');
            j = j + 1
        } while (postLabels[j] == temp1);
        i = j;
        document.write('</ol></div></div>');
        sortPosts2(firsti, j);
        if (i > postTitle.length) break
    }
    document.write('</div>')
}
function toggleTitleSort() {
    if (sortBy == "titleasc") {
        sortBy = "titledesc"
    } else {
        sortBy = "titleasc"
    }
    sortPosts(sortBy);
    displayToc(postFilter)
}
function toggleDateSort() {
    if (sortBy == "datenewest") {
        sortBy = "dateoldest"
    } else {
        sortBy = "datenewest"
    }
    sortPosts(sortBy);
    displayToc(postFilter)
}
function showToc() {
    if (tocLoaded) {
        displayToc(postFilter);
        var toclink = document.getElementById("toclink")
    } else {
        alert("Just wait... TOC is loading")
    }
}
function hideToc() {
    var tocdiv = document.getElementById("toc");
    tocdiv.innerHTML = '';
    var toclink = document.getElementById("toclink");
    toclink.innerHTML = '<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(' + "'toc-result','blind');" + '">¡í Menampilkan Daftar Isi</a> <img src="http://radiorodja.googlepages.com/new_1.gif"/>'
}
function looptemp2() {
    for (var i = 0; i < numberfeed; i++) {
        document.write('<br>');
        document.write('Post Link		  : ' + '<a href="' + postUrl[i] + '">' + postTitle[i] + '</a>' + '<br>');
        document.write('Download mp3  : ' + '<a href="' + postMp3[i] + '">' + postTitle[i] + '</a>' + '<br>');
        document.write('<br>')
    }
}
//]]>
</script>
<script src="http://namkna.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script type='text/javascript'>
//<![CDATA[
/*
 * RAccordion for TOC
 *  By Abu Farhan (www.abu-farhan.com)
 * Don't eidt this script (if you edit same as thief)
 */
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('f $0=n.o();b g(){$0("#2-3 .1-5").p();$0("#2-3  .1-7").q("r","s");$0("#2-3 .1-5:h").t();$0("#2-3 .1-7:h").i("6");$0("#2-3 .1-7").u(b(){c(v){f a=$0(4).d();c((a.8(".1-5"))&&(a.8(":e"))){$0(4).d().j("9");$0(4).k("6");l m}c((a.8(".1-5"))&&(!a.8(":e"))){$0("#2-3  .1-5:e").w("9");$0("#2-3  .1-7").x("6");a.y("9");$0(4).i("6");l m}}z{$0(4).d().j("9");$0(4).k("6")}})}$0(A).B(b(){g()})',38,38,'jxToc|judul|daftar|isi|this|list|headactive|label|is|normal||function|if|next|visible|var|initAccToc|first|addClass|slideToggle|toggleClass|return|false|jQuery|noConflict|hide|css|cursor|pointer|show|click|accToc|slideUp|removeClass|slideDown|else|document|ready'.split('|'),0,{}))
//]]>
</script>
<style>
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top,  #888,  #575757);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
color: #fef4e9;
border: 2px solid white !important;
background: #1C8DFF;
background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));
background: -moz-linear-gradient(top,  #9dc2e7,  #438cd2);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');
}
</style>

Tùy chỉnh:

Thay http://namkna.blogspot.com/ thành URL blog của bạn
max-results=1000 là số bài hiển thị.

- Xuất bản trang cà xem thành quả nha.

Nếu muốn đẹp hơn hãy xem style 2 Tại đây

Nhận xét

Adminlúc 08:50:00 GMT+7 Thứ Sáu, 13 tháng 9, 2013
sao em dán vào mà nó ko xổ ra nhỉ.... chỉ dc cái thẻ đầu còn mấy cais sau click nó không xổ
Trả lờiXóa
Trả lời
Unknownlúc 17:39:00 GMT+7 Thứ Ba, 31 tháng 5, 2016
Mình lấy url trong trang là site-map cho dễ seo. Nhưng trong trang mới tạo khi xuất bản để lấy link gắn vào menu sao nó có dạng url là: cdataif-typeof-jquery-undefined-cekjq.html
Trả lờiXóa
Trả lời

Thêm nhận xét

Accordion sitemap (TOC) cho blogger style 1

2. Cách thêm accordion site map cho blogger

Tùy chỉnh:

Đăng bởi: Namkna

Bạn có thể thích những bài đăng này

Nhận xét

CÔNG TY TNHH EXPRESSNO1