0 laber tersembunyi

Ruangan template yang terbatas membuat kita bingung mencari tempat untuk menempatkan daftar isi atau menu solusi nya kita harus menempat kan menu tersebut secara tersembunyi /hidden CONTOH klik disini coba arah kan cursor ke arah kiri atas maka menu/daftar isi akan muncul dari atas berikut cara dan penempatan java script nya :

1. login ke blogger
2. masuk rancangan ...>>>tambah gadget
3. pilih HTML JAVA SCRIPT tambah kan kode di bawah ini di dalam nya:

<style type="text/css">
#bokspanel {
 -moz-transition: all 2s ease-in-out;
 -webkit-transition: all 2s ease-in-out;
 -o-transition: all 2s ease-in-out;
 transition: all 2s ease-in-out;
 background:#222 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgjqttV295H1.gif) top left repeat-x;
 height:284px;
 color: #fff;
 position: relative ;
 padding-top: 10px;
 margin-top:-300px;
 border-left:2px solid red;
 border-right:2px solid red;
 border-bottom:8px solid red;
 border-top:none;
 border-bottom-left-radius:18px;
 border-bottom-right-radius:18px;
 -webkit-border-bottom-left-radius:18px;
 -webkit-border-bottom-right-radius:18px;
 -moz-border-radius-bottomleft:18px;
 -moz-border-radius-bottomright:18px;
 }
.paneldalam {
 background:#ddd url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bg3.png) bottom left repeat-x;
 background-position:0 110%;
 position: relative;
 margin-right: auto;
 margin-left: auto;
 width:800px;
 box-shadow:0 4px 6px #ddd;
 -moz-box-shadow:0 4px 6px #ddd;
 -webkit-box-shadow:0 4px 6px #ddd;
 border-bottom:2px solid #996633;
 border:2px solid #555;
 border-top:none;
 border-bottom-left-radius:8px;
 border-bottom-right-radius:8px;
 -webkit-border-bottom-left-radius:8px;
 -webkit-border-bottom-right-radius:8px;
 -moz-border-radius-bottomleft:12px 8px;
 -moz-border-radius-bottomright:12px 8px;
 }
#bokspanel:hover{
 margin-top:0px;
 }
.paneltrigger:hover #bokspanel{
 margin-top: 0px;
 }
#panelmenu{
 line-height: 0px;
 }
#panelmenu .bokskiri {
 overflow:auto;
 float:left;
 width:250px;
 height:230px;
 border:1px solid #666; 
 padding:15px 6px;
 margin:5px;
 border-border-bottom-left-radius: 8px;
 -webkit-border-bottom-left-radius: 8px;
 -moz-border-radius-bottomleft: 8px;
 }
#panelmenu .bokstengah {
 overflow:auto;
 float:right;
 width:260px;
 height:230px;
 border:1px solid #666;
 padding:15px 6px;
 margin:5px;
 }
#panelmenu .bokskanan {
 overflow:auto;
 float:right;
 width:100px;
 height:230px;
 border:1px solid #666;
 padding:15px 6px;
 margin:5px;
 border-border-bottom-right-radius: 8px;
 -webkit-border-bottom-right-radius: 8px;
 -moz-border-radius-bottomright: 8px;
 }
#panelmenu .bokskiri ul, #panelmenu .bokstengah ul, #panelmenu .bokskanan ul{
 margin:0;
 padding:0;
 list-style:none;
 }
#panelmenu .bokskiri li, #panelmenu .bokstengah li, #panelmenu .bokskanan li{
 margin:0;
 padding:0;
 list-style:none;
 background:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/DoubleRedArrow.gif) left top no-repeat;
 background-position:0 7px;
 border-bottom:1px dotted #555;
 }
#panelmenu .bokskiri li:hover, #panelmenu .bokstengah li:hover, #panelmenu .bokskanan li:hover {
 background-image: none;
 }
#panelmenu .bokskiri li a, #panelmenu .bokstengah li a, #panelmenu .bokskanan li a{
 text-decoration:none;
 font:11px Tahoma;
 color: #fff;
 line-height:22px;
 padding-left:20px;
 }
