Daftar Isi Blogger Dengan Navigasi

Daftar Isi Blogger Dengan Navigasi

CSS Concept All Codes
Cara mengubah tampilan daftar artikel pada halaman beranda/home dengan daftar isi model diary theme transisi effect.
Temukan kode ]]></b:skin> pada Template Anda, salin kode berikut lalu letakkan tepat diatasnya..

Diary Notes Theme Sitemap


#toc-outer {
  font:normal 10px/14px Arial,Sans-Serif;
  line-height:14px !important;
  color:#666;
  text-align:left;
  text-shadow:none;
  background-color:#040D09;
  background-image:-webkit-radial-gradient(50% 0%, cover, #15311F, #040D09);
  background-image:-moz-radial-gradient(50% 0%, cover, #15311F, #040D09);
  background-image:-ms-radial-gradient(50% 0%, cover, #15311F, #040D09);
  background-image:-o-radial-gradient(50% 0%, cover, #15311F, #040D09);
  background-image:radial-gradient(50% 0%, cover, #15311F, #040D09);
  margin:0 auto;
  padding:10px 10px;
  border:1.3px dashed orange;
  -webkit-box-shadow:
    inset 0px 0px 2px rgba(255,255,255,0.1),
    0px 0px 0px 3px #040D09,
    0px 1px 3px 3px black;
  -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-left:3px solid red;
  border-bottom:3px dotted #040D09;
  background-color:#F4F2EC;
  background-image:-webkit-repeating-linear-gradient(#F4F2EC 15px, #F4F2EC 15px, #EAE8E2 16px, #F4F2EC 16px, #F4F2EC 30px);
  background-image:-moz-repeating-linear-gradient(#F4F2EC 15px, #F4F2EC 15px, #EAE8E2 16px, #F4F2EC 16px, #F4F2EC 30px);
  background-image:-ms-repeating-linear-gradient(#F4F2EC 15px, #F4F2EC 15px, #EAE8E2 16px, #F4F2EC 16px, #F4F2EC 30px);
  background-image:-o-repeating-linear-gradient(#F4F2EC 15px, #F4F2EC 15px, #EAE8E2 16px, #F4F2EC 16px, #F4F2EC 30px);
  background-image:repeating-linear-gradient(#F4F2EC 15px, #F4F2EC 15px, #EAE8E2 16px, #F4F2EC 16px, #F4F2EC 30px);
  -webkit-box-shadow:0px 0px 2px black, inset 7px 0px 60px #ddd;
  -moz-box-shadow:0px 0px 2px black, inset 7px 0px 60px #ddd;
  box-shadow:0px 0px 2px black, inset 7px 0px 60px #ddd;
  position:relative;}

#results:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-width:0 20px 20px 0;
  border-style:solid;
  border-color:#040D09 #040D09 #d73249 #d73249;
  -webkit-box-shadow:0 5px 15px rgba(0,0,0,.1),-5px 5px 5px rgba(0,0,0,.2);
  -moz-box-shadow:0 5px 15px rgba(0,0,0,.1),-5px 5px 5px rgba(0,0,0,.2);
  box-shadow:0 5px 15px rgba(0,0,0,.1),-5px 5px 5px rgba(0,0,0,.2);
  display:block;width:0;}

#loadingscript {
  font:bold 20px Georgia,Serif;
  text-shadow:0px 1px 0px white;
  text-align:center;
  padding:30px 0px;
  text-decoration:blink;
  height:1200px;}

.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;
  border-bottom:1px solid #ddd;}

.itemposts h6 {
  margin:0px 0px 0px;
  font:bold 12px/16px Georgia,Serif;
  line-height:16px !important;
  height:16px;
  overflow:hidden;
  font-style:italic;
  color:#666;
  border:none;
  padding:0px 0px;
  text-shadow:0px 1px 0px white;
  text-transform:none;
  text-align:center;}

.itemposts h6 a {
  color:#666;
  text-decoration:none;
  text-shadow:0px 1px 0px white;
  -webkit-transition: 1.8s;
  -webkit-transform-style: preserve-3d;
  -moz-transition: 1.8s;
  -moz-transform-style: preserve-3d;
  -o-transition: 1.8s;
  -o-transform-style: preserve-3d;
  -ms-transition: 1.8s;
  -ms-transform-style: preserve-3d;
  transition: 1.8s;
  transform-style: preserve-3d;}

.itemposts h6 a:hover {
  color:blue;
  -webkit-transform:rotateY(360deg);
  -moz-transform:rotateY(360deg);
  -ms-transform:rotateY(360deg);
  -o-transform:rotateY(360deg);
  transform:rotateY(360deg);}

.itemposts img {
  float:left;
  height:72px;
  width:72px;
  margin:2px 10px 2px 0px;
  padding:0px 0px;
  background-color:white;
  border:none !important;
  -webkit-box-shadow:0px 0px 0px 4px white, 0px 0px 3px 4px #bbb;
  -moz-box-shadow:0px 0px 0px 4px white, 0px 0px 3px 4px #bbb;
  box-shadow:0px 0px 0px 4px white, 0px 0px 3px 4px #bbb;
  -webkit-border-radius:48px;
  -moz-border-radius:48px;
  border-radius:48px;
  -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:#FAEBD7;
  margin:10px 0px 0px;
  color:#A52A2A;
  overflow:hidden;
  border-radius:20px;
  -webkit-border-radius:20px;
  -moz-border-radius:20px;}

.itemposts .itemfoot a.itemrmore:hover {color:blue;}
.itemposts .itemfoot a.itemrmore {
  font-weight:bold;
  color:#482C1A;
  float:right;}

#itempager {
  background-color:#F8F7F1;
  background-image:-webkit-linear-gradient(#F8F7F1, #DCD4BF);
  background-image:-moz-linear-gradient(#F8F7F1, #DCD4BF);
  background-image:-ms-linear-gradient(#F8F7F1, #DCD4BF);
  background-image:-o-linear-gradient(#F8F7F1, #DCD4BF);
  background-image:linear-gradient(#F8F7F1, #DCD4BF);
  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:#999;
  font:bold 10px Verdana,Arial,Sans-Serif;
  padding:0px;
  text-align:center;}

#pagination {
  margin:0px 10px 10px;
  background-color:#6495ED;
  padding:7px 0px;
  -webkit-box-shadow:0px 0px 0px 2px #6495ED, 0px 3px 2px -4px rgba(0,0,0,0.2);
  -moz-box-shadow:0px 0px 0px 2px #6495ED, 0px 3px 2px -4px rgba(0,0,0,0.2);
  box-shadow:0px 0px 0px 2px #6495ED, 0px 3px 2px 4px rgba(0,0,0,0.2);
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;}

#totalposts {display:block;clear:both;margin:0px 0px;}
#pagination span, #pagination a {
  color:#fff;
  display:inline;
  margin:0 1px;
  padding:2px 5px;
  text-indent:0px;
  background-color:blue;
  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;
  border-radius:30px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;}

#pagination a:hover {
  background-color:red;
  -webkit-transition-duration:0s;
  -moz-transition-duration:0s;
  -ms-transition-duration:0s;
  -o-transition-duration:0s;
  transition-duration:0s;}

#pagination span.actual {background-color:red;}
#pagination span.hidden {display:none;}
@-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;}}


Referensi URL - Diary Notes Theme Sitemap Responsive