12/19/2016

Cara Membuat Daftar Isi Blog Non AMP

Cara Membuat Daftar Isi Blog Non AMP - Membuat halaman daftar isi blog (peta situs, sitemap) berdasarkan label artikel adalah hal yang sangat baik terutama untuk pengunjung blog. Dengan adanya menu daftar isi di blog akan memudahkan pengunjung mengakses berbagai macam konten blog secara cepat yang mereka butuhkan.

Lalu bagaimana cara membuat daftar isi di blog? Sampai saat ini masih banyak blogger yang mencari daftar isi blog yang cocok untuk di pasang di blog mereka masing-masing. Perlu anda ketahui bahwa daftar isi blog adalah sebuah halaman yang dibuat oleh pemilik blog untuk memudahkan pembaca dalam mengakses setiap bagian konten blog secara cepat.


Daftar isi (sitemap, peta situs) dalam blog sebenarnya berisi semua judul artikel yang telah diterbitkan dan juga dapat dikelompokkan berdasarkan kriteria tertentu, contohnya berdasarkan nama label. Dengan memberikan menu daftar isi disetiap blog memungkinkan pengunjung lebih mudah dalam menjelajahi semua konten yang ada. Lalu apa fungsi daftar isi bagi blog?

Fungsi Daftar Isi di Blog
  1. Dapat mempermudah pengunjung dalam mencari artikel,
  2. Dapat digunakan sebagai alat navigasi yang baik bagi blog,
  3. Mempermudah pengindeksan mesin pencari, seperti Google, Bing, Yahoo dan lain-lain,
  4. Dapat digunakan sebagai Internal link,
  5. Dapat meningkatkan PV (Pageviews) bagi blog,

Baca: Panduan Membuat Artikel di Blogger

Jika daftar isi begitu penting bagi setiap blog, berikut saya jabarkan cara membuat daftar isi di blog yang baik dan saya peroleh dari situs Kompi Ajaib milik mas Adhy Suryadi. Simak beberapa langkah dibawah ini.

Cara Membuat Daftar Isi Blog Non AMP


1. Masuk ke dashboard blogger lalu buka tab menu 'Pages'. Kemudian klik 'New page'




2. Setelah itu anda akan dibawa ke halaman baru seperti saat membuat artikel di blog, lalu tuliskan judul Sitemap atau Daftar Isi, kemudian ganti ke Mode 'HTML' kemudian copy-paste kode html dibawah ini. Jangan lupa tekan 'Save' untuk menyimpan.

<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>
<br />
<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">Artikel terbaru</option> <option value="updated">Artikel yang terakhir di update</option> </select></td></tr>
<tr><td><label for="label-sorter">Filter artikel berdasarkan kategori:</label></td> <td><select disabled="" id="label-sorter"> <option selected="">Loading....</option> </select></td></tr>
<tr>                 <td><label for="feed-q">Cari artikel dengan kata kunci:</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 />
<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>

Perhatikan baik-baik gambar dibawah ini




3. Setelah benar-benar sesuai tekan 'Publish'

Dengan demikian blog anda telah memiliki daftar isi, sehingga dapat memudahkan pengunjung untuk mencari artikel yang telah diterbitkan dalam situs anda.

Daftar isi berbeda dengan artikel, sebab hanya berisikan tautan ke setiap artikel yang telah diterbitkan dan kebanyakan tidak diberikan kolom komentar. Lalu bagaimana cara menghilangkan kolom komentar di halaman daftar isi? simak penjelasan dibawah ini.

Cara Menghilangkan Kolom Komentar di Halaman Daftar Isi Blog



Disaat anda sedang berada pada tahap membuat daftar isi (seperti nomor 3 diatas) perhatikan pada sebelah kanan. Kemudian tekan 'Options', lalu pada bagian 'Reader comments' ganti menjadi 'Don't allow, hide existing Compose mode' setelah itu tekan 'Done'.




Demikian Cara Membuat Daftar Isi di Blog mudah dan cepat, semoga dengan memasang daftar isi dapat meningkatkan pageviews blog anda sehingga bauncerate menjadi lebih kecil.
Disqus Comments