Membuat Sitemap/Peta Situs/Daftar Isi ala DTE dengan CSS

Membuat Sitemap, Peta Situs, Daftar Isi ala DTE- Sebagian dari kalian mungkin memang sedang mencari...apa sih kode untuk Sitemap, Peta Situs, Daftar Isi ala DTE ? dan Allhamdulillah saya mendapatkan kode tersebut.

Lihat Sitemap

1. Blogger > Template > Edit HTML > cari kode </b:skin>, mengunakan fasilitas CTRL + F
lalu letakkan kode CSS dibawah ini, diatas kode < /b:skin>.
*klik 2 kali pada area dibawah ini, lalu tekan CTRL + C untuk mempercepat peng-copy-an

#table-outer {   padding:7px 10px;   margin:30px 30px 0; } #table-outer table {   width:80%;   margin:0; } #table-outer form {font:inherit;} #table-outer td {padding:2px 2px;} #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;   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%;   background-color:#FFFFFF;   border:none;   display:block;   margin:0;   padding:5px 5px;   font-size:70%;   text-transform:uppercase;   color:#000000;   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 {background-color:#FFFFFF;} #feed-container {   display:block;   clear:both;   margin:0 30px;   padding:0;   list-style:none;   overflow:hidden;   position:relative;   border:1px solid #000000;   border-top:none;   text-shadow:0 1px 0 rgba(0,0,0,.4); } #feed-container:after {   content:"";   display:block;   width:1px;   height:100%;   position:absolute;   top:0;   bottom:0;   left:50%;   background-color:#FFFFFF; } #feed-container li {   list-style:none;   margin:0;   padding:0;   border-top:1px solid #3c3c3c;   color:#999;   width:50%;   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:#5687B8; } #feed-container li a:hover {   text-decoration:none;   color:#47709A; } #feed-container li a.toc-title {font-weight:bold;} #feed-container li .news-text {margin:10px 0 0;} #feed-container li img {   margin:0 10px 5px 0;   padding:5px;   background-color:#222;   -webkit-border-radius:0;   -moz-border-radius:0;   border-radius:0;   float:left; } #result-desc {   margin:0 30px;   padding:0;   border-bottom:4px solid #303030; } #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 {   background-color:#111;   padding:0;   color:#999;   text-decoration:none;   display:block;   height:30px;   line-height:32px; } #feed-nav a:hover,#feed-nav a:active {   background-color:black;   color:white; } #feed-nav span {cursor:wait;} @media (max-width:800px) { #feedContainer li { float:none; display:block; width:auto; height:auto; } #feedContainer:after {   display:none } }

Sehabis itu buat Page/Laman Baru di blog kalian

Ubah mode Compose ke mode HTML

Lalu letakkan kode dibawah ini di mode HTML tadi :

<div id="table-outer">
<table border="0"><tbody>
<tr><td><label for="feed-order">Urutkan artikel berdasarkan:</label></td><td><selectid="feed-order"><option selected="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="disabled" id="label-sorter"><option selected="selected">MEMUAT...</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" /></form>
</td></tr>
</tbody> </table>
</div>
<br />
<br />
<br />
<header id="result-desc"></header> <br />
<ul id="feed-container"></ul>
<div id="feed-nav">
</div>
<script src="https://googledrive.com/host/0B-qFC4Ni6GSKdTZGbmdhUkUtbTA" type="text/javascript"></script>

Klik Publikasikan, lalu lihat hasilnya apakah sudah cocok ? kalau belum silahkan tanya kesini !