Cara Membuat Daftar Isi Berdasarkan Label Pada Blogger

cara membuat daftar isi berdasarkan label pada blogger (sumber gambar)

Siang guys, agak telat posting nih sorry ya, tadi malam sibuk soalnya biasalah malam jum'at, well kita siang ini akan bahas tentang tips and trik blogger nih, yaitu bagaimana sih cara membuat daftar isi berdasarkan label pada blogger? terus langkah-langkahnya bagaimana?

Daftar isi atau biasa dikenal dengan sebutan Sitemap merupakan fitur yang seharusnya ada di dalam sebuah website atau blogger, hal ini untuk berguna mempermudah pengunjung mencari artikel lain di dalam website kita. Blog aku yang ini juga ada daftar isinya loh di navbar paling atas sebelah home, aku kasih nama blog content dan penampakannya seperti ini.

blog content pada blog my quotes 10

Keren kan? lumayan lah ya ada warna-warnanya gitu, itu buat sendiri bay? tentu tidak ya guys aku juga cuman ngikutin step by step aja dari sumber ini, kita tinggal copy paste. hehe.

So, bagaimana cara buatnya? berikut aku kasih tahu langkah - langkahnya.

Langkah-langkah Membuat Daftar Isi Pada Blogger

Pertama, membuat halaman daftar isi

Hal terpenting adalah kalian harus udah punya blog ya dalam hal ini blogger, kita gk bahas wordpress soalnya. hehe Kemudian kamu buka bloggermu, setelah sudah di halaman home, pilihlah halaman (page) sehingga muncul tampilan berikut :

tampilan halaman page blog my-quotes10

Jika masih kosong gk ada masalah sih, mari kita buat baru halaman daftar isi, untuk membuat halaman baru kamu tinggal pilih menu halaman baru sehingga muncul tampilan sepeti akan membuat artikel baru.

Perbedaan Postingan dan Halaman

Perlu kalian ketahui bahwa perbedaan postingan sama halaman adalah ketika kita buat postingan baru otomatis akan muncul di halaman home artinya disini postingan itu dinamis bisa berubah-ubah.

Sedangkan Halaman itu cenderung statis, isinya itu informasi tentang blog dan cenderung tidak berubah-ubah misalnya, halaman about, contact, daftar isi semuanya jarang berubah.

kembali ke daftar isi, setelah kamu di halaman new page klik mode html dan copy code dibawah ini :

<html>
<head>
<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>

</head>

<body>

<div id="toc">

<script src="https://cdn.rawgit.com/bayu1993/blogger/b0276ecc/sitemap.js" type="text/javascript"></script>

<script src="https://my-quotes10.blogspot.co.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">

</script>

</div>

</body>

</html>

Kedua Mengganti Url Blog

Gantilah yang aku mark warna merah dengan url blog kamu, misal alamat url blog kamu : https://my-quotes10.blogspot.co.id. dan gantilah dengan url tsb.

Ketiga Mengganti Url Sitemap

yang warna biru adalah url kode sitemap blog saya, gantilah dengan url sitemap blog kamu, cara gimana? berikut langkah - langkahnya :

1 Download file sitemap.js di github saya : sitemap.js download
2 Jika sudah, buatlah akun github jika sudah punya akun github, masuk ke akun github kamu dan buatlah repository baru, misal nama repositorinya blogku. sehingga tampilannya seperti berikut :

Membuat repositori baru bernama blogku

Tampilan repositori blogku yang baru aja kita buat

3. Selanjutnya adalah mengupload file sitemap.js yang udah kita download sebelumnya, dengan cara klik menu upload file dan uploadlah file sitemap.js, sehingga tampilannya sebagai berikut :

halaman upload sitemap.js

4 Kemudian klik commit changes sehingga kita bisa melihat file sitemap.js berhasil kita masukkan ke dalam repositori blogku yay..

file sitemap.js berhasil ditambahkan

5 Untuk mendapatkan url sitemap mari kita menuju ke website rawgit.com, paste url sitemap.js yang ada di repository github kamu ke website rawgit. sehingga tampilannya kayak gini :

hasil pembuatan url sitemap

6 Lihatlah url nya udah jadi, ada dua url, url production dan development kita pake url production aja ya guys. selamat ya url sitemap kamu udah jadi yay yay. Silahkan copy url nya buat gantiin kode html daftar isi diatas yak (yang aku mark warna biru tadi).

Kemudian kita kembali ke halaman page daftar isi, kemudian klik publikasikan, jika semua berjalan mulus maka akan tampil sebagai berikut.

Halaman Page disini saya buat baru loh yaitu daftar isi

Tampilan daftar isi

Finally, udah jadi nih guys, huft cukup panjang ya tutorial hari ini gilaak, Giman guys mudah kan? cuman gitu doang kok. Siang ini sampai sini dulu ya guys, jika ada yang bingung silahkan bisa komentar di bawah ini ya guys. Jangan lupa like fans page kami dan share. Selamat sore guys, Salam..

credit : http://www.bloggars.com/2016/10/cara-membuat-daftar-isi-otomatis-blog.html

Cara Membuat Daftar Isi Berdasarkan Label Pada Blogger