Kode HTML Membuat Daftar Isi Blogspot

Ini ulasan tentang bagaimana cara membuat daftar isi bukan tahu isi. Mungkin di lain kesempatan saya akan membuat tutorial tentang tahu isi. 🙂

Daftar isi pada blog berfungsi untuk memudahkan pengunjung mencari artikel yang diperlukannya. Hikmah lainnya adalah pengunjung betah berburu artikel dengan dipisahkan masing-masing kategori.

Saya awalnya pengguna Blogspot Fanatik Garis Keras. Sehingga cukup banyak mengumpulkan kode-kode html yang mudah untuk diterapkan. Dan kode-kode yang saya gunakan biasanya sudah saya coba di bloggerkalteng.id (Blog TLD blogspot).

Dulu sekali, saat saya tidak paham tentang cara otak-atik blogspot, jadi dengan cara instan mencari kata kunci di google “kode html… (dilanjutkan dengan kata kunci yang ingin dicari). Ini jurus jitu saat itu. Setelah 10 tahun bergulat dengan blogspot dan kode html, akhirnya cukup bisa otak-atik.

Kode HTML membuat daftar isi blog ini, tampilannya keren memang berbeda. Kode ini bekerja dengan mudah, saya telah mencoba di berbagai tema blogger, hasilnya sangat baik. Kode HTML ini penempatannya sangat sederhana. Simak penjelasan berikut:

Login blogger.com
Sebaiknya posting di Halaman (bukan di posting), agar daftar isi blog tampil di halaman statis.
Pada Pilihan lembar kerja blog, pilih < > Tampilan HTML bukan Tampilan Menulis.
Copy-paste kode HTML berikut.

<style scoped="scoped" type="text/css">
#show-cat{float:left;margin:10px 5% 20px 0;width:25%;height:386px;overflow:auto;line-height:18px;border:1px solid #ccc}
#show-cat ul{margin:0;border-top:0px solid #ccc;padding:0}
#show-cat ul li{list-style-type:none;margin:0;border-right:0px solid #ccc;border-bottom:0px solid #ccc;border-left:0px solid #ccc;padding:0}
#show-cat ul li a{display:block!important;padding:10px;border-bottom:1px solid #ccc;}
#show-cat ul li:last-child a{border-bottom:none;}
#show-cat ul li a,#navi-cat a{background:#076BB8;color:#fff;text-decoration:none}
#show-cat ul li a,#navi-cat a,#navi-cat span{font-size:14px}
#show-cat ul li a:hover,#navi-cat a:hover{background:#222222;color:#fff}
#show-post{float:left;width:59%;border: 0px solid #4C4444;}
#show-post ul li{list-style-type:none;margin-left:-30px}word-wrap:break-word;
#show-post ul li a{word-wrap:break-word;}
#navi-cat{background: #;padding:10px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px;margin-left: 5px;}
#navi-cat span{float:right;color:#222222;}

@media screen and (max-width:768px){
#show-cat{width:35%;}
#show-post{width:59%;}
}
@media screen and (max-width:480px){
#show-cat{width:100%;margin:20px 0}
#show-post{width:100%;}
}
</style>

