Memudahkan Pembaca dengan Membuat Daftar isi di Blog

Share:
Daftar isi atau sitemap adalah laman yang berfungsi untuk memudahkan pembaca blog dalam mencari artikel yang diperlukan. Dengan melihat daftar isi, pembaca menjadi tau, apa saja artikel yang baru di update dan apa label dari masing-masing artikel tersebut. Karena pada daftar isi, semua artikel dikelompokan pada label-label tertentu.

Misalnya artikel yang berjudul Apa Itu Food Combining?, maka artikel tersebut akan terdapat pada label Kesehatan, atau artikel yang berjudul Cara Mencegah Pencurian Artikel di Blog, yang akan berada pada label Blogging. Begitu juga dengan artikel-artikel yang lainnya.

Daftar isi tidak hanya memberikan kemudahan kepada pembaca dalam mencari informasi, tetapi daftar isi juga memberikan keuntungan kepada pemiliki blog. Dengan adanya daftar isi pada suatu blog, maka blog tersebut akan dengan mudah dan cepat terindeks mesin pencari seperti Google, Bing, Yahoo, ataupun mesin pencari lainnya. Jadi jika blog anda belum memiliki daftar isi atau sitemap, sebaiknya segeralah untuk membuatnya.

Untuk membuat daftar isi, anda tidak perlu memiliki keahlian dalam bidang koding. Karena memang sudah banyak blog-blog yang menyediakannya. Entah itu hasil buatan sendiri ataupun repost dari blog lain.

Walaupun begitu, masih banyak juga blogger-blogger pemula yang tidak tau cara membuatnya. Maka dari itu artikel yang berjudul Memudahkan Pembaca dengan Membuat Daftar isi di Blog, ini ane buat.

Gangkutu sendiri memiliki daftar isi yang dibuat dari kode script blog lain. Tepatnya kode script tersebut ane dapat dari http://www.portalblogspot.net/. Jika anda tertarik ingin membuat daftar isi seperti Gangkutu, silakan ikuti tutorial dibawah ini.

Lihat DEMO

Login ke blogger, lalu buka menu Laman, kemudian pilih Laman Baru

Kemudian beri judul Daftar Isi atau Sitemap, setelah itu pilih mode HTML, dan copy kode dibawah ini.

<div dir="ltr" style="text-align: left;" trbidi="on">
<style scoped="scoped" type="text/css">
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:none;margin:0;padding:5px;font-size:86%;text-transform:uppercase;outline:0;-webkit-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-moz-box-shadow:inset 0 1px 3px #000,0 1px 0 #444;box-shadow:inset 0 1px 3px #000,0 1px 0 #444;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
#feed-container{display:block;clear:both;margin:0 30px;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 16px;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:700}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin:10px 0 0}
#feed-container li img{margin:0 10px 5px 0;padding:5px;float:left;display:block;}
#result-desc{margin:0 30px;padding:0;border-bottom:2px solid #eee}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 10px 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 30px 0;text-align:center;font-weight:700}
#feed-nav a,#feed-nav span{border:1px solid #C9C9C9;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none!important}
}
</style>

<div id="table-outer">
<table><tbody>
<tr><td><label for="feed-order">Urutkan artikel berdasarkan:</label></td> <td><select id="feed-order"> <option selected="" value="published">Terbaru</option> <option value="updated">Terakhir di update</option> </select></td></tr>
<tr><td><label for="label-sorter">Filter berdasarkan label:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Loading....</option> </select></td></tr>
<tr>                 <td><label for="feed-q">Cari disini:</label></td> <td><form id="post-searcher">
<input id="feed-q" placeholder="Ketik dan tekan ENTER" type="text" />
</form>
</td></tr>
</tbody></table>
</div>
<br />
<br />
<br />
<header id="result-desc"></header>
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://cdn.rawgit.com/indradpcom/file-host/master/sitemap-fitur-lengkap.js" type="text/javascript"></script>
</div>

Jangan lupa untuk Save, dan sebelum Publish ada baiknya untuk memeriksanya dengan pilih Pratinjau. Jika sudah yakin dengan tampilannya, silakan tekan Publish.

Baca Juga:
Cara Cepat Membuat Disclaimer Blog
Cara Membuat Privacy Policy di Blog dengan Mudah
Cara Membuat Laman Contact Us atau Hubungi Kami di Blog

Sekarang blog anda sudah memiliki daftar isi, mudah bukan membuatnya? Jika anda puas dengan tampilannya dan ingin membagikannya ke teman-teman blogger lainnya. Silakan share artikel ini, dan apabila masih ada pertanyaan seputar artikel ini ana bisa bertanya lewat kolom komentar dibawah ini.

No comments