#panelmenu .bokskiri li a:hover, #panelmenu .bokstengah li a:hover, #panelmenu .bokskanan li a:hover{  
 color:lime;
 }
a.paneltrigger {
 background:transparent;
 bottom:-50px;
 color:#000;
 display:block;
 font-size:18px Times;
 font-weight: bold;
 height:22px;
 padding:5px 10px 2px;
 position:absolute;
 right:150px;
 text-align:center;
 text-decoration:none;
 z-index:100;
 line-height: normal;
 border:2px solid red;
 border-top:none;
 border-bottom-left-radius:8px;border-bottom-right-radius:8px;
 -webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;
 -moz-border-radius-bottomleft:12px 8px;-moz-border-radius-bottomright:12px 8px;
 box-shadow:0 6px 6px #888;
 -moz-box-shadow:0 6px 6px #888;
 -webkit-box-shadow:0 6px 6px #888;
 }
</style>


<div id="bokspanel">
<div id="panelmenu" class="paneldalam">


<div class="bokskiri">
<ul>
    <li><a href="http://www.data-karinafoto.co.cc/2011/01/cara-buat-title-bar-yang-bisa-ber-jalan.html" target="_blank">Cara membuat title bar bergerak</a></li>
    <li><a href="Link-2" target="_blank">Link Title-2</a></li>
    <li><a href="Link-3" target="_blank">Link Title-3</a></li>
    <li><a href="Link-4" target="_blank">Link Title-4</a></li>
    <li><a href="Link-5" target="_blank">Link Title-5</a></li>
    <li><a href="Link-6" target="_blank">Link Title-6</a></li>
    <li><a href="Link-7" target="_blank">Link Title-7</a></li>
    <li><a href="Link-8" target="_blank">Link Title-8</a></li>
    <li><a href="Link-9" target="_blank">Link Title-9</a></li>
    <li><a href="Link-10" target="_blank">Link Title-10</a></li>
    <li><a href="Link-11" target="_blank">Link Title-11</a></li>
    <li><a href="Link-12" target="_blank">Link Title-12</a></li>
    <li><a href="Link-13" target="_blank">Link Title-13</a></li>
</ul>
</div>


<div class="bokskanan">
<ul>
    <li><a href="Link-1" target="_blank">Link Title-1</a></li>
    <li><a href="Link-2" target="_blank">Link Title-2</a></li>
    <li><a href="Link-3" target="_blank">Link Title-3</a></li>
    <li><a href="Link-4" target="_blank">Link Title-4</a></li>
    <li><a href="Link-5" target="_blank">Link Title-5</a></li>
    <li><a href="Link-6" target="_blank">Link Title-6</a></li>
    <li><a href="Link-7" target="_blank">Link Title-7</a></li>
    <li><a href="Link-8" target="_blank">Link Title-8</a></li>
    <li><a href="Link-9" target="_blank">Link Title-9</a></li>
</ul>
</div>




<div class="bokstengah"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnJQ_Nw4KFVSaoK7TxZeugGzSnFls66jL1c0ivwdW2IBk4b1F097eCwyp-ipklAXsLp9iS3b927YAmAiMfUKYyIpzq-7IstSsjXfqGEYa8r2TcXKaHzphxtNmSkwriK3xcbWc1XhdVYG4/s400/gubhugreyot200.24.jpg" /></div>
<ul>
    <li><a href="Link-1" target="_blank">Link Title-1</a></li>
    <li><a href="Link-2" target="_blank">Link Title-2</a></li>
    <li><a href="Link-3" target="_blank">Link Title-3</a></li>
    <li><a href="Link-4" target="_blank">Link Title-4</a></li>
    <li><a href="Link-5" target="_blank">Link Title-5</a></li>
    <li><a href="Link-6" target="_blank">Link Title-6</a></li>
    <li><a href="Link-7" target="_blank">Link Title-7</a></li>
    <li><a href="Link-8" target="_blank">Link Title-8</a></li>
    <li><a href="Link-9" target="_blank">Link Title-9</a></li>
</ul>
</div>


<div style="clear:both;"></div>
<a href="#" class="paneltrigger">Daftar Menu</a>
</div>
</div>

Selamat mencoba semoga berhasil...............ingat jangan takut gagal......