Senin, April 19, 2010

Membuat Daftar Isi Melayang

Seperti yang ditanyakan sohib saya Cuirast , "bagaimana membuat daftar isi melayang seperti diblog saya ini.?", maka kali ini saya akan memposting cara membuatnya.
Sebetulnya widget ini adalah gabungan dari widget - widget yang saya dapat dari blog - blog tetangga, mohon maaf ya bagi yang buat widget - widgetnya,, saya pinjam scriptnya,, he , he.
Bagi anda pengguna blogger sudah pada tahukan widget bukutamu melayang yang banyak banget tuh tutorial membuatnya.
Nah untuk widget daftar isi melayang ini, saya hanya menggabungkan widget buku tamu melayang  dengan widget daftar isi punyanya infoblog

Berikut cara membuat daftar isi melayang :
  1. Login ke akun blogger anda
  2. Masuk dasbor ->tata letak
  3. Tambah Gadget HTML/Javascript
  4. Copykan script dibawah ini
<style type="text/css">
#di{ position:fixed; top:10px; z-index:+1000; }
* html #di{position:relative;}

.ditab{ height:200px; width:30px; float:left; cursor:pointer; background:url('http://imgur.com/Ly9Fh.jpg') no-repeat; }
.dicontent{ height:400px; float:left; border:2px solid #CCCCCC; background:#F5F5F5; padding:10px; }
</style>

<script type="text/javascript">
function showHideID(){
var di = document.getElementById("di");
var w = di.offsetWidth;
di.opened ? moveID(0, 30-w) : moveID(10-w, 0);
di.opened = !di.opened;
}
function moveID(x0, xf){
var di = document.getElementById("di");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
di.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveID("+x+", "+xf+")", 10);}
}
</script>

<div id="di">
<div class="ditab" onclick="showHideID()"> </div>
<div class="dicontent">
<div style="padding: 1px; overflow:auto; height: 400px;width: 300px;">
<div id="cl_option"> Loading... </div>
<div id="cl_content_list"> </div>
<script type="text/javascript">var jumlah_kata_dalam_ringkasan = 200;</script>
<script src="http://copycat91.googlecode.com/svn/trunk/contentlist.js"> </script>
<script src="http://dede-spirit89.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=500"> </script>
Modif By <a href='http://dede-spirit89.blogspot.com/2010/04/membuat-daftar-isi-melayang.html'>Spirit 89 Blog</a>
</div> </div></div>

<script type="text/javascript">
var di = document.getElementById("di");
di.style.right = (30-di.offsetWidth).toString() + "px";
</script>
Ganti http://dede-spirit89.blogspot.com yang bercetak tebal berwarna hitam pada script diatas ,  gantikan dengan url blog anda dan simpan template anda.

Selamat Mencoba....!!!! keep spirit...!!!

Artikel Terkait



7 komentar: on "Membuat Daftar Isi Melayang"

FAHMI MUHAMMAD mengatakan...

Tengqyu infonya , gan !!

Darmawan Saputra mengatakan...

Terima kasih atas artikelnya.
o iya selama saya jelajah mencari ilmu dengan blogwalking, menurut saya anda memiliki kelebihan tersendiri dari situs-situs lain dan jujur potensi anda juga sangat bagus, banyak juga ilmu yang saya pelajari disini jika ada waktu saya akan berkunjung lagi.

ditunggu kunjungan baliknya :D

u follow me, i follow u

#Semoga sehat selalu :D

laban mengatakan...

thx gan... mantap.

LINE mengatakan...

wah, harus di coba di blog saya nih.. ok, akan ku coba. liat hasilnya ya.. trima kasih info nya..

Mang uem mengatakan...

Thanks sudah berbagi ilmunya, sukses selalu...

Muhammad Adam Hussein mengatakan...

daftar isinya ga tampil, mohon dikoreksi tutorialnya, makasih

cbc_rf mengatakan...

kalo yang model kayak popup gimana gan?

Posting Komentar


Blog ini sudah DOFOLLOW, silahkan memberikan komentar untuk backlink