Membuat Sitemap/Daftar Isi Keren Perlabel
Namun tidak jarang ditemui kalau Daftar isi yang dimiliki blog sangat cupu dan tidak keren.
pada kesempatan kali ini saya akan share bagaimana membuat daftar isi yang keren dan Responsive.
Penampakannya bisa anda lihat disamping kiri ini.
bagaimana anda tertarik?
atau kalau anda belum tertarik anda bisa langsung melihat Demonya dibawah ini
Nah itu adalah demonya, yang ada di blog saya Tips Trick. mohon maaf karena di blog ini tidak ada.
Oke langsung saja saya jelaskan. dalam membuat seperti itu hanya ada tambahan olesan dari HTML biasa.
Langkah Pemasangan
- Masuk dulu ke blogger
- Pilih laman > buat laman baru
- Judul nya terserah anda bisa sitemap atau daftar isi
- setelah itu beralih ke mode HTML dengan menambahkan kode yang ada di bawah ini
<div dir="ltr" style="text-align: left;" trbidi="on"><div style="margin-top: -10px;">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script><br />
<style type="text/css">
#daftar-isi {
background-color:#333;
border:2px solid #fafafa;
color:#fff;
margin-bottom:10px;
-webkit-box-shadow:0 1px 2px #000;
-moz-box-shadow:0 1px 2px #000;
box-shadow:0 1px 2px #000;
overflow:hidden;
}
#daftar-isi .judul-label {
overflow:hidden;
cursor:pointer;
text-decoration:none;
font:normal 13px/100% 'Verdana',Arial,Sans-serif;
padding:10px 15px 11px;
color:#bbb;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.3);
border-top:1px solid #444;border-bottom:1px solid #222;
background:#333;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3c3c3c', endColorstr='#333');
background:-webkit-linear-gradient(top, #3c3c3c, #333);
background:-moz-linear-gradient(top, #3c3c3c, #333);
background:-o-linear-gradient(#3c3c3c, #333);
background:linear-gradient(#3c3c3c, #333));
}
#daftar-isi .headactive {
color:#efefef;
border-top:1px solid #24B6E3;border-bottom:1px solid #104968;
background:#248AB0;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#248AB0', endColorstr='#21739B');
background:-webkit-linear-gradient(top, #248AB0, #21739B);
background:-moz-linear-gradient(top, #248AB0, #21739B);
background:-o-linear-gradient(#248AB0, #21739B);
background:linear-gradient(#248AB0, #21739B));
}
#daftar-isi ol {
background-color:#333;
margin:0 0;
padding:0 0;
color:#999;
list-style:none;
}
#daftar-isi li {
line-height:normal;
font:normal 11px/100% 'Verdana',Arial,Sans-serif;
margin:0 0;
padding:5px 5px 5px 15px;
white-space:nowrap;
text-align:left;
border-top:1px solid #444;border-bottom:1px solid #222;
}
#daftar-isi li:first-child {border-top:none;}
#daftar-isi a {color:#5687f8;}
#daftar-isi a:hover {text-decoration:underline;}
#daftar-isi a:visited {color:#5687b8;}
#daftar-isi strong {
font-weight:bold;
font-style:italic;
color:red;
}
</style><br />
<script type="text/javascript">
showNew = true;
accToc = true;
openNewTab = true;
var maxNew = 10,
baru = "New!!!",
sDownSpeed = 600,
sUpSpeed = 600;
</script><br />
<script src="http://yourjavascript.com/123135733222/daftarisi.js" type="text/javascript">
</script><br />
<script src="http://updateslaluz.blogspot.com/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc">
</script></div>
<div style="text-align: right;">
<div style="margin-top: -10px;">
</div>
</div>
</div>
Ganti tulisan yang berwarna hijau dengan url blog agan sendiri
- selanjutnya tinggal dipublikasikan
- selesai
jika anda ingin mencopas atau mengambil isi dari postingan ini silahkan saja, asalkan cantumkan link yang lengkap. Terimakasih
Posting Komentar
Terimakasih sudah berkunjung. sempatkanlah diri anda untuk berkomentar