Cara Membuat Daftar Isi (Sitemap) Keren

Sitemap atau Daftar Isi adalah kumpulan postingan postingan suatu blog yang di letakkan disatu halaman untuk memudahkan pengunjung mencari artikel yang ingin dibaca. Nah, kali ini saya akan berbagi Cara Membuat Daftar Isi (Sitemap) Keren.

Halo, setelah sebelumnya saya membagikan Cara Membuat Widget Alexa Rank, kali ini saya akan membagikan Cara Membuat Daftar Isi (Sitemap) Keren untuk blog. Nah, buat kalian yang mau memsang atau mencari Sitemap keren inilah solusinya.

Sebelum saya membagikan caranya, pertama tama marilah kita ketahui dahulu apa itu sitemap atau daftar isi. Sitemap atau Daftar Isi adalah kumpulan postingan postingan suatu blog yang di letakkan disatu halaman untuk memudahkan pengunjung mencari artikel yang ingin dibaca.

Nah, Jika kalian sudah tau apa itu sitemap, kali ini saya akan memberikan demonya :

DEMO DAFTAR ISI (SITEMAP) KEREN

Nah, sekarang saya akan membagikan scriptnya.

<style type='text/css'>
#resultDesc {
    margin:0 30px;
    padding:0 0;
    border-bottom:4px solid #31353e;
    display:none;
}
#resultDesc span {
    display:block;
    margin:0 0;
    padding:5px 10px 7px;
    color:#D64D52;
}
#feedContainer {
    display:block;
    clear:both;
    margin:0 30px;
    padding:0 0;
    overflow:hidden;
    position:relative;
    border:1px solid #3d464f;
    border-top:none;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
}
#feedContainer:after {
    content:"";
    display:block;
    width:1px;
    height:100%;
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    background-color:#3d464f;
}
#feedContainer li {
    list-style:none;
    margin:0 0;
    padding:0 0;
    border-top:1px solid #3d464f;
    color:#999;
    width:50%;
    float:left;
    display:inline;
}
#feedContainer li .inner {
    margin:15px 16px;
    height:120px;
    overflow:hidden;
    word-wrap:break-word;
    text-overflow:ellipsis;
}
#feedContainer li a {
    text-decoration:none;
    color:#5687B8;
}
#feedContainer li a:hover {
    text-decoration:none;
    color:#eee;
}
#feedContainer li a.toc-title {
    font-weight:bold;
    font-size:12px;
    margin:0 0;
}
#feedContainer li .news-text {
    margin:10px 0 0
}
#feedContainer li a img {
    margin:0 10px 0 0;
    padding:4px 4px;
    background-color:#222;
    border:1px solid #111;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -webkit-box-shadow:0 1px 0 #444;
    -moz-box-shadow:0 1px 0 #444;
    box-shadow:0 1px 0 #444;
    float:left;
}
#feedNav {
    margin:10px 30px 0;
    text-align:center;
    font:normal bold 12px/30px Verdana, Arial, Sans-Serif;
}
#feedNav a, #feedNav span {
    background-color:#111;
    padding:0 0;
    color:#999;
    text-decoration:none;
    display:block;
}
#feedNav a:hover, #feedNav a:active {
    background-color:black;
    color:white;
    border:none !important;
}
#feedNav span {
    cursor:wait
}
#table-outer {
    padding:7px 10px;
    margin:30px 30px 0;
}
#table-outer input {
    display:inline-block;
    vertical-align:top;
    margin:0 2px 0 0;
    padding:0 0;
}
#table-outer table {
    border:none
}
#table-outer td {
    padding:2px 2px;
    border:none;
}
#table-outer label {
    font-weight:bold;
    color:#999;
    text-shadow:0 1px 0 rgba(0, 0, 0, .4);
    display:block;
    text-align:right;
    margin:0 10px 0 0;
}
#table-outer select[disabled] {
    opacity:.4
}
#postSearcher {
    display:block;
    margin:0 0;
    padding:0 0;
}
#postSearcher input, #table-outer select {
    width:180px;
    background-color:#111;
    border:none;
    display:block;
    margin:0 0;
    padding:5px 5px;
    font:normal normal 10px Tahoma, Verdana, Arial, Sans-Serif;
    text-transform:uppercase;
    color:#777;
    outline:none;
    -webkit-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    -moz-box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
    box-shadow:inset 0 1px 3px black, 0 1px 0 #444;
}
#postSearcher input {
    width:170px;
    padding:5px 5px;
}
#postSearcher input:focus, #table-outer select:focus {
    background-color:#090909
}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style>
<script type='text/javascript'>
//<![CDATA[
var tocConfig = {
 url: "http:/agungrianto.com/",
 feedNum: 5,
 labelName: false,
 numChars: 100,
 thumbWidth: 40,
 navText: "Berikutnya &#9660;",
 frontText: "Atas &uArr;",
 resetToc: "Reset",
 noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU58kbCTQ_j6UEUDMNpiD56F4L4EY_ATD4rl-kXK9zttm4mhwEe-vk1awv0DvYbvsn_5GS9zXVWYo-EV6Yc8YKT5W3vcvP_UZ6p1ZrAw8buOw437jgkIX-Rfzr-5oym8arBPACf2FWwz0/s1600/no+images+Variasi+Blogger.jpeg",
 loading: "<span>Memuat...</span>",
 searching: "<span>Mencari...</span>",
 noResult: "Tak Ditemukan"
};
//]]>
</script>

<div id="table-outer">
    <table border="0">
        <tbody>
            <tr>
                <td>
                    <label for="orderFeedBy">Urutkan artikel berdasarkan:</label>
                </td>
                <td>
                    <select id="orderFeedBy">
                        <option value="published" selected>POSTING TERBARU</option>
                        <option value="updated">POSTING DIPERBAHARUI</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="labelSorterSelect">Filter artikel berdasarkan kategori:</label>
                </td>
                <td><span id="labelSorter"><select id="labelSorterSelect" disabled><option selected>MEMUAT...</option></select></span>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="feed-q-box">Cari dengan kata kunci:</label>
                </td>
                <td>
                    <form id="postSearcher">
                        <input type="text" id="feed-q-box">
                    </form>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<header id="resultDesc"></header>
<ul id="feedContainer"></ul>
<div id="feedNav"></div>
<script type="text/javascript" src="https://sites.google.com/site/variasibloggerblogspotcom/widget_variasi_blogger_blogspot_com/Variasi-Blogger-advancedToc.js"></script>

Cara Pemakaian :

1. Buat laman kosong di blog anda,
2. Lalu paste kan script diatas pada laman anda dalam bentu html bukan compose,
3. lalu pilih Publikasikan.

Keterangan :

Script yang berwarna Merah silahkan ganti dengan alamat blog anda, untuk mengubah jumlah tampilan pos silahkan ubah sesuka hati anda.

Nah, itulah Cara Membuat Daftar Isi (Sitemap) Keren. Jika ada kerusakan link harap laporkan untuk segera diperbaiki.

Bagikan Artikel ini