JSFiddle: Pembuatan Sitemap Interesting on Blog

https:////example.com/style.css X

#resultDesc {
  margin:0;
  padding:0 0;
  color:#999;
  font-weight:bold;
}

#resultDesc span {
  margin:0 auto;
  padding:5px 10px 7px;
  color:#D64D52;
}

#feedNav,
#feedNav:hover {
  margin:0 auto;
  height:34px;
  line-height:34px;
  text-align:center;
  color:#fff;
  font:bold 12px/30px Arial,Sans-Serif;
  background-color:#3c3c3c;
  border-top:1px solid #444;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}

#feedNav a,
#feedNav span {
  color:#999;
  padding:0;
  text-decoration:none;
}

#feedNav:hover {
  color:white;
  background-color:#444;
}

#feedNav:active {
  background-color:#527915;
}

#feedNav span {
  cursor:wait;
}

#table-outer {
  height:30px;
  text-align:center;
  padding:0;
  margin:15px 20px 0;
}

#table-outer #orderFeedBy {
  float:left;
}

#table-outer #postSearcher {
  float:right;
}

#table-outer input {
  display:inline-block;
  vertical-align:right;
  margin:0 2px 0 0;
  padding:0 0;
}

#table-outer select[disabled] {
  opacity:.4;
}

#postSearcher input,
#table-outer select {
  width:33%;
  background-color:#111;
  border:none;
  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 {
  width:33%;
  padding:0;
  margin:0;
}

#postSearcher input {
  width:96%;
  padding:5px 5px;
}

#postSearcher input:focus,
#table-outer select:focus {
  background-color:#090909;
}

#tabbed-toc {
  width:100%;
  margin:5px auto 0;
  background-color:#333;
  border-left:1px solid #222;
  border-right:1px solid #444;
  border-top:1px solid #222;
  border-bottom:1px solid #444;
  overflow:hidden;
  position:relative;
  color:#888;
}

#tabbed-toc .loading {
  margin:20px 47%;
}

#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}

#tabbed-toc #labelSorteres {
  width:20%;
  float:left;
  margin:0 auto;
}

#tabbed-toc #labelSorter ul {
  position:relative;
  margin-top:-36px;
  background-color:#333;
}

#tabbed-toc #labelSorter li a,
#tabbed-toc #labelSorteres #loadCat li a {
  display:block;
  font:bold 10px/28px Helmet,Freesans,Sans-Serif;
  height:34px;
  line-height:34px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#CCC;
  border-top:1px solid #444;
  border-left:1px solid #444;
  border-bottom:1px solid #222;
  border-right:1px solid #222;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 10px;
  margin:0;
  cursor:pointer;
}

#tabbed-toc #labelSorteres #loadCat .allowed,
#tabbed-toc #labelSorter .allowed {
  cursor:not-allowed;
}

#tabbed-toc #labelSorter li a:hover {
  outline:none;
  background-color:#3c3c3c;
  color:white;
}

#tabbed-toc #labelSorter li a.active-tab {
  color:#C4DEF0;
  font-size:13px;
  font-weight:bold;
  outline:none;
  z-index:1;
  padding:0 10px;
  margin:0;
  background-color:#3c3c3c;
}

#tabbed-toc #labelSorter li a.active-tab:hover {
  cursor:not-allowed;
}

#tabbed-toc #labelSorter .disabled,
#tabbed-toc #labelSorter .disablet {
  display:none;
}

#tabbed-toc .feedline {
  width:80%;
  float:right;
  text-align:left;
  margin:0 auto;
  padding:0;
  background-color:#333;
  border-bottom:1px solid #222;
}

#tabbed-toc #feedContainer {
  background-color:#333;
}

#tabbed-toc #feedContainer li {
  float:left;
  width:100%;
  margin:0 auto;
  list-style:none;
  background-color:#333;
  font:10px Helmet,Freesans,Sans-Serif;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}

#tabbed-toc #feedContainer li.bold {
  width:50%;
}

#tabbed-toc #feedContainer li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}

#tabbed-toc #feedContainer li a.item-title {
  display:block;
  position:relative;
  font-weight:normal;
  font-size:13px;
  color:#999;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  height:34px;
  line-height:34px;
  padding:0 12px;
  text-transform:uppercase;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}

#tabbed-toc #feedContainer li a.item-title:hover,
#tabbed-toc #feedContainer li a.item-title:focus {
  color:#999;
  outline:none;
  border-left:4px solid #066696;
  -webkit-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  -moz-box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
  box-shadow:inset -1px 0 0 #222,inset 1px 0 0 #444;
}

#tabbed-toc #feedContainer li .summary {
  display:block;
  height:50px;
  padding:10px 12px 10px;
  font-style:italic;
  color:#ccc;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
}

#tabbed-toc #feedContainer li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #3c3c3c;
  background-color:#292929;
}

#tabbed-toc #feedContainer li .itemfoot {
  clear:both;
  height:34px;
  line-height:34px;
  padding:0 10px;
  color:#666;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;
  position:relative;
}

#tabbed-toc #feedContainer li .itemfoot a.itemrmore {
  float:right;
  font-weight:bold;
  color:#3B5998;
  text-decoration:none;
}

#tabbed-toc #feedContainer li .itemfoot a.itemrmore:hover {
  color:#555;
  background-color:transparent;
  text-decoration:none;
  border-color:transparent;
}

https:////example.com/script.js X

var tocConfig = {
    url: "https:////idtutorplus.blogspot.com", // Ganti nilainya menjadi URL blog anda
    feedNum: 12, // Jumlah posting yang tampil
    numChars: 100, // Jumlah ringkasan posting
    thumbWidth: 40, // Ukuran thumbnail posting
    newTabLink: true, // Membuka link pada tab baru
    showDates: true, // Menampilkan tanggal publis
    labelName: false, // Menentukan label yang akan di tampilkan
    showSummaries: true, // Menampilkan ringkasan posting
    showThumbnails: true, // Menampilkan thumbnail posting
    navText: "Berikutnya ▼", // Memuat artikel lainnya
    frontText: "Kembali ke Awal ⇑", // Artikel sudah mencapai batas
    moreText: "Selengkapnya ►", // Readmore atau baca selengkapnya
    loading: "<span>Memuat Content...</span>", // Sedang memuat content
    searching: "<span>Mencari...</span>", // Sedang mencari content
    noResult: "Tak Ditemukan", // Content tidak di temukan
    loadCat: "Sedang Memuat Label...", // Memuat label
    resetCat: "Reset Ulang Category...", // Reset label
    noImage: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==", // Artikel tanpa gambar
    monthNames: ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agu", "Sep", "Okt", "Nov", "Des"] // Bulan terbit artikel
};