Sitemap (Daftar Isi) Blogger di Halaman Statis Hanya Judul Saja

Posted on
Sitemap (Daftar Isi) Blogger di Halaman Statis Hanya Judul Saja

Sitemap alias daftar isi Blogspot jenis ini sangat simple dan fast loading karena hanya menampilkan judul saja. Daftar postingan diurutkan menurut tanggal postingan diterbitkan, mulai dari yang terbaru sampai terlama.

Ini kode CSSnya. Simpan DI ATAS </style> atau ]]></b:skin>.

/* Blogger Sitemap Simple Title Only */
#sitemap3 .judul {font-size:150%; background-color:#008c5f; color:#fff; font-weight:600; text-align:center; margin-bottom:20px; padding:15px;}
#sitemap3 a {color:#666; text-decoration:none; transition:all .3s ease;}
#sitemap3 a:hover {color:#000;}
#sitemap3 ol {margin:0px; padding:0px;}
#sitemap3 ol li {color:#666; font-weight:400; list-style-type:decimal; margin:0px; padding:10px; line-height:1.5em; -webkit-margin-start:40px !important;}

Lalu kode utama untuk menampilkan daftar isi Blogger ini disimpan ke dalam page (halaman statis). Ketika menulis pastikan memilih metode HTML, bukan Compose. Salin semua kode berikut ke dalam text editor (tempat menulis).

<div id="sitemap3">Loading....</div>
<script> //<![CDATA[
/* Blogger Sitemap Simple Title Only */
function sitemap3(e){var t=document.getElementById('sitemap3');if(t){for(var a,l=e.feed.entry,i='',n=0;n<l.length;n++){for(var r=0;r<l.length;r++)if("alternate"==l[n].link[r].rel){a=l[n].link[r].href;break}var s;i+='<li><a href="'+a+'" title="'+(s=l[n].title.$t)+'">'+s+"</a></li>"}t.innerHTML='<div class="judul">Total Post: '+l.length+'</div><ol>'+i+'</ol>'}} var a=document.createElement('script'); a.src="http://www.igniel.com/feeds/posts/default?alt=json-in-script&orderby=published&max-results=9999&callback=sitemap3", document.getElementsByTagName('head')[0].appendChild(a);
//]]> </script>

Kode di atas hanya menggunakan Javascript murni, tidak perlu menggunakan jQuery segala. Contoh dari sitemap simple hanya judul saja yang diurutkan berdasarkan tanggal terbaru bisa dicek di Codepen saya.

Leave a Reply

Your email address will not be published. Required fields are marked *