Baiklah sobat blospot semuanya disini saya akan share sebuah artikle tentang tata cara membuat menu daftar isi atau sitemap di blogspot dengan menu scroll,sebuah daftar menu yang bisa kita tarik keatas dan kebawah.Tujuanya supaya blog kita kelihatan lebih professional,rapi,enak di pandang dan menarik tidak acak acakan,karena meskipun sebuah blog banyak isi posting artikelnya dan kemudian kita klik daftar isinya yang tidak memakai menu scroll kode java scrift ini maka akan kelihatan panjang kebawah apa lagi kalau kita taruh di widget sidebar."walah dalah panjang amat".
Untuk itu supaya daftar isi/sitemap nya
kelihatan professional, rapi dan enak di pandang maka akan kita hiasi dengan
menggunakan menu scroll,sebanyak apapun isi postingan artikrl blog kita tetep akan sesuai ukuran menu daftar
isi atau sitemap itu,tidak percaya? Buktikan saja
Pertama-tama yang harus kita lakukan
adalah membuat halaman di blog kemudian pastekan kode di bawah ini di mode HTML
jangan di mode compose kalau salah masukan kode java scriftnya tidak akan
berjalan sesuai yang kita inginkan
<div style="border: 1px solid
grey; height: 600px; overflow: auto; padding: 3px; width: auto;">
<style type="text/css">
#toc{width:97%;margin:5px auto;border:1px
solid #00a3c1;-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:#ff0000;font-weight:bold;margin:0
-5px;padding:1px 0 2px 11px;background:-moz-linear-gradient(right,#C2EAFE
0%,#00a3c1 40%);background:-webkit-gradient(linear,left 10,right
80,color-stop(0.20,#00a3c1),color-stop(1,#C2EAFE));border:1px solid #00a3c1;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{text-transform:uppercase;}
.new{color:#ff0000;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE
0%,#fff 40%);background:-webkit-gradient(linear,left 80,right
10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));}
.postname li{border-bottom: #ddd 1px
dotted;margin-right:5px}
</style>
<br />
<div id="toc">
<script
src="https://cdn.rawgit.com/aramdan/share/master/sitemap.js"
type="text/javascript"></script>
<script src="https://updatestekno.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>
</div>
Yang jumlah 600 itu tingginya menu scroll ubahlah sesuai selera sobat, kalau untuk
lebarnya daftar isi ini menyesuaikan sendiri sesuai lebarnya blog kita,kemudian
link warna merah ganti dengan alamat blog sobat.untuk hasilnya bisa sobat lihat
di blog ini Cara
membuat daftar isi scroll di blogspot Adapun untuk kodenya bisa sobat donlod disini Kode untuk membuat daftar isi scroll
Demikianlah cara membuat daftar isi scroll di blogspot
dengan sangat mudah,semoga bisa memberikan manfaat bagi semuanya
0 komentar:
Posting Komentar