<br />
<div id='show-cat'>
</div>
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://www.bloggerkalteng.id';cat_numb=15;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;
function show_post2(a){var tt=a.feed.openSearch$totalResults.$t;dw='';dw+='<ul>';for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){var entry=a.feed.entry[i];cat_title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=='alternate'){var cat_url=entry.link[j].href}}dw+='<li>';dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';dw+='</li>'}dw+='</ul>';dw+='<div id="navi-cat">';if(cat_start>1){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>'}if((cat_start+cat_numb-1)<tt){dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>'}dw+='<span>'+cat_start;if(cat_start!=tt){dw+=' – '+(cat_start+i-1)}dw+=' / '+tt+'</span>';dw+='</div>';document.getElementById('show-post').innerHTML=dw+'<style type="text/css">.cat-'+cat_class+' a{background:#bbb!important;color:#fff!important}<\/style>'}function show_post(a,b,c){var d=document.getElementsByTagName('head')[0];e=document.createElement('script');e.type='text/javascript';e.setAttribute('src',cat_home+'/feeds/posts/default/-/'+a+'?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2');d.appendChild(e);cat_name=a;cat_start=parseInt(b),cat_class=c}function show_cat(a){var cat=a.feed.category;dw='';dw+='<ul>';for(var i=0;i<cat.length-1;i++){for(var j=i+1;j<cat.length;j++){if(cat[i].term>cat[j].term){cat_hv=cat[i].term;cat[i].term=cat[j].term;cat[j].term=cat_hv}}}for(var i=0;i<cat.length;i++){dw+='<li class="cat-'+i+'">';dw+='<a href="" onclick="show_post(\''+cat[i].term+'\',\'1\',\''+i+'\');return false" title="';dw+=cat[i].term;dw+='">';dw+=cat[i].term;dw+='</a>';dw+='</li>'}dw+='</ul>';document.getElementById('show-cat').innerHTML=dw}document.write('<script type="text/javascript" src="'+cat_home+'/feeds/posts/default?alt=json-in-script&max-results=0&callback=show_cat"><\/script>');
</script>
</div>

<style type="text/css">#rsidebar-wrapper{display:none !important;}#midsidebar-wrapper{display:none !important;}</style>
<style type="text/css">#main-wrapper{width:100%!important;float:left;margin:0;}
.post{width:100%}
</style>

Keterangan :

Kode 386px merupakan kode untuk tinggi panel navigasi, silakan sesuaikan.

Kode #076BB8 merupakan kode warna pada background pada panel navigasi.

Ganti https://www.bloggerkalteng.id dengan alamat blog anda.

Cek Demo

Untuk daftar isi tanpa menggunakan kategori dan jumlah tampilannya bisa diatur sesuai keinginan gunakan kode berikut ini:

<style scoped="scoped" type="text/css">
#show-post{float:left;width:100%;border: 0px solid #4C4444;}
#show-post ul li{list-style-type:none;margin-left:-30px; word-wrap:break-word;}
#show-post ul li a{word-wrap:break-word;}
#navi-cat{background: #;padding:10px 0}
#navi-cat a{margin-right:10px;border:1px solid #ccc}
#navi-cat a,#navi-cat span{padding:5px 10px;margin-left: 5px;}
#navi-cat span{float:right;color:#222222;}

@media screen and (max-width:768px){
#show-post{width:100%;}
}
@media screen and (max-width:480px){
#show-post{width:100%;}
}
</style>

<br />
<div id='show-post'>
<script type='text/javaScript'>
var cat_home='https://www.bloggerkalteng.id';cat_numb=30;cat_pre='Prev';cat_nex='Next';
var cat_name;var cat_start;var cat_class;

function show_post2(a){ 
    var tt=a.feed.openSearch$totalResults.$t; 
    dw=''; 
    dw+='<ul>'; 
    for(var i=0;i<cat_numb&&i<a.feed.entry.length;i++){ 
        var entry=a.feed.entry[i]; 
        cat_title=entry.title.$t; 
        var publishedDate = new Date(entry.published.$t);
        var currentDate = new Date();
        var timeDiff = Math.abs(currentDate.getTime() - publishedDate.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

        for(var j=0;j<entry.link.length;j++){ 
            if(entry.link[j].rel=='alternate'){ 
                var cat_url=entry.link[j].href 
            }
        } 
        dw+='<li>'; 
        dw+=(cat_start+i)+'. <a href="'+cat_url+'" rel="nofollow" title="'+cat_title+'">'+cat_title+'</a>';

        // Menambahkan label "1 Minggu Terakhir" jika artikel dipublikasikan dalam 7 hari terakhir
        if(diffDays <= 7) {
            dw+=' <strong>(1 minggu terakhir)</strong>';
        }

        dw+='</li>'; 
    } 
    dw+='</ul>'; 
    dw+='<div id="navi-cat">'; 
    if(cat_start>1){ 
        dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start-cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_pre+'">'+cat_pre+'</a>' 
    } 
    if((cat_start+cat_numb-1)<tt){ 
        dw+='<a href="" onclick="show_post(\''+cat_name+'\',\''+(cat_start+cat_numb)+'\',\''+cat_class+'\');return false" title="'+cat_nex+'">'+cat_nex+'</a>' 
    } 
    dw+='<span>'+cat_start; 
    if(cat_start!=tt){ 
        dw+=' – '+(cat_start+i-1) 
    } 
    dw+=' / '+tt+'</span>'; 
    dw+='</div>'; 
    document.getElementById('show-post').innerHTML=dw;
}

function show_post(a,b,c){ 
    var d=document.getElementsByTagName('head')[0]; 
    e=document.createElement('script'); 
    e.type='text/javascript'; 
    e.setAttribute('src',cat_home+'/feeds/posts/default?alt=json-in-script&start-index='+b+'&max-results='+cat_numb+'&callback=show_post2'); 
    d.appendChild(e); 
    cat_name=a; 
    cat_start=parseInt(b),cat_class=c 
} 

show_post('', '1', '');
</script>
</div>

<style type="text/css">
#rsidebar-wrapper{display:none !important;}
#midsidebar-wrapper{display:none !important;}
</style>
<style type="text/css">
#main-wrapper{width:100%!important;float:left;margin:0;}
.post{width:100%}
</style>

Cek Demo

2 Comments Tinggalkan Balasan

Andriberbudi berkata:

September 4, 2024 pukul 4:07 pm

gan, itu agar daftar isinya muncul tanpa klik kategorinya gimana ya?

Balas
- Yandi Novia berkata:
  
  September 4, 2024 pukul 8:01 pm
  
  terima kasih sudah mengunjungi blog saya gan. Kodenya ada saya buat di bagian terakhir artikel ini yaa… silakan coba jika terjadi error, infokan saja dikomentar.
  
  daftar isi ini tampilannya masih sangat sederhana, masih saya coba buat versi yg lebih keren.
  
  Balas