Sitemap Minimalis Untuk Blog

Sitemap Minimalis Untuk Blog - Tampilan yang minimalis terkesan apa adanya, namun tetap terlihat mewah dan elegan untuk menghias menu Daftar Isi di blog Anda. Design sitemap ini saya apit dengan border bingkai ribbon pada sisi atas dan bawah, sedangkan untuk tampilan warna menggunakan background:linear-gradient dengan pemudaran warna pada sisi left dan right. Dan hasilnya:





DEMO SHOW



Untuk mengatur kecepatan muat halaman, saya meringkas beberapa perintah JavaScript yang mangatur loading-open, menghapus perintah jQuery dan menggantikannya dengan perintah variable-labelSorter, dan hasilnya waktu muat halaman dari 4,532 second menjadi 1.851 second, cukup ringan bukan.?.

Bagaimana.? Anda tertarik ingin mencoba Sitemap Minimalis ini pada blog, namun sebelumnya saya akan berikan beberap koleksi Daftar Isi blog sebagai pilihan buat sahabat semua pecinta SAHABAT BLOGGER 77, Koleksinya lihat pada TAB dibawah ini:

Daftar Isi Blogger

• Diary Notes Sitemap Theme
• Facebook Theme Sitemap
• Daftar Isi Sortir
• 2 Style Sitemap Black Color

Sitemap Minimalis Untuk Blog All Codes
1.1 CSS Element

• Edit Template
• Temukan kode ]]></b:skin>
• Copy semua CSS dibawah ini, lalu letakkan tepat diatasnya

#toc-outer {
  font:normal 11px/14px Verdana,Sans-Serif;
  color:black;text-align:left;margin:-25px 10px 0 10px;
  background-color:white;border-left:3px solid #39f;
  border-right:3px solid #39f;overflow:hidden}

#loadingscript {font:bold 20px/normal Arial;text-align:center;padding:30px 0px}
.itemposts {margin:10px 10px 0px;height:auto;overflow:hidden;display:block}
.ribbon-top {
  font:bold 16px/40px Cambria,Georgia,Times,Serif;
  color:#fff;width:auto;padding:0px 20px;
  background: linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-webkit-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-moz-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-o-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  position:relative;margin:0 auto;text-align:center}

.ribbon-top:before {
  content:"";position:absolute;top:100%;left:0px;
  width:0px;height:10px;border-width:6px;border-style:solid;
  border-color:#39f #39f transparent transparent}

.ribbon-top:after {
  content:"";position:absolute;top:100%;right:0px;
  width:0px;height:10px;border-width:6px;border-style:solid;
  border-color:#39f transparent transparent #39f}

.itemposts h6 {
  margin:0px 0px 10px;font:bold 15px/17px Sans-Serif;
  color:#6495ED;padding:0px 0px}

.itemposts h6 a {color:#285A7E}
.itemposts h6 a:hover {color:red}
.itemposts img {
  float:left;height:72px;width:72px;
  margin:0px 10px 5px 0px;padding:2px;
  background-color:white;border:1px solid #ccc;
  box-shadow:2px 4px 5px #ccc}

.itemposts .itemfoot {
  clear:both;padding:5px 10px;margin:10px 0px 0px;
  background: linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  background:-webkit-linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  background:-ms-linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  background:-moz-linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  background:-o-linear-gradient(left, #2c4762 80%,#b80000 50%,#b80000 100%);
  color:white;font-style:italic;overflow:hidden}

.itemposts .itemfoot::before {
  display: inline-block;content:"";width: 12px;height: 12px;
  border-radius: 50%;margin: 1px 10px 0 -3px;
  background: #39f;float:left;
  box-shadow: inset 0px 2px 4px rgba(0,0,0,0.4)}

.itemposts .itemfoot a.itemrmore {font-weight:bold;color:#d9d9d9;float:right}
.itemposts .itemfoot a.itemrmore:hover {color:#FFF8DC}
#itempager {padding:30px 0px}
#pagination, #totalposts {
  display:block;color:black;
  font:bold 10px Verdana,Arial,Sans-Serif;padding:0px;
  margin-bottom:10px;text-align:center}

#pagination span, #pagination a {
  color:white;display:inline;margin:0 1px;
  padding:3px 5px;text-indent:0px;
  background-color:#008080}

.ribbon-bot {
  font:bold 16px/28px Cambria,Georgia,Times,Serif;
  color:#fff;width:auto;padding:0px 20px;
  background: linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-webkit-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-moz-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  background:-o-linear-gradient(left, #39f 0%,#3B5998 50%,#39f 100%);
  position:relative;margin:-30px auto;text-align:center}

.ribbon-bot:before {
  content:"";position:absolute;bottom:100%;right:0px;
  width:0px;height:0px;border-width:5px;border-style:solid;
  border-color: transparent transparent #39f #39f}

.ribbon-bot:after {
  content:"";position:absolute;bottom:100%;left:0px;
  width:0px;height:0px;border-width:5px;border-style:solid;
  border-color:transparent #39f #39f transparent}

#pagination a:hover {background-color:#b80000}
#pagination span.actual {background-color:#b80000}
#pagination span.hidden {display:none}

1.2 HTML Code Input
Sebelumnya ganti siteUrl="http://sahabatblogger77.blogspot.com" dengan URL Blog Anda, selanjutnya Copy HTML-JavaScript berikut, dan letakkan pada formulir kosong Laman blog Anda, kode lengkapnya seperti ini:

<div class="ribbon-top">DAFTAR ISI BLOG</div>
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Total posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &raquo;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://sahabatblogger77.blogspot.com",
    postPerPage    = 10,
    numChars       = 370,
    imgBlank       = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwLpeKIvASGtWlRrvHZIkK260E045NZkCIHnKO0kcOKRFZ0AVR2kTAzt01orAb3mfKwpYWUBR9YD8lt6M6kKTxAyXa17rT7FJjLc3ZUhvD6pCck9xqWF4rN2M2UBnyZ2idxGM2FZ4VHc/s1600/sb77-image6.jpg";
</script>
<script src="https://s-blogger77.googlecode.com/svn/trunk/minimalis-theme-sitemap-design.js"></script>
<div class="ribbon-bot">Terima Kasih Atas Kunjungan Saudara</div>