Sitemap Elegan

Fungsi sitemap adalah untuk menginformasikan url-url yang berada pada blog  agar lebih mudah di crawl dan dijelajahi oleh para tools atau robot search engine dan akan memudahkan pengunjung mencari artikel yang dibutuhkannya. Selain itu, sitemap secara tidak langsung akan manambah nilai SEO Optimization. Berikut cara penerapannya :

Login ke akun blog klik entri halaman baru HTML,
copy kode dibawah ini pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style>
#toc-outer {
  font:normal 11px/14px Arial,Sans-Serif;
  color:white;
  text-align:left;
  margin:0px auto;
  background-color:#333;
  border-top:1px solid #666;
  -webkit-box-shadow:0px 1px 5px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 1px 5px rgba(0,0,0,0.7);
  box-shadow:0px 1px 5px rgba(0,0,0,0.7);
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
  overflow:hidden;
}

#loadingscript {
  font-weight:bold;
  font-size:20px;
  text-align:center;
  padding:30px 0px;
  height:1200px;
  text-decoration:blink;
}

.itemposts {
  margin:0px auto 0px;
  height:auto;
  overflow:hidden;
  display:block;
}

.itemposts h6 {
  margin:5px 5px 0px;
  font:bold 12px/14px Arial,Sans-Serif;
  text-transform:none;
  color:white;
  background-color:#444;
  background-image:-webkit-linear-gradient(#444 0%, #444 50%, #444 51%);
  background-image:-moz-linear-gradient(#444 0%, #444 50%, #444 51%);
  background-image:-ms-linear-gradient(#444 0%, #444 50%, #444 51%);
  background-image:-o-linear-gradient(#444 0%, #444 50%, #444 51%);
  background-image:linear-gradient(#444 0%, #444 50%, #444 51%);
  padding:5px 10px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
}

.itemposts h6 a {
  color:white;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,0.4);
}

.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  padding:4px;
  background-color:#333;
  background-image:-webkit-linear-gradient(#333, #999, #666);
  background-image:-moz-linear-gradient(#333, #999, #444);
  background-image:-ms-linear-gradient(#333, #999, #444);
  background-image:-o-linear-gradient(#333, #999, #444);
  background-image:linear-gradient(#333, #999, #444);
  border:0px solid green;
  border-right-color:#444;
  border-bottom-color:#444;
  -webkit-box-shadow:0px 0px 3px 1px black;
  -moz-box-shadow:0px 0px 3px 1px black;
  box-shadow:0px 0px 3px 1px black;
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
}

.itemposts .iteminside {
  margin:10px;
}

.itemposts .itemfoot {
  clear:both;
  padding:5px 10px;
  color:#e06666;
  background-image:-webkit-linear-gradient(#333, #444, #333, #222);
  background-image:-moz-linear-gradient(#333, #444, #333, #222);
  background-image:-ms-linear-gradient(#333, #444, #333, #222);
  background-image:-o-linear-gradient(#333, #444, #333, #222);
  background-image:linear-gradient(#333, #444, #333, #222);
  border-top:8px solid #444;
  overflow:hidden;
  position:relative;}

.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:red;
  position:absolute;
  top:5px;
  right:10px;}

.itemposts .itemfoot a.itemrmore:hover {color:aqua;}
#itempager {
  background-image:-webkit-linear-gradient(#000, #000, #000, #444);
  background-image:-moz-linear-gradient(#000, #333, #000, #444);
  background-image:-ms-linear-gradient(#000, #333, #000, #444);
  background-image:-o-linear-gradient(#000, #333, #000, #444);
  background-image:linear-gradient(#000, #333, #333, #444);
  padding:5px 7px;}

#pagination, #totalposts {
  color:#fff;
  display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;
  text-align:left;
  padding:0;
}

#pagination span, #pagination a {
    color: yellow;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #990099;
    background-image: linear-gradient(green 0%, #3161C2 50%, #990099 51%);
    border: 1px solid #fff;
    text-decoration: none;
    border-radius: 10px;
}

#pagination {
  margin:0px 10px 10px;
  background-color:#A10048;
  background-image:-webkit-linear-gradient(left,  #333, #A10048, #333);
  background-image:-moz-linear-gradient(left, #333, #A10048, #333);
  background-image:-ms-linear-gradient(left, #333, #A10048, #333);
  background-image:-o-linear-gradient(left, #333, #A10048, #333);
  background-image:linear-gradient(to right, #333, #A10048, #333);
  padding:7px 0px;
  border:1px dashed rgba(255,255,255,0.2);
  -webkit-box-shadow:0px 0px 0px 2px #24006B, 0px 2px 1px 3px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 0px 0px 2px #A10048, 0px 2px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 0px 0px 2px #A10048, 0px 2px 1px 3px rgba(0,0,0,0.2);
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}
</style>
<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya ",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://myscript2010s.blogspot.co.id",
    postPerPage   = 10,
    numChars       = 150,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfL32ayvnAT1QmpkbAGlPUR57zHRZ6bj1kvAM9pwGABdGd565uzopnmUrReEqCIi9W4chm6BScmt-2YPClipDVKYSS7J3WN4UU8lS1mQvRVXVn5C0ya23yaZH-mN9B4kPONubGdC5WjN0/s1600-r/Mys2010-logo-Blogg.png";
</script><script src="http://yourjavascript.com/45421136851/sitemap-elegan-mys2010.js
"rel='stylesheet'/></script>

Penjelasan :
Ganti link yang berwarna orange dengan link sobat

Sumber by. Dte Web Id
Ediited  by. Myscript2010

DEMO SHOW