Translate

Sabtu, 02 Juli 2016

Cara membuat berbagai macam daftar isi blog (keren, sederhana, berdasarkan label tertentu)

Biljabbaradnan's blog - Daftar isi atau yang biasa disebut Sitemap, peta situs, table of content.
Adalah sebuah halaman yang berisikan semua label atau artikel yang sudah kita posting kedalam blog.
Membuat daftar isi diblog akan sangat membantu untuk kita (admin blog atau pembaca) yang ingin menelusuri isi blog sobat lebih dalam.
Berikut ini adalah manfaat yang bisa sobat dapatkan dari membuat daftar isi diblog :

  1. Membantu pembaca untuk mencari artikel yang di inginkannya.
  2. Menghindari penerbitan artikel yang serupa, yang akan menyebabkan kebingungan mesin bot pencari yang berujung penghapusan artikel tersebut.
  3. Dapat membantu menaikan Rank Page (urutan halaman di google), dengan memasang internal link.
Baiklah sobat dari pada basa-basi lagi ada baiknya langsung kita praktekan saja cara membuatnya.


1. Tahap Pertama : Memilih tipe daftar isi

Daftar isi dibagi menjadi beberapa tipe sob, tipe tersebut adalah.

Daftar isi yang keren

Demo (Contoh)
Silahkan dicopy kodenya bila tertarik sama daftar isi tersebut :
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat


 <style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-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:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
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{t
ext-transform:uppercase;
}
.new{
color:#FF5F00;
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">
<span class="loading">Ok selamat menjelajah dan selamat mencoba</span>
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

Daftar isi sederhana

Demo (Contoh)
Silahkan dicopy kodenya bila tertarik sama daftar isi tersebut :
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:500px; background-color: none; text-align: left;">
<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Daftar isi berdasarkan waktu publikasi

Demo (Contoh)
Silahkan dicopy kodenya bila tertarik sama daftar isi tersebut :
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat

<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height:500px; background-color: none; text-align: left;">
<script style="text/javascript" src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

Daftar isi yang hanya beberapa label/kategori saja

Demo (Contoh)
Silahkan dicopy kodenya bila tertarik sama daftar isi tersebut :
dan silahkan sobat ganti url https://biljabbaradnan.blogspot.com dengan url sobat, dan kata blogger, komputer, dan word diganti dengan kategori sobat yang ingin ditampilkan.

<script style="text/javascript" src="https://cdn.rawgit.com/D-dig/js/gh-pages/sitemap3.js"></script>
<h3>Blogger</h3><ul>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default/-/Blogger?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999"></script></ul><br />
<h3>Komputer</h3><ul>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default/-/Komputer?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999"></script></ul><br />
<h3>Word</h3><ul>
<script src="http://biljabbaradnan.blogspot.com/feeds/posts/default/-/Word?orderby=published&amp;alt=json-in-script&amp;callback=startpost&amp;max-results=999"></script></ul><br />

2. Tahap kedua : Membuat halamannya

Setelah memilih tipe daftar isinya, kita harus membuat halaman daftar isinya sobat.
Berikut cara untuk membuat halamannya :

BACA JUGA:  Cara menulis artikel di blog baru dengan mudah dan lengkap

1. Login dahulu ke akun blogger.com sobat
2. Masuk ke dashbor => laman => laman baru


3. Lalu ubah mode penulisannya dari Compose menjadi HTML


4. Setelah itu masukan kode daftar isinya yang barusan sobat copy
5. Jangan lupa untuk memasukan judul lamannya
6. Terakhir Klik "Publikasikan", untuk menguploadnya


3. Tahap ketiga : memasang halaman daftar isi di menu

Setelah melewati tahap pertama dan kedua, tahapan berikut ini adalah "Penyelesaian" sobat.
Jadi perhatikan baik-baik yah agar daftar isinya dapat terpasang di blog sobat.


1. Klik tombol "lihat" yang ada dibawah laman sobat yang baru dibuat tadi.
Atau bisa sobat perhatikan gambar dibawah ini.


2.Silahkan sobat copy alamat url-nya seperti pada gambar dibawah ini.


3. Setelah dicopy url-nya, silahkan sobat masuk ke dashbor => template => edit html


4. Lalu silahkan sobat cari kata yang ada di menu blog sobat, dengan cara klik Ctrl+F.
Misalkan di menu sobat ada kata "PKN" masukan kata "PKN" dikotak yang sudah saya beritanda.
dan hasilnya akan kelihatan.


5. Lanjut, masukan kode berikut ini, diantara kode-kode yang saya beri tanda.
Ganti http://biljabbaradnan.blogspot.co.id/p/daftar-isi.html dengan url laman yang tadi sobat copy.

<li><a href='http://biljabbaradnan.blogspot.co.id/p/daftar-isi.html'>Daftar Isi</a></li>
dan hasilnya akan seperti ini

6. Simpan dan cek kembali
 Setelah dicek menu sobat akan menjadi seperti ini
7. Selesai.

Akhirnya berakhir sudah sobat tutorial kali ini.
Setelah sampai pada barisan terakhir ini, bisa dipastikan sobat sudah berhasil "membuat daftar isi blog-nya"
Bagaimana sobat tutorial-nya? apakah cukup membantu atau membuat sobat tambah bingung? hehehe..

Baca juga yah artikel berikut ini untuk referensi dan penambahan ilmu pengetahuan sobat juga.

  • 2 Cara jitu membuat menu navigasi di blog dengan mudah
  • 6 Cara membuat blog untuk pemula dalam 15 menit
  • Cara menulis artikel di blog baru dengan mudah dan lengkap


  • Sekian dari saya
    Semoga bisa membantu
    dan Selamat mencoba
    Wasalamualaikum.wr.wb

    Bagikan

    Jangan lewatkan

    Cara membuat berbagai macam daftar isi blog (keren, sederhana, berdasarkan label tertentu)
    4/ 5
    Oleh

    Subscribe via email

    Suka dengan artikel di atas? Tambahkan email Anda untuk berlangganan.

    Jangan lupa tinggalkan komentar yah :)