Membuat
daftar isi blog (peta situs, sitemap, table of content)
berdasarkan label atau kategori posting merupakan hal yang sangat penting untuk memudahkan user ketika berselancar di blog anda. Selain itu daftar isi blog sangat disukai mesin pencari (search engine). Karena pada prinsipnya, sebuah blog yang user friendly pasti juga SEO friendly.
Oleh sebab itu, dalam kesempatan kali ini saya akan berbagi cara mudah membuat daftar isi blog. Pembuatan daftar isi blog tidaklah sulit, anda hanya perlu menyimak artikel ini dalam beberapa menit dan saya jamin anda dapat langsung mengaplikasikannya pada blog anda sendiri. Tapi sebelum kita mulai tutorialnya, anda bisa melihat contoh daftar isi blog sebagai motivasi dan gambaran bagi anda megnenai daftar isi blog itu sendiri.
Baik, setelah anda melihat contoh daftar isi blog tadi, kita dapat memulai tutorial cara mudah membuat daftar isi blog. Kita akan gunakan 6 langkah singkat dan mudah berikut ini.
Cara Mudah Membuat Daftar Isi Blog
1.Klik menu
"Page" (Halaman) di Dashboard Blog
2.Klik New Page
(Halaman Baru)
3.Isi nama halaman dengan Sitemap, Peta Situs, atau Daftar Isi
4.Klik tombol mode HTML
5.Copy dan Paste salah satu kode HTML daftar isi di bawah ini.
Jangan lupa ganti dulu contohblognih dengan nama blog Anda.
6.Klik Publish!
1. Kode Daftar Isi Blog Simple
Berdasarkan Kategori/Label (DEMO)
<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/7366511402/simplesitemap.js"></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=bloggersitemap"></script>
Alternatif:
Untuk tampilan daftar isi yang "lebih cantik" anda bisa coba menggunakan kode di bawah ini:
<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://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
#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://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
2. Kode Daftar Isi Berdasarkan
Tanggal Publikasi
<script src="
http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js
"></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
3. Kode Daftar Isi Berdasarkan
Tanggal Publikasi Plus Kotak
<div style="background-color: none;
border: 1px solid #000000; height: 400px; margin: auto; overflow: auto;
padding: 3px; text-align: left; width: 100%;">
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
<script src=" http://mastergomaster.googlecode.com/files/daftar%20isi%20blog.js "></script>
<script src="http://contohblognih.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>
Demikianlah tutorial cara mudah membuat daftar isi blog dari saya. Selain kode yang saya berikan tadi, diluar sana juga masih banyak bertebaran berbagai jenis kode sitemap/daftar isi yang juga disertai dengan tutorial cara mudah membuat daftar isi blog. Selamat memilih daftar isi yang sesuai dengan karakter blog anda! Good Luck!
0 Response to "Cara Mudah Membuat Daftar Isi Blog"
Post a Comment