Menempatkan Daftar Isi Agar Lebih Ekonomis

Di beberapa blog teman, saya menemukan tampilan blog yang menempatkan beberapa elemen gadget secara tersembunyi sehingga ruang blog kelihatan lebih ekonomis. contoh yang kemudian saya gunakan adalah seperti pada blog ini, dimana tampilan daftar isi blog yang dulunya berada di sisi kiri blog ini saya tampilkan dalam bentuk slide ketika image di klik.

untuk mencobanya, silahkan sobat klik gambar dibawah ini.



Sekarang, Inilah rahasia cara membuat sehingga seperti daftar isi blog ini.

Pertama, silahkan sobat masuk ke ruang editor HTML Template sobat
Kedua, cari kode </body>
Ketiga, masukan script dibawah ini sebelum kode </body>

<style type='text/css'>
#fl{
position:fixed;
left:400px;
z-index:+1000;
}
* html #fl{position:relative;}
.flcontent{
float:left;
border:2px solid #676767;-webkit-box-shadow:0 0 10px rgba(0,0,0,0.75);box-shadow:0 0 10px rgba(0,0,0,0.75);
background:rgba(0,0,0,0.75) repeat-x bottom center scroll;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type='text/javascript'>
function showHideFL(){
var fl = document.getElementById(&quot;fl&quot;);
var w = fl.offsetWidth;
fl.opened ? moveFL(0, -100-w) : moveFL(20-w, 0);
fl.opened = !fl.opened;
}
function moveFL(x0, xf){
var fl = document.getElementById(&quot;fl&quot;);
var dx = Math.abs(x0-xf) &gt; 25 ? 35 : 1;
var dir = xf&gt;x0 ? 1 : -1;
var x = x0 + dx * dir;
fl.style.bottom = x.toString() + &quot;px&quot;;
if(x0!=xf){setTimeout(&quot;moveFL(&quot;+x+&quot;, &quot;+xf+&quot;)&quot;, 10);}
}
</script>
<div id='fl'>
<div class='fltab' onclick='showHideFL()'> </div>
<div class='flcontent'>

GANTI TULISAN INI DENGAN SCRIPT SOBAT

</script>
<script src='http://watonoe.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500'/></div>
</div></div>



<div style='text-align: right;'>
<a href='javascript:showHideFL()'>

</a></div></div>

Ingat, ganti tulisan "GANTI TULISAN INI DENGAN SCRIPT SOBAT" dengan script daftar isi sobat, atau script apa saja sesuai kebutuhan blog sobat!.

Keempat, selanjutnya sobat cari kode </head>
Kelima, masukan script kode berikut ini sesudah script </head>

<a href='javascript:showHideFL()' style='display:scroll;position: fixed; head:5px;left:5px;' title='GANTI TOOLTIP INI DENGAN TULISAN YANG ANDA INGINKAN SESUAI DENGAN TEMA TUJUAN SCRIPT'><img
src='URL GAMBAR/IMAGE '/></a>

Jangan lupa untuk mengganti tulisan tooltip "ANTI TOOLTIP INI DENGAN TULISAN YANG ANDA INGINKAN SESUAI DENGAN TEMA TUJUAN SCRIPT" dengan tulisan anda sendiri
kemudian ganti tulisan "URL GAMBAR/IMAGE" dengan url gambar / image sobat.

Keenam, Simpan template anda
Ketujuh, Selesai

Demikian Rahasianya, semoga bermanfaat!
Jangan lupa untuk meninggalkan komentar ya