--✽ ✽ ✽--ASSALAMU'ALAIKUM--✽ ✽ ✽--

Apa kabar semua sobat blogger pada malam ini kami mau berbagi sedikit Tutorial yaitu Cara membuat Sitemap Keren di Blog sobat.

Kami gak panjang lebar kita langsung saja lihat demonya di bawah linik DEMO nya

Sobat bisa Lihat situs yang menyediakan Sitemap tersebut silakan Liniknya di bawah bos

Buat sobat yang mau pasang silakan Copy Kode di bawah ini

<script src="http://selladrt.googlecode.com/files/Style%20Daftar%20isi%20By%20Selladrt.js" type="text/javascript"></script>
<script src="http://www.bloggertutoria.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<style type="text/css">
.post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; }
.post-archive h4 {background: -moz-linear-gradient(top, #00008B, #0000FF);
-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7); border-bottom: 2px solid #00ff00; color: #00ff00; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; 
}
.ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;
}
.ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; 
}
.ct-columns-3 p a { background: #2a54aa;background: -moz-linear-gradient(top, #2a54aa 0%, #264f9f 21%, #244999 50%, #254693 58%, #204490 63%, #1e428e 82%, #1e3e89 87%, #1f3f8a 92%, #1b3b86 97%, #1d3d88 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a54aa), color-stop(21%,#264f9f), color-stop(50%,#244999), color-stop(58%,#254693), color-stop(63%,#204490), color-stop(82%,#1e428e), color-stop(87%,#1e3e89), color-stop(92%,#1f3f8a), color-stop(97%,#1b3b86), color-stop(100%,#1d3d88));
background: -webkit-linear-gradient(top, #2a54aa 0%,#264f9f 21%,#244999 50%,#254693 58%,#204490 63%,#1e428e 82%,#1e3e89 87%,#1f3f8a 92%,#1b3b86 97%,#1d3d88 100%);
background: -o-linear-gradient(top, #2a54aa 0%,#264f9f 21%,#244999 50%,#254693 58%,#204490 63%,#1e428e 82%,#1e3e89 87%,#1f3f8a 92%,#1b3b86 97%,#1d3d88 100%);
background: -ms-linear-gradient(top, #2a54aa 0%,#264f9f 21%,#244999 50%,#254693 58%,#204490 63%,#1e428e 82%,#1e3e89 87%,#1f3f8a 92%,#1b3b86 97%,#1d3d88 100%);
background: linear-gradient(to bottom, #2a54aa 0%,#264f9f 21%,#244999 50%,#254693 58%,#204490 63%,#1e428e 82%,#1e3e89 87%,#1f3f8a 92%,#1b3b86 97%,#1d3d88 100%);
-webkit-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
-moz-box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7);
box-shadow: 0 1px 0px rgba(255,255,255,0.5) inset, 1px 3px 4px rgba(0,0,0,0.7); color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; padding: 5px 5px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; 
}
.ct-columns-3 p a:hover { background: -moz-linear-gradient(top, #00008B, #0000FF);color: #fff;-webkit-animation: cssAnimation 1s 16 ease;
-moz-animation: cssAnimation 1s 16 ease;
-o-animation: cssAnimation 1s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);  }
@media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } }
</style> 
  

Sekian dulu dari Postingan Kami kali ini yaitu Cara membuat Sitemap Keren di Blog