Membuat Daftar Isi Otomatis Melayang
Siank sobat, melanjutkan dari post yang kemarin tentang Membuat daftar isi secara otomatis, kali isi saya akan menjelaskan bagaimana cara membuta daftar isi otomatis tapi melayang di blog, untuk contohnya silahkan klik disini, atau bisa juga dilihat di pojok kiri blog ini..
Untuk membuatnya cukup sederhana sekali, mirip dengan cara membuat buku tamu melayang yang ada di blog ini., cuman kode CBox nya diganti dengan script daftar isi otmatis .
Gambarnya juga diganti dengan gambar yang saya buat sendiri, serta beberapa script nya saya ganti untuk tempat gambar dan tempat daftar isinya tersebut
Jika sobat tertarik silahkan dah membutnya sendiri, berikut adalah caranya :
- pertama sekali yang harus sobat lakukan tentunya masuk ke blog sobat.,
- kemudian masuk ke Tata Letak -> Tambah Gadget
- pilih HTML/Java Script
- copy dan pastekan kode berikut
<!-- Daftar Isi Melayang by Produck.blogspot.com-->
<style type="text/css"> #gc{ position:fixed; left:180px; z-index:+1000; padding: 5px 15px; } * html #gc{position:relative;} .gctab{ height:0px; width:200px; float:center; cursor:pointer; background:url(blog-bg.pnf); } .gccontent{ float:center; background:#fff; border-right: 5px solid green; border-bottom: 5px solid green; border-top: 5px solid green; border-left: 5px solid green; -moz-box-shadow: 0 10px 10px #AFE137; -moz-border-radius-topleft:1px; -moz-border-radius-topright:1px; -moz-border-radius-bottomleft:1px; -moz-border-radius-bottomright:1px; padding:10px; } </style> <script type="text/javascript"> function showHidegc(){ var gc = document.getElementById("gc"); var w = gc.offsetWidth; gc.opened ? movegc(0, 1500-w) : movegc(1500-w, 0); gc.opened = !gc.opened; } function movegc(x0, xf){ var gc = document.getElementById("gc"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gc.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("movegc("+x+", "+xf+")", 10);} } </script> <div id="gc"> <div class="gctab" onclick="showHidegc()"> </div> <div class="gccontent"> <span style="color: rgc(102, 0, 0);">
<!-- Start Daftar Isi -->
<div style="border: 0px solid #000000; height: 400px; overflow: auto; padding: 5px; width: auto;">
<script src="http://prcob.googlecode.com/files/daftar%20isi%20otomatis.js"></script><script src="http://pro-duck.blogspot.com/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script>
</div>
</span></div>
<!-- END Daftar Isi-->
<center><a href="javascript:void(0);" onclick="showHidegc()"><input class="close" type="button" value="Close" /></a> </center></div> <script type="text/javascript"> var gc = document.getElementById("gc"); gc.style.top = (-400-gc.offsetWidth).toString() + "px"; </script> <a style="position:fixed;bottom:0px;left:0px;" class="west" href="javascript:void(0);" onclick="showHidegc()" title="Daftar Isi"><img src="https://lh4.googleusercontent.com/-52uFwKtfCTs/UOUlkAPO18I/AAAAAAAAATQ/Sjhn1h3viI4/s128/Daftar%20isi%20tab.png" /></a>
Ket : untuk kode yang berwarna islahkan diganti sesuka hati, atau dibiarkan default juga bisa.
> Untuk yang berwarna merah adalah kode gambar url dan posisi penempatan gambar
> Untuk yang berwarna kuning adalah kode untuk penempatan posisi daftar isi
> Untuk yang berwarna Biru adalah kode untuk Background daftar isi
> Untuk yang berwarna hijau adalah kode untuk warna garis tepi dan ketebalannya
> Untuk para sobat yang sudah mengerti tentang java script silahkan di utak atik tuh source
- terakhir tinggal save dan lihat hasilnya
Tambahan saja, jika sobat ada yang kurang paham silahkan bertanya dengan mengisi kotak komentar di bawah,,
^_^
Keyword :
By 
Post a Comment