Membuat Responsive Sitemap di Blog

Oleh Unknown

Sabtu, 06 Desember 2014

Bagikan :

Tweet

Hai Sahabat Kang PP semua :D kali ini Saya akan membagikan tutorial membuat sitemap atau daftar isi artikel Responsive di blog.

• Demo On Blog
• Demo On JSFiddle

  Memang penting suatu blog atau website untuk memasang sitemap ini karena dapat memudahkan pengunjung untuk mengakses artikel yang ada pada dalam blog/web tersebut.

Cara Membuat Sitemap Responsive di Blog

1. Masuk ke blogger.com => Dasboard => Laman => Laman Baru
2. Pilih Tab HTML dan pastekan kode berikut.

<style type="text/css">

 @-webkit-keyframes membesar {
from { -webkit-transform:  scale(0.1) }
to { -webkit-transform: scale(1.0) }
}
@-moz-keyframes membesar {
from { -moz-transform:  scale(0.1) }
to { -moz-transform: scale(1.0) }
}
@-o-keyframes membesar {
from { -o-transform:  scale(0.1) }
to { -o-transform: scale(1.0) }
}
@-ms-keyframes membesar {
from { -ms-transform:  scale(0.1) }
to { -ms-transform: scale(1.0) }
}
@keyframes membesar {
from { transform:  scale(0.1) }
to { transform: scale(1.0) }
}

#daftar {
-webkit-animation:membesar 20s;
-moz-animation:membesar 20s;
-ms-animation:membesar 20s;
-o-animation:membesar 20s;
animation:membesar 20s;
}

#daftar{
width:99%;
margin:5px auto;
border:1px solid #FF0000;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}

.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#ffc3c3 0%,#ed3035 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#ed3035),color-stop(1,#ffc3c3));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}

.labl a{
color:#fff;
}

.labl:first-letter{t
ext-transform:uppercase;
}

.new{
color:#FF0000;
font-weight:bold;
font-style:italic;
}

.postname{
font-weight:normal;
background:-moz-linear-gradient(right,none 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(none));
}

.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}

</style>

<br />
<div id="daftar">
<script src="https://kang-pp.googlecode.com/svn/Jquery/site-map.js" type="text/javascript"></script>
<script src="http://kang-pp.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loaddaftar">
</script></div>
<div style='clear: both;'></div>

Ket. : Silahkan ganti dengan url blog anda.

Semoga Bermanfaat ^_^

Tag : Tutorial Blog