Baca ya : Cara Praktis Membuat Daftar Isi Otomatis [Sitemap] Blog Yang Keren

Daftar Isi pada sebuah blog merupakan berupa daftar artikel yang ada pada sebuah blog atau website dengan memperlihatkan internal link pada semua laman artikel tertentu, dengan adanya daftar isi maka akan mempermudah seorang pengunjung untuk mencari apa yang diharapkan seorang pengunjung tersebut pada blog Anda. Namun tentu apabila dilakukan secara manual yang artinya setiap Anda menciptakan artikel yang gres Anda juga harus memperbarui laman daftar isi pada blog, maka itu akan sangat membosankan dan juga membutuhkan waktu meskipun memang tidak lama.

Lalu Bagaimana Supaya Daftar Isi Dapat Menjadi Otomatis?

Membuat daftar isi otomatis tentu bisa!! Yaitu dengan memakai javascript. Maka dari itu saya kini akan menjelaskan kepada Anda mengenai Cara Praktis Membuat Daftar Isi Otomatis [Sitemap] Blog Yang Keren, semoga daftar isi pada blog Anda menjadi otomatis dan tidak perlu diperbarui terus-menerus.

Baca juga "2 Cara Menambahkan Tanda Admin/Author pada Komentar Blog"

Membuat Daftar Isi Otomatis Keren

Sebelumnya untuk balasannya dapat Anda lihat pada daftar isi blog ini atau lihat DEMO. Membuat daftar isi otomatis untuk blog cukup gampang Anda tinggal mengikuti langka-langkah berikut.

1. Pertama Anda sudah harus masuk pada blogger.
2. Lalu pada Dasboard blogger masuklah pada "Laman" dan buat Laman Baru dengan judul "Daftar Isi" atau "Sitemap". Atau Anda juga bis memakai laman daftar isi yang usang namun dengan menghapus isinya yang artinya pada posisi kosong.
3. Setelah itu masukan arahan script berikut pada mode HTML bukan Compose.

#Tanpa Style CSS (Biasa)


 <div id="toc"> <script src="https://cdn.rawgit.com/aramdan/share/master/sitemap.js" type="text/javascript"></script> <script src="http://www.bloggars.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script></div>
 

#Style CSS (Keren)

<style type="text/css">
#toc{width:97%;margin:5px auto;border:1px solid #00a3c1;-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#ff0000;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE 0%,#00a3c1 40%);background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#00a3c1),color-stop(1,#C2EAFE));border:1px solid #00a3c1;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#ff0000;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.rawgit.com/aramdan/share/master/sitemap.js" type="text/javascript"></script>
<script src="http://www.bloggars.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>
Catatan:
• Ubahlah url yang berwarna biru dengan url blog Anda.
• Untuk url javascript yang berwarna merah Anda dapat mengubahnya dengan mendapat javascripnya Cara Daftar dan Hosting Javascript / CSS di GitHub.
4. Setelah memasukan salah satu arahan script diatas, klik "Publikasikan" dan lihat hasilnya.

Baca juga "Cara Memasang Navigasi Page Number Pada Blog"

Ada Alasan mengapa Anda harus mengupload kembali javascript sitemap yang saya berikan, yaitu semoga semuanya tidak memakai url tersebut dan Anda punya url javascript sendiri dan tentu saja untuk menciptakan kecepatan loading laman menjadi lebih ringan alasannya ialah url javascript uang Anda upload hanya dipakai oleh blog Anda sendiri. Namun memakai yang saya berikan diataspun tidak apa-apa apabila Anda malas untuk menguploadnya kembali.

Selesai dan degitulah cara menciptakan daftar isi otomatis pada sebuah blog, gampang bukan?! Terima kasih sudah membaca artikel saya kali ini, apabila ada yang ingin ditanyakan atau script tidak berfungsi dapat menghubungi saya atau Anda dapat berkomentar pada kolom komentar yang tersedia.
Sumber http://www.bloggars.com/

Tweet

Subscribe to receive free email updates: