Saya juga pernah membaca pada suatu blog di google yang mengatakan bahwa halaman daftar isi dalam suatu blog sangat penting untuk pendaftaran adsense. Namun saya sendiri belum terlalu yakin hal tersebut benar atau hanya sekedar isu.
Kalau saya pribadi membuat halaman sitemap atau daftar isi ini hanya untuk memudahkan pengunjung blog ini menemukan artikel yang mereka cari. Selain itu saya hanya ingin melengkapi blog ini saya biar kelihatan lengkap seperti blog lain.
Beberapa Fungsi Daftar Isi Blog
Sebelum melanjutkan ke pembahasan cara membuat daftar isi keren dan responsive di blog, sebaiknya sobat harus mengetahui dulu apa saja kegunaan dari daftar isi ini. Jangan hanya memasang saja namun tidak tau kegunaannya. Silahkan baca beberapa fungsi daftar isi dalam blog berikut ini.
1. Memudahkan Pengunjung Mencari Artikel
Sudah tidak diragukan lagi bahwa widget daftar isi blog sangat ampuh untuk memudahkan pengunjung mencari artikel di blog sobat. Dari pada mencari di label langsung lebih baik mencari di daftar isi. Jika cari artikel di label maka pengunjung harus mengklik older post dulu untuk melanjutkan ke artikel selanjutnya. Kalau di widget daftar isi hanya dengan mengklik label maka akan keluar semua artikel yang ada di label tersebut.
2. Ampuh Untuk Menambah Internal Link
Seperti yang kita ketahui, internal link atau dalam bahasa Indonesia link masuk sangat penting untuk blog sobat dan ini menjadi salah satu tips optimasi seo blog yang bagus. Dengan adanya halaman widget daftar isi blog maka halaman tersebut akan membentuk internal link yang mengarah ke semua atikel sobat. Ini akan menjadi dampak baik untuk blog sobat.
3. Mempermudah Artikel Terindeks
Nah ini yang sangat penting. Dengan adanya halaman daftar isi dalam blog sobat akan membuat artikel blog mudah terindex oleh mesin pencari. Bukan hanya pengunjung yang mudah menemukan artikel di blog sobat dengan adanya halaman daftar isi, namun spider juga akan mudah mengindex artikel sobat dengan cepat.
Sekarang setelah sobat tau beberapa kelebihan menggunakan daftar isi di blog, mari kita lanjutkan ke tahap selanjutnya. Bagi sobat yang ingin membuat halaman daftar isi keren di blog, silahkan ikuti tutorial berikut ini.
Cara Membuat Daftar Isi Blog Keren
Disini saya akan berbagi beberapa widget untuk membuat daftar isi di halaman statis blog sobat. Dalam tutorial ini saya akan berbagi hingga 5 style atau tampilan. Nanti silahkan sobat pilih mau pakai yang mana untuk pasang di blog sobat.
Widget daftar isi yang pertama memadukan 3 warna yang sangat menarik untuk di pandang yaitu hitam, biru tua, dan abu-abu. Widget yang satu ini terdiri atas 3 kolom diantaranya judul artikel, label artikel dan tanggal penerbitan artikel. Tidak lupa juga dilengkapi dengan menu sortir artikel menurut label.
<style>
#tocTable {
border:2px solid white;
font:normal normal 11px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
border-collapse:collapse;
text-align:left;
margin:0 0 5px;
}
#tocTable th,
#tocTable td {
border:1px solid white;
background-color:#fafafa;
padding:10px 15px;
}
#tocTable th {
background-color:#5d5d5d;
font-weight:bold;
color:white;
text-shadow:0 1px 0 rgba(0,0,0,.3);
}
#th-1 {
width:60%;
background-color:#5A930D;
}
#th-2,#th-3 {width:20%}
#tocTable td.toc-header-col-1,
#tocTable td.toc-header-col-2 {
padding:0 !important;
background-color:#2372A7;
}
#tocTable td.toc-header-col-3 {background-color:#D7DEF0}
#tocTable a {
display:block;
text-decoration:none;
color:white;
padding:10px 15px;
background:none;
}
#tocTable td.toc-header-col-1:hover,
#tocTable td.toc-header-col-2:hover {
background-color:#174B6F;
-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
-moz-box-shadow:inset 0 0 3px rgba(0,0,0,.4);
box-shadow:inset 0 0 3px rgba(0,0,0,.4);
}
#tocSort {
display:block;
width:220px;
font:normal bold 12px/normal Verdana,Tahoma,Arial,Sans-Serif;
color:#333;
cursor:pointer;
border:none;
outline:none;
background-color:#eee;
margin:0 0 2px 0;
padding:5px;
}
</style>
<script>
var theTotalPosts = 9999, // Tentukan jumlah maksimal posting
theOptions = "Sortir...", // Label opsi 1
theSortPosts = "Sortir berdasarkan Abjad", // Label opsi 2
theSortLabels = "Sortir berdasarkan Label", // Label opsi 3
theTitles = "Judul Artikel", // Header tabel 1
theLabels = "Label Artikel", // Header tabel 2
theDates = "Bulan Terbit", // Header tabel 3
theBlankLabels = "Tak Berlabel", // Label kosong
theSiteUrl = "http://www.aqbar.id"; //
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/toc-table-sort.js"></script>Style 2
Hampir sama dengan widget yang diatas, widget ini juga menampilkan artikel menurut label. Namun yang menjadi perbedaan dari widget pertama adalah widget ini menampilkan artikel menurun ke bawah. Widget ini juga tidak ada tanggal penerbitan artikel seperti pada widget sebelumnya.
<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">
<script src="https://googledrive.com/host/0ByNodV_m9cVLR0pmWFgwZ1NmdW8/" type="text/javascript"></script>
<script src="http://www.aqbar.id/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
Style 3
Daftar isi blog yang ini hampir sama dengan daftar isi blog pada nomor 1 diatas. Yang menjadi perbedaan adalah dari segi warna. Widget daftar isi blog yang ini memakai warna pink atau merah muda yang sangat cocok buat blog cewek. Widget ini tidak ada menu sortir by label seperti widget yang pertama tadi.
<style type="text/css">
#bp_toc {background:#ffaaa4;color:#666;margin:0 auto;padding:5px;}
span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#ffcfcc;font-family:'Open Sans';font-weight:700;text-transform:uppercase;font-size:30px;line-height:normal;}
.toc-header-col1 {padding:10px;background-color:#f5f5f5;width:250px;}
.toc-header-col2 {padding:10px;background-color:#f5f5f5;width:75px;}
.toc-header-col3 {padding:10px;background-color:#f5f5f5;width:125px;}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
text-decoration:none;color:#aaa;font-family:'Open Sans';font-weight:700;letter-spacing: 0.5px;}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
text-decoration:none;}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fdfdfd;padding:5px;padding-left:5px;font-size:89%}
.toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#666;font-size:13px;}
.toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#e76e66;}
#bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
.toc-entry-col1 {counter-increment:rowNumber;}
#bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
td.toc-entry-col2 {background:#fafafa;}
</style>
<div id="bp_toc">
</div>
<script src="https://cdn.rawgit.com/teknomia/sitemap/95c4a4a6/sitemap-blogtoc.js" type="text/javascript"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
#comments {display:none;}
</style>Style 4
Widget sitemap yang satu ini adalah buatan mas Teja sukmana sang pemilik blog mas tampan. Widget ini memiliki tampilan yang sangat keren jka dilihat. Dan widget ini juga sangat cepat loading nya sehingga tidak memberatkan halaman blog sobat. Selain itu widget yang ini juga sangat responsive. Mengikuti layar perangkat secara otomatis saat di buka.
<div class='jontor'>
<script src="https://cdn.rawgit.com/teknomia/sitemap/2ad476de/sitemap-keren.js"></script>
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=teknomia_Load"></script>
</div>
<style type='text/css'>.jontor{width:100%;border-collapse:collapse;text-align:left;overflow:hidden;margin:0 auto;}
.jontor a{color:black;}
.jontor p .teknomia_Label{background:#4ECDC4;display:block;padding:12px;}
.jontor ol li{position:relative;display:block;padding:.4em .4em .4em .8em;margin:.5em 0 .5em 2.5em;background:#d9f4f2;color:#666;text-decoration:none;transition:all .3s ease-out;}
user agent stylesheetli{display:list-item;text-align:-webkit-match-parent;}
.jontor ol li:before{content:counter(li);counter-increment:li;position:absolute;left:-2.5em;top:50%;margin-top:-1em;background:#0fa9cd;color:#fff;height:2em;width:2em;line-height:2em;text-align:center;font-weight:bold;}
.jontor ol li:hover:after{left:-.5em;border-left-color:#0fa9cd;}
.jontorol li:hover{box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);transition:all 0.3s cubic-bezier(.25,.8,.25,1);}
.jontor ol li:after{position:absolute;content:'';border:.5em solid transparent;left:-1em;top:50%;margin-top:-.5em;transition:all .3s ease-out;}
ol{counter-reset:li;list-style:none;font:15px 'Arial';padding:0;margin-bottom:4em;text-shadow:0 1px 0 rgba(255,255,255,.5);margin-left:26px;}
.teknomia_Postname li:nth-of-type(odd){background:#f1f3f3;}
.new{color:red!important;font-weight:700;font-style:italic;}
user agent stylesheetol{display:block;list-style-type:decimal;-webkit-margin-before:1em;-webkit-margin-after:1em;-webkit-margin-start:0;-webkit-margin-end:0;-webkit-padding-start:40px;}
</style>Style 5
Widget yang terakhir masih karya dari mba Arlina. Widget ini sangat bagus menurut saya. Di blog ini saya juga memakai widget ini. Sobat bisa melihat di halaman sitemap blog ini. Yang saya suka dari widget ini adalah tampilannya yang sangat menarik. Tidak semua artikel di label muncul. Hanya label yang kita klik saja akan muncul artikelnya. Ini akan membuat halaman daftar isi blog sobat menjadi sangat ringan.
<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#fff;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#444359!important;transition:initial}
.table-of-content a{color:#d9d9d9;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
url: 'http://www.aqbar.id',
containerId: 'table-of-content',
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
sortAlphabetically: {
thePanel: true,
theList: true
},
maxResults: 9999,
activePanel: 1,
slideSpeed: {
down: 400,
up: 400
},
slideEasing: {
down: null,
up: null
},
slideCallback: {
down: function() {},
up: function() {}
},
clickCallback: function() {},
jsonCallback: '_toc',
delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>Cara Memasang Daftar Isi Di Blog
Cara memasang kode widget daftar isi blog diatas sangat mudah. Sobat tidak harus mengedit template. Sobat hanya perlu masuk ke menu Laman. Kemudian buat halaman baru. Ubah metode penulisan ke HTML lalu tempelkan salah satu kode dari widget yang sobat sukai diatas ke halaman tersebut. Untuk judul halaman bisa sobat isi sesuka hati. Misalnya Daftar Isi Blog.
Pada kode widget style 1, 2 dan 5 ada link blog ini www.aqbar.id silahkan ganti dengan link blog sobat jika sobat menggunakan salah satu dari widget tersebut.
Apabila saat sobat memasang kode di halaman blog sobat tapi daftar isi blog tidak muncul, silahkan buat halaman baru dan masukkan lagi kode diatas. Biasanya halaman yang sudah pernah di masukkan widget daftar isi sebelumnya akan susah untuk di masukkan kode daftar isi baru. Silahkan buat halaman baru saja biar cepat.
Sekarang setiap menerbitkan artikel baru maka artikel tersebut akan tampil otomatis di widget daftar isi blog sobat yang menempati label masing-masing. Jadi sobat tidak usah cape-capek update daftar isi blog setelah menerbitkan artikel baru.
