Cara Membuat Sitemap Keren Mirip Blog DTE

Membuat Sitemap Keren Mirip Blog DTE - Sitemap atau daftar isi berperan cukup penting di blog kita, yakni untuk memudahkan pengunjung mengecek atau mencari artikel - artikel yang ada di blog kita, kali ini saya akan berbagi cara untuk membuatnya di blog.

Sitemap atau daftar isi kali ini memiliki tampilan mirip dengan blog legendaris DTE [Dora The Exploder], penasaran tampilannya gimana ? sobat bisa melihat tampilannya di sitemap blog ini.

DEMO

Gimana ? keren kan, cara membuatnya sangatlah mudah, berikut caranya.

1. Buka Blogger > Laman > Buat halaman baru atau gunakan halaman yang sudah ada
2. Beri judul halaman tersebut Sitemap atau Daftar Isi
3. Klik mode HTML

4. Pastekan kode sitemap dibawah ini tepat didalam laman mode HTML

<style type="text/css">
#table-outer {
  padding:7px 10px;
  margin:30px 30px 0;
}
#table-outer table {
  width:80%;
  margin:0;
}
#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 5px;
  font-size:86%;
  text-transform:uppercase;
  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;
  -webkit-box-sizing:content-box;
  -moz-box-sizing:content-box;
  box-sizing:content-box;
}
#table-outer input:focus,#table-outer select:focus {}
#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:116px;
  overflow:hidden;
  word-wrap:break-word;
  text-overflow:ellipsis;
}
#feed-container li a {
  text-decoration:none;
  color:#000;
}
#feed-container li a:hover {
  text-decoration:none;
  color:#eee;
}
#feed-container li .news-text {margin:10px 0 0;}
#feed-container li img {
  margin:0 10px 5px 0;
  padding:5px;
  background-color:#eee;
  border-radius:5px;
  float:left;
}
#result-desc {
  margin:0 30px;
  padding:0;
  border-bottom:2px solid #eee;
}
#result-desc span,#result-desc div {
  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:bold;
  text-transform:uppercase;
}
#feed-nav a,#feed-nav span {
  border:1px solid #eee;
  padding:0;
  color:#999;
  text-decoration:none;
  display:block;
  height:30px;
  line-height:32px;
}
#feed-nav a:hover,#feed-nav a:active {
  color:#555;
}
#feed-nav span {cursor:wait;}
@media (max-width:800px) {
    #feedContainer li {
        float:none;
        display:block;
        width:auto;
        height:auto;
    }
    #feedContainer:after {
        display:none
    }
}
</style><br />
<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">POSTING TERBARU</option>
<option value="updated">POSTING DIPERBAHARUI</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 dengan kata kunci:</label></td>                 <td><form id="post-searcher">
<input id="feed-q" type="text" /><br /></form>
</td>             </tr>
</tbody>     </table>
</div>
<br />
<header id="result-desc"></header><br /><br />
<br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://googledrive.com/host/0B81NL4MdK9CkZDEwUDJLb3FxYUU" type="text/javascript"></script>

5. Klik Simpan

Mudah bukan caranya, semoga bermanfaat.