Cara Membuat dan Menampilkan SiteMap / Daftar Isi Keren

Update kali ini saya mau share tentang bagaimana Cara Membuat Sitemap Keren Di Blogspot, sitemap atau daftar isi ini berfungsi untuk memudahkan pembaca blog untuk mencari artikel yang dicari atau yang menarik dan untuk mempermudah hal tersebut maka solusinya yaitu menggunakan sitemap.

'SS' Daftar Isi / SiteMap

Pembuatan sitemap atau daftar isi untuk blogger ini sangatlah mudah, jika kalian ingin membuat sitemap maka silahkan ikuti langkah-langkah dibawah ini:

1. Silahkan Login ke » Blogger.com

2. Masuk ke edit HTML

3. Cari kode ]]></b:skin> (biar gampang klik sekali kemudian Ctrl+F)

4. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>





'CSS' sitemap / daftar isi

#table-outer table {
width: 100%;
margin:0;
padding:0;
}
#table-outer input, #table-outer select {
padding: 4px;
font: inherit;
border: 2px solid rgba(177, 0, 0, 0.26);
width: 170px;
box-sizing: border-box;
}
#table-outer select {
cursor:pointer;
}
#resultDesc {
margin-bottom:10px;
 }
#feedContainer {
overflow: hidden;
margin-top: 20px;
}
#feedContainer strong {
font-size: 10px;
}
#feedContainer, #feedContainer li {
padding: 0;
margin: 0;
list-style: none;
}
#feedContainer li {
float: left;
width: 50%;
margin-bottom: 10px;
position: relative;
z-index: 0;
}
#feedContainer .inner {
padding: 8px;
margin: 0 5px;
position: relative;
background-color: #FFFFFF;
border: 1px solid rgba(177, 0, 0, 0.26);
border-radius: 2px;
height: 133px;
}
#feedContainer img {
float: left;
margin: 0 8px 0 0;
max-width: 100%;
border: 1px solid #C7C7C7;
padding: 3px;
}
#feedContainer .toc-title {
max-height: 33px;
overflow: hidden;
}
#feedContainer .toc-title:hover {
text-decoration:underline;
}
#feedContainer .news-text {
font-size:11px;
}
#feedNav a, #feedNav span {
display: block;
text-align: center;
color: #FFFFFF;
text-decoration: none;
background-color: #AF0606;
padding: 5px;
width: 95%;
margin: 0 auto;
border-radius: 2px;
}
#feedContainer .date {
position: absolute;
bottom: 0;
right: 0;
background-color: #AF0606;
color: #FFFFFF;
font-size: 9px;
padding: 3px 2px;
width: 75px;
}
#feedContainer .date .dd {
font-size: 15px;
line-height: 18px;
font-weight: bold;
}
#feedContainer .date span {
display: inline-block;
line-height: 12px;
text-align: center;
margin-left: 5px;
}

5. Klik 'Simpan Template'

Belum selesai sampai disini, Kemudian

6. add new » Page/Halaman

7. klik » laman kosong (buat laman baru)

8. Centang html karena kalau mode compose scriptnya gak bakalan berfungsi

9. masukan script dibawah ini:

'Script' sitemap / daftar isi di Laman Mode Compose


<div id="table-outer">
<table>
<tr><td><label>Urutkan posting 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>Filter posting berdasarkan kategori:</label></td><td><span id="labelSorter"><select disabled><option selected>Loading...</option></select></span></td></tr>
<tr><td><label>Cari dengan kata kunci:</label></td><td><form id="postSearcher">
<input type="text"/></form>
</td></tr>
</table>
</div>
<header id="resultDesc"></header><ul id="feedContainer"></ul>
<div id="feedNav">
Loading...</div>
<script src="https://googledrive.com/host/0B-GXzRKoPbNnR3N0Z0dMQ0lDYWM" type="text/javascript"></script>