Sitemap Fade Animation

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. ini adalah sitemap yang berpenampilan cukup menarik untuk di tampilkan dihalaman statis. cara penerapannya sebagai berikut :

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

<style>
#toc-outer {
  font:bold 12px/14px Arial,Sans-Serif;
  line-height:14px !important;
  color:#8FBC8B ;
  text-align:left;
  text-shadow:none;
  background-color:#2F4F4F;
  background-image:-webkit-radial-gradient(50% 0%, cover, #2F4F4F, #2F4F4F);
  background-image:-moz-radial-gradient(50% 0%, cover, #2F4F4F, #2F4F4F);
  background-image:-ms-radial-gradient(50% 0%, cover, #2F4F4F, #2F4F4F);
  background-image:-o-radial-gradient(50% 0%, cover, #2F4F4F, #2F4F4F);
  background-image:radial-gradient(50% 0%, cover, #2F4F4F, #2F4F4F);
  margin:0px auto;
  padding:10px 10px;
  border:1px dashed #696969 ;
  -webkit-box-shadow:
    inset 0px 0px 2px rgba(255,255,255,0.1),
    0px 0px 0px 3px #040D09,
    0px 1px 3px 3px green;
  -moz-box-shadow:
    inset 0px 0px 2px rgba(255,255,255,0.1),
    0px 0px 0px 3px #040D09,
    0px 1px 3px 3px black;
  box-shadow:
    inset 0px 0px 2px rgba(255,255,255,0.1),
    0px 0px 0px 3px #040D09,
    0px 1px 3px 3px black;
  -webkit-border-radius:5px 5px 20px 20px;
  -moz-border-radius:5px 5px 20px 20px;
  border-radius:5px 5px 20px 20px;
  overflow:hidden;
}
#toc-outer a {border:none;}
#results {
  border:1px dotted #fff;
  background-color:#000000;
  background-image:-webkit-repeating-linear-gradient(#2F4F4F 15px, #000000 15px, #2F4F4F 16px, #000000 16px, #2F4F4F 30px);
  background-image:-moz-repeating-linear-gradient(#2F4F4F 15px, #000000 15px, #2F4F4F 16px, #00CED1 16px, #2F4F4F 30px);
  background-image:-ms-repeating-linear-gradient(#000000 15px, #000000 15px, #2F4F4F 16px, #000000 16px, #2F4F4F 30px);
  background-image:-o-repeating-linear-gradient(#2F4F4F 15px, #00CED1 15px, #2F4F4F 16px, #000000 16px, #ffffff 30px);
  background-image:repeating-linear-gradient(#000000 15px, #000000 15px, #EAE8E2 16px, #2F4F4F 16px, #000000 30px);
  -webkit-box-shadow:0px 0px 2px #000000, inset 7px 0px 30px #00CED1;
  -moz-box-shadow:0px 0px 2px #000000, inset 7px 0px 30px #00CED1;
  box-shadow:0px 0px 2px #000000, inset 7px 0px 30px #00CED1;
  position:relative;
}
#results:before {
  content:"";
  border-left:1px dashed #FF69B4;
  width:0px;
  height:100%;
  position:absolute;
  top:0px;
  right:auto;
  bottom:0px;
  left:14px;
}
#loadingscript {
  font:bold 20px Broadway,Serif;
  text-shadow:0px 1px 0px white;
  text-align:center;
  padding:30px 0px;
  text-decoration:blink;
  height:1250px;
}
.itemposts {
  margin:0px auto 0px;
  padding:8px 10px 8px 30px;
  height:auto;
  overflow:hidden;
  display:block;
  -webkit-animation:toc-fade 2s ease;
  -moz-animation:toc-fade 2s ease;
  -ms-animation:toc-fade 2s ease;
  -o-animation:toc-fade 2s ease;
  animation:toc-fade 2s ease;
}
.itemposts h5 {
  margin:0px 0px 0px;
  font:bold 12px/16px Georgia,Serif;
  line-height:16px !important;
  height:16px;
  overflow:hidden;
  font-style:italic;
  color:#044747;
  border:none;
  padding:0px 0px;
  text-shadow:0px 1px 0px white;
  text-transform:none;
}
.itemposts h5 a {
  color:green;
  text-decoration:none;
  text-shadow:0px 1px 0px #47006B;
}
.itemposts h5 a:hover {color:black;}
.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  padding:0px 0px;
  background-color:#333333;
  border:none !important;
  -webkit-box-shadow:0px 0px 0px 4px #24006B, 0px 0px 3px 4px #fff;
  -moz-box-shadow:0px 0px 0px 4px #24006B, 0px 0px 3px 4px #fff;
  box-shadow:0px 0px 0px 4px #24006B, 0px 0px 3px 4px #fff;
  -webkit-border-radius:47px;
  -moz-border-radius:47px;
  border-radius:47px;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;
  -ms-transition:all 1s ease-out;
  -o-transition:all 1s ease-out;
  transition:all 1s ease-out;
}
.itemposts img:hover {
  -webkit-transform:rotate(-720deg);
  -moz-transform:rotate(-720deg);
  -ms-transform:rotate(-720deg);
  -o-transform:rotate(-720deg);
  transform:rotate(-720deg);
}
.itemposts .iteminside {margin:10px 0px 0px;}
.itemposts .itemfoot {
  clear:both;
  padding:5px 10px;
  background-color:#2F4F4F ;
  border-left:2px solid #2F4F4F ;
  margin:10px 0px 0px;
  color:#556B2F;
  overflow:hidden;
}
.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:#D2691E;
  float:right;
  text-decoration:none;
  border-bottom:1px dotted white;
}
.itemposts .itemfoot a.itemrmore:hover {
  color:#1E90FF;
  text-decoration:none;
  border-color:transparent;
}
#itempager {
  background-color: #2F4F4F;
  background-image:-webkit-linear-gradient( #2F4F4F, #333);
  background-image:-moz-linear-gradient( #2F4F4F, #333);
  background-image:-ms-linear-gradient( #2F4F4F, #333);
  background-image:-o-linear-gradient( #2F4F4F, #333);
  background-image:linear-gradient( #2F4F4F, #333);
  padding:30px 0px;
  -webkit-border-radius:0px 0px 10px 10px;
  -moz-border-radius:0px 0px 10px 10px;
  border-radius:0px 0px 10px 10px;
}
#pagination, #totalposts {
  color: #87CEEB;
  font:bold 10px Verdana,Arial,Sans-Serif;
  padding:0px;
  text-align:center;
}
#pagination {
  margin:0px 10px 10px;
  background-color:#2F4F4F;
  background-image:-webkit-linear-gradient(left, #2F4F4F, #8B0000, #2F4F4F);
  background-image:-moz-linear-gradient(left, #2F4F4F, #8B0000, #2F4F4F);
  background-image:-ms-linear-gradient(left, #2F4F4F, #8B0000, #2F4F4F);
  background-image:-o-linear-gradient(left, #2F4F4F, #8B0000, #2F4F4F);
  background-image:linear-gradient(to right, #2F4F4F, #8B0000, #2F4F4F);
  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 24006B, 0px 2px 1px 3px rgba(0,0,0,0.2);
  box-shadow:0px 0px 0px 2px #24006B, 0px 2px 1px 3px rgba(0,0,0,0.2);
  -webkit-border-radius:1px;
  -moz-border-radius:1px;
  border-radius:1px;
}
#totalposts {
  display:block;
  clear:both;
  margin:0px 0px;
}
#pagination span, #pagination a {
  color:white;
  display:inline;
  margin:0 1px;
  padding:2px 5px;
  text-indent:0px;
  background-color:#A8A90E;
  text-decoration:none;
  border:none;
  -webkit-transition:all 0.26s ease-out;
  -moz-transition:all 0.26s ease-out;
  -ms-transition:all 0.26s ease-out;
  -o-transition:all 0.26s ease-out;
  transition:all 0.26s ease-out;
}
#pagination a:hover {
  background-color:#fff;
  -webkit-transition-duration:0s;
  -moz-transition-duration:0s;
  -ms-transition-duration:0s;
  -o-transition-duration:0s;
  transition-duration:0s;
}
#pagination span.actual {background-color:#2F4F4F;}
#pagination span.hidden {display:none;}
/* Fade animation */
@-webkit-keyframes toc-fade {
  from {-webkit-transform:translateX(-40px);opacity:0;}
  to   {-webkit-transform:translateX(0px);opacity:1;  }
}
@-moz-keyframes toc-fade {
  from {-moz-transform:translateX(-40px);opacity:0;}
  to   {-moz-transform:translateX(0px);opacity:1;}
}
@-ms-keyframes toc-fade {
  from {-ms-transform:translateX(-40px);opacity:0;}
  to   {-ms-transform:translateX(0px);opacity:1;}
}
@-o-keyframes toc-fade {
  from {-o-transform:translateX(-40px);opacity:0;}
  to   {-o-transform:translateX(0px);opacity:1;}
}
@keyframes toc-fade {
  from {transform:translateX(-40px);opacity:0;}
  to   {transform:translateX(0px);opacity:1;}
}
</style>

<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    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/27149461315/sitemap-fade-mys2010.js"rel='stylesheet'/></script>

Penjelasan :
Ganti link yang berwarna orange dengan link sobat

Sumber by. Dte Web Id
Ediited  by. Myscript2010

DEMO SHOW

Sitemap Black Color

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 ini adalah sitemap bernuansa hitam untuk di tampilkan dihalaman statis.
langkah penerapannya sama seperti biasa
Login ke akun blog klik entri halaman baru HTML,
copy kode dibawah ini pastekan kedalam halaman baru tersebut dan kliksimpan selesai

<style>
#toc-outer {
  font:bold 12px/12px Arial,Sans-Serif;
  color: #8B4513;
  text-align:left;
  text-shadow:none;
  background-color:#000000;
  overflow:hidden;
  -webkit-box-shadow:10px 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.7);
  box-shadow:0px 1px 2px rgba(0,0,0,0.7);
}
#toc-outer a {border:none;color:#3582D0;}
#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;
  background:transparent url('data:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfL32ayvnAT1QmpkbAGlPUR57zHRZ6bj1kvAM9pwGABdGd565uzopnmUrReEqCIi9W4chm6BScmt-2YPClipDVKYSS7J3WN4UU8lS1mQvRVXVn5C0ya23yaZH-mN9B4kPONubGdC5WjN0/s1600-r/Mys2010-logo-Blogg.png') no-repeat 50% 50%;
}
no-repeat 50% 50%;
  height:200px;
}
.itemposts, #itempager {
  overflow:hidden;
  padding:0px 10px 7px;
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,0.3);
  border-top:1px solid #fff;
  border-bottom:1px solid #222;
  background-color:#fff;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#800000', endColorstr='#333333');
  background-image:-webkit-linear-gradient( #800000, #333);
  background-image:-moz-linear-gradient( #800000, #333);
  background-image:-o-linear-gradient( #800000, #333);
  background-image:linear-gradient( #800000, #333);
}
.itemposts h5 a {
  color:green;
  text-decoration:none;
  text-shadow:0px 1px 0px #47006B;
}
.itemposts h5 a:hover {color:black;}
.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 14px 13px;
  padding:0px 0px;
  background-color:#47006B;
  border:none !important;
  -webkit-box-shadow:0px 0px 0px 4px #2F4F4F , 0px 0px 3px 4px #444;
  -moz-box-shadow:0px 0px 0px 4px #2F4F4F , 0px 0px 3px 4px #444;
  box-shadow:0px 0px 0px 4px #2F4F4F , 0px 0px 3px 4px #2F4F4F ;
  -webkit-border-radius:47px;
  -moz-border-radius:47px;
  border-radius:47px;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;
  -ms-transition:all 1s ease-out;
  -o-transition:all 1s ease-out;
  transition:all 1s ease-out;
}
.itemposts img:hover {
  -webkit-transform:rotate(-720deg);
  -moz-transform:rotate(-720deg);
  -ms-transform:rotate(-720deg);
  -o-transform:rotate(-720deg);
  transform:rotate(-720deg);
}
.itemposts .iteminside {margin:10px 0px 0px;}
.itemposts .iteminside {
  padding:10px 0px 10px;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  overflow:hidden;}
.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 {
  text-align:left;
  color:#8b4513;
  margin:10px 10px 10px;
}
#pagination span, #pagination a {
    color: #000000;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #00BFFF;
    background-image: linear-gradient(green 0%, #00BFFF 50%, #00BFFF 51%);
    border: 1px solid  #228B22;
    text-decoration: none;
    border-radius: 10px;
}
</style>

<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    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/59451640121/sitemap-black-color-mys2010.js"rel='stylesheet'/></script>

Penjelasan :
Ganti link yang berwarna orange dengan link sobat

Sumber by. Dte Web Id
Ediited  by. Myscript2010

DEMO SHOW

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

Featured posts

Memasang Featured posts
Featured posts atau slider posts berfungsi untuk mendekteksi recent posts blog  bedasarkan label yang
sudah dibuat pada postingan blog dengan tujuan mempermudah pencarian artikel, berikut cara penerapannya :

Login ke akun blog klik tataletak dan klik tambah gadged
copy kode berikut kemudian pastekan kedalam gadged tersebut dan klik simpan selesai

<center>
<div id="headerbox">
Featured Posts</div>
<div id="Sliderpostside">
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript">
</script>
<script src="http://yourjavascript.com/155251110521/featured-post.js"rel='stylesheet'/></script>
<script type='text/javascript'>
//<![CDATA[
SliderPostSide({
blogURL:"http://myscript2010seo.blogspot.co.id/",
MaxPost:8,
/*Slider http://myscript2010seo.blogspot.co.id/*/ idcontaint:"#Sliderpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false});
//]]>
</script> <link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'/> <style scoped="" type="text/css">
/*Slider http://myscript2010seo.blogspot.co.id/*/ ul.my-sidebar-slider * {
    -moz-box-sizing: border-box;
}
ul.my-sidebar-slider {
    font: 11px Verdana,Geneva,sans-serif;
}
ul.my-sidebar-slider, ul.my-sidebar-slider li {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
ul.my-sidebar-slider {
    height: 500px;
    width: 100%;
}
ul.my-sidebar-slider li {
    display: none;
    float: left;
    height: 24.5%;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 100%;
}
ul.my-sidebar-slider li:nth-child(1), ul.my-sidebar-slider li:nth-child(2), ul.my-sidebar-slider li:nth-child(3), ul.my-sidebar-slider li:nth-child(4) {
    display: block;
}
ul.my-sidebar-slider li:nth-child(2) {
    left: 0;
    top: 50%;
}
ul.my-sidebar-slider img {
    border: 0 none;
    height: 100%;
    width: 100%;
}
ul.my-sidebar-slider .overlayx, ul.my-sidebar-slider li {
    transition: all 0.4s ease-in-out 0s;
}
ul.my-sidebar-slider li:nth-child(4) {
    left: 0;
    top: 75%;
    width: 100%;
}
/*Slider http://myscript2010seo.blogspot.co.id/*/ ul.my-sidebar-slider li:nth-child(3) {
    left: 0;
    top: 25%;
}
ul.my-sidebar-slider .overlayx {
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
/*Slider http://myscript2010seo.blogspot.co.id/*/ ul.my-sidebar-slider .overlayx, ul.my-sidebar-slider img {
    border: 4px solid #000;
    border-radius: 3px 3px 3px 3px;
}
ul.my-sidebar-slider .overlayx:hover {
    opacity: 0.1;
}
ul.my-sidebar-slider h4 {
    color: white;
    font-family: Agency FB;
    font-size: 25px;
    font-weight: 100;
    line-height: 1.5em;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    top: 25px;
    width: 100%;
    z-index: 2;
}
ul.my-sidebar-slider .label_text {
    bottom: 10px;
    color: white;
    font-size: 90%;
    left: 10px;
    position: absolute;
    z-index: 2;
}
ul.my-sidebar-slider li:nth-child(2) .autname, ul.my-sidebar-slider li:nth-child(3) .autname {
    display: none;
}
.buttons {
    margin: 5px 0 0;
}
.buttons a {
    display: inline-block;
    height: 25px;
    position: relative;
    text-indent: -9999px;
    width: 15px;
}
.buttons a:before {
    border-color: transparent #000 transparent transparent;
    border-style: solid;
    border-width: 8px 7px;
    content: "";
    height: 0;
    left: 50%;
    margin-left: -10px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 0;
}
.buttons a.nextx:before {
    border-color: transparent transparent transparent #000;
    margin-left: -3px;
}
.date {
/*Slider http://myscript2010seo.blogspot.co.id/*/     background: none repeat scroll 0 0 rgba(32, 122, 161, 0.84);
    bottom: 93px;
    padding: 8px;
    position: relative;
    right: 6px;
}
#headerbox {
    moz-border-radius: 10px; -webkit-border-radius:  0px; background-color: #008B8B; border-radius:  0px; border: 5px double #333; padding: 4px; t-align: right;
}
</style> </center>

Penjelasan :
Ganti link yang berwarna merah dengan link sobat

All Sources
Edited by. Myscript2010

DEMOSHOW

Blog Archives Manual

Memasang Blog Archives Manual
Blog arsip adalah satu tempat untuk menyimpan file yang berada dihalaman statis, sehingga dapat  mempermudah pembaca menjelajahi keseluruhan isi dari blog.

berikut cara penerapannya
Login ke akun blog klik tata letak dan klik tambah gadged,
copy kode dibawah ini : pastekan kedalam gadged tersebut dan klik simpan selesai

<p align="left">
<div class='widget BlogArchive' id='BlogArchive1'>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open' style='color:orange'>&#9660; </span>
</a>
<a class='post-count-link' href='#'>Blog Arsip</a>
<span class='post-count' dir='ltr'></span>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='zippy toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial"> &#9660; </font>
</a>
<span class='post-count' dir='ltr'>Tahun</span>
<span class='zippy toggle-open' style='color:green'>(Posting) </span>
</li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Januari</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total</a>
<span class='post-count' dir='ltr'>(0) Posting</span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Februari </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting</span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Maret </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>April</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel </a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

 </li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Mei </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Juni </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Juli</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Agustus </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>September</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Oktober</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>November</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Desember</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<!..limiting end..//>

</!..limiting></a></a></li>
</ul>

</li></ul></div>
</div>
</div>
</div>

<div id='sidebar-nu Luhur'>
<div class='sidebar section' id='sidebar-nu Handap'></div>
</div>

<div class='clear'> </div>
</p>

Penjelasan :
Edit  Link dan Teks yang diberi warna
Tambahkan Judul postingan sesuai bulan posting

All Sources
Edited by. Myscript2010

DEMOSHOW

Slider Accordian Style

Memasang Slider Accordian Style
Seperti biasa Login ke akun blog Klik Entri halaman baru HTML
Copy kode dibawah ini,
pastekan kedalam halaman baru tersebut
kemudian klik simpan selesai

<style>
* {
 margin: 0;
 padding: 0;
}
body {
 background: #000;
 font-family: arial, verdana, tahoma;
}
/*Time to apply widths for accordian to work
Width of image =  40px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/
.accordian {
 width: 805px; height: 320px;
 overflow: hidden;
 /*Time for some styling*/
 margin: 100px auto;
 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
 width: 2000px;
 /*This will give ample space to the last item to move
 instead of falling down/flickering during hovers.*/
}
.accordian li {
 position: relative;
 display: block;
 width:  30px;
 float: left;
 border-left: 1px solid #888;
 box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 /*Transitions to give animation effect*/
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 /*If you hover on the images now you should be able to
 see the basic accordian*/
}
/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}
.accordian li img {
 display: block;
}
/*Image title styles*/
.image_title {
 background: rgba(0, 0, 0, 0.5);
 position: absolute;
 left: 0; bottom: 0;
width: 640px;
}
.image_title a {
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 20px;
 font-size: 16px;
}
</style>
<div class="accordian">
 <ul>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 1</a>
   </div>
   <a href="http://Your Link.blogspot.co.id">
    <img src="http://Link Gambar.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 2</a>
   </div>
   <a href="http://Your Link.blogspot.co.id">
    <img src="http://Link Gambar.jpeg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 3</a>
   </div>
   <a href="http://Your Link.blogspot.co.id/">
    <img src="http://Link Gambar.jpeg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 4</a>
   </div>
   <a href="http://Your Link.blogspot.co.id/">
    <img src="http://Link Gambar.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 5</a>
   </div>
   <a href="http://Your Link.blogspot.co.id">
    <img src="http://Link Gambar.jpeg"/>
   </a>
  </li>
 </ul>
</div>

Sources by. Kode Play
Edited    by. Myscript2010 on Codepen

Penjelasan :
Terapkan Link Web dan Link Gambar yang berwarna orange sesuai  keinginan

DEMO SHOW

If you want to directly copy and paste you canDownload Here Slider Accordian

Sitemap Diagram CSS3

Memasang Sitemap Diagram
kode sitemap ini bisa digunakan untuk
halaman statis
langkah penerapannya sebagai berikut
Klik entri halaman baru HTML copy kode berikut letakan kedalam halaman baru tersebut, klik pratinjau untuk melihat hasil jika sudah sesuai klik publis selesai

<style>
/*Now the CSS*/
* {margin: 0; padding: 0;}

.tree ul {
 padding-top: 20px; position: relative;

 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}

.tree li {
 float: left; text-align: center;
 list-style-type: none;
 position: relative;
 padding: 20px 5px 0 5px;

 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
 content: '';
 position: absolute; top: 0; right: 50%;
 border-top: 1px solid #ccc;
 width: 50%; height: 20px;
}
.tree li::after{
 right: auto; left: 50%;
 border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
 display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
 border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
 border-right: 1px solid #ccc;
 border-radius: 0 5px 0 0;
 -webkit-border-radius: 0 5px 0 0;
 -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
 border-radius: 5px 0 0 0;
 -webkit-border-radius: 5px 0 0 0;
 -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
 content: '';
 position: absolute; top: 0; left: 50%;
 border-left: 1px solid #ccc;
 width: 0; height: 20px;
}

.tree li a{
 border: 1px solid #ccc;
 padding: 5px 10px;
 text-decoration: none;
 color: #666;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 display: inline-block;

 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;

 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
 background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
 border-color:  #94a0b4;
}
</style>
<div class="tree">
 <ul>
  <li>
   <a href="Your Link">MYSCRIPT2010s</a>
   <ul>
    <li>
     <a href="Your Link">HOME</a>
     <ul>
      <li>
       <a href="Your Link">SUB MENU</a>
      </li>
     </ul>
    </li>
    <li>
     <a href="Your Link">CATEGORIES</a>
     <ul>
      <li><a href="Your Link">ALL TITLE</a></li>
      <li>
       <a href="Your Link">CONTACT</a>
       <ul>
        <li>
         <a href="Your Link">DISPLAY MENU</a>
        </li>
        <li>
         <a href="Your Link">BLOG ARCHIVE</a>
        </li>
        <li>
         <a href="Your Link">SOCIAL</a>
        </li>
       </ul>
      </li>
      <li><a href="Your Link">COPYRIGHT</a></li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Penjelasan :
Terapkan Link dan Teks yang berwarna orange Sesuai Fungsinya

Sumber by. Kode Play
Edited   by. Myscript2010

DEMO SHOW