Membuat Sitemap (Daftar Isi) Blogger Responsive Hanya Judulnya Saja


Sitemap atau daftar isi cukup penting di pasang di blog. Hal ini sangat mempermudah pembaca menemukan artikel blog anda, lalu bagaimana caranya membuat halaman sitemap/daftar isi responsive dan fast loading di blog



Dengan membuat halaman statis di blog akan sangat mempermudah pengunjung blog melihat daftar postingan anda selama ini di blog tersebut. Selain itu kita membutuhkan halaman sitemap yang bagus, fast loading dan sekaligus simpel. Biasanya template blogger premium sudah memiliki fitur ini, namun ada juga yang tidak

Untuk membuat halaman daftar isi seperti tersebut sangat mudah, Tulisan panda.com sudah merangkumnya pada halaman ini. Bedanya dengan sitemap jenis lain adalah, pada daftar isi ini hanya akan ditampilkan judul postingan yang akan diurutkan dari yang terbaru sampai yang terlama.

Cara Membuat Sitemap Responsive dan Ringan di Halaman Statis Blogger

Untuk membuat dan memasang sitemap atau daftar isi pada halaman statis maupun halaman postingan di blogger//blogspot dapat mengikuti tahapan dibawah ini.

  • Memasang Kode CSS Sitemap/Daftar Isi Ringan dan Flexibel



    Pertama simpan kode CSS dibawah ini tepat diatas </style> atau ]]></b:skin> Kemudian klik Simpan Template
    /* 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;}
  • Memasang Kode JavaScript Untuk Memanggil Sitemap di Halaman


  • Tahap selanjutnya, untuk memasang sitemap di page (halaman statis blog) kita bisa menggunakan JavaScript murni yang telah disiapkan dibawah ini. Caranya, Buat Sebuah Page (Halaman Statis) baru Kemudian Klik pada mode HTML Bukan COMPOSE kemudian simpan kode Java Dibawah ini kedalam halaman text editor (tempat menulis)
    <div id="sitemap3">Loading....</div>
    <script> //<![CDATA[
    /* Blogger Sitemap Simple Title Only */
    var start=1;var max=150;var sitemap3Arr=new Array();function runSitemap3(){var scpt=document.createElement('script');scpt.src='/feeds/posts/summary?alt=json&callback=sitemap3&start-index='+start+'&max-results='+max;document.body.appendChild(scpt)} function sitemap3(root){var elem=document.getElementById('sitemap3');if(!elem)return;elem.innerHTML='';var feed=root.feed;if(feed.entry.length>0){for(var i=0;i<feed.entry.length;i++){var entry=feed.entry[i];var title=entry.title.$t;for(var j=0;j<entry.link.length;j++){if(entry.link[j].rel=="alternate"){var url=entry.link[j].href;if(url&&url.length>0&&title&&title.length>0){sitemap3Arr.push({'url':url,'judul':title})} break}}} if(feed.entry.length>=max){start+=max;runSitemap3()} else{var print='';for(var x=0;x<sitemap3Arr.length;x++){print+='<li><a href=\"'+sitemap3Arr[x].url+'\" title=\"'+sitemap3Arr[x].judul+'\">'+sitemap3Arr[x].judul+'</a></li>'}
    elem.innerHTML='<div class=\"judul\">Total Post: '+sitemap3Arr.length+'</div><ol>'+print+'</ol>'}}} runSitemap3();
    //]]> </script>

    Kalian sudah berhasil membuat sekaligus menerapkan sebuah halaman daftar isi atau sitemap di blog kalian. Halaman sitemap tersebut sangat ringan, karena hanya mengandung informasi berupa judul dari setiap artikel yang pernah dipublikasikan di blog anda

    Sumber script : www.igniel.com
    Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.tulisanpanda.com. Donasi anda dapat berupa Klik iklan,share artikel, maupun via paypal kirim ke blogmaster.clone@gmail.com , Terima kasih.

    Berlangganan update artikel terbaru via email:

    0 Response to "Membuat Sitemap (Daftar Isi) Blogger Responsive Hanya Judulnya Saja"

    Posting Komentar

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel