Cara Membuat Shoutbox Autohide di Menubar

Oke sobat setelah posting SiteMap This Blog, sekarang Najib mau posting lagi nih yaitu Cara Membuat Shoutbox Autohide diMenubar, mungkin sobat Blogger semua udhah pada tau apasih Soutbox itu, shoutbox adalah Buku tamu, dan apa buku tamu, buku tamu adalah Shoutbox. hehe.jadi bercanda,alah gak usah dijelasin aja ya?? dan maksud dari postingan ini adalah  cara membuat Shoutbox autohide seperti gambar disamping.



Oke langsung ke TKP :

1. Login ke Blogger
2. Klik Ranangan => Edit template dan centang tuh Expand
3. Kemudian letakkan kode berikut diatas kode ]]></b:skin>
4. 
   
   

   /*** menubar1 css mula ***/

   
   

   #menubar1 {

   margin: 0;

   height:33px;

   padding: 3px 6px 2px;

   background: #72587F url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4FrerkVAky2tMZUFfRjdcuwZrrRg-4CtlpHxGKMHpqwEXURilQTB7U6a1y8vM8Bik1ecbdVRTA0lJzbtM66DfRfebzGHcmOpcP8gUZTM3hihsxRlrwEO_ajc4rmoyx2iCuqbL_Jcytkq/s320/gradient.png) repeat-x 0 -110px;

   line-height: 100%;

   border-radius: 0em;

   -webkit-border-radius: 0em;

   -moz-border-radius: 4px;

   -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);

   -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);

   }

   #menubar1 li {

   margin: 0 5px;

   padding: 0 0 8px;

   float: left;

   position: relative;

   list-style: none;

   }

   
   

   /* main level link */

   #menubar1 a {

   font: bold 12px Arial;

   color: #fff;

   text-decoration: none;

   display: block;

   padding: 8px 20px;

   margin: 0;

   -webkit-border-radius: 6px;

   -moz-border-radius: 6px;

   text-shadow: 0 1px 1px rgba(0,0,0, .3);

   }

   #menubar1 a:hover {

   background: #000;

   color: #000;

   }

   
   

   /* main level link hover */

   #menubar1 .current a, #menubar1 li:hover > a {

   background: #EE82EE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4FrerkVAky2tMZUFfRjdcuwZrrRg-4CtlpHxGKMHpqwEXURilQTB7U6a1y8vM8Bik1ecbdVRTA0lJzbtM66DfRfebzGHcmOpcP8gUZTM3hihsxRlrwEO_ajc4rmoyx2iCuqbL_Jcytkq/s320/gradient.png) repeat-x 0 -40px;

   color: #404040;

   border-top: solid 1px #f8f8f8;

   -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2);

   -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2);

   box-shadow: 0 1px 1px rgba(0,0,0, .2);

   text-shadow: 0 1px 0 rgba(255,255,255, 1);

   }

   
   

   /* dropdown */

   #menubar1 li:hover > ul {

   display: block;

   }

   
   

   /* level 2 list */

   #menubar1 ul {

   font: normal 12px Arial;

   color:#000000;

   text-align:left;

   display: none;

   margin: 0;

   padding: 2px 2px 2px 2px;

   width: 185px;

   position: absolute;

   top: 35px;

   left: 0;

   background: #9EDEFA url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4FrerkVAky2tMZUFfRjdcuwZrrRg-4CtlpHxGKMHpqwEXURilQTB7U6a1y8vM8Bik1ecbdVRTA0lJzbtM66DfRfebzGHcmOpcP8gUZTM3hihsxRlrwEO_ajc4rmoyx2iCuqbL_Jcytkq/s320/gradient.png) repeat-x 0 0;

   border: solid 1px #b4b4b4;

   -webkit-border-radius: 10px;

   -moz-border-radius: 10px;

   border-radius: 10px;

   -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);

   -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);

   box-shadow: 0 1px 3px rgba(0,0,0, .3);

   }

   
   

   /*** menubar1 css tamat ***/

   Background: #72587F (Warna background menu bar)
   Background: #EE82EE (Warna button menu bar)
   Background: #9EDEFA (Warna background shout box)
   Width: 185px; (Lebar kotak shout box)
5. Masukkan kode dibawah ini dibawah kode <div id='header-wrapper'> jika sobat ingin meletakkannya diatas bagian Blog, dan masukkan kode dibawah kode <div id='main-wrapper'> jika sobat ingin meletakkannya dibagian bawah header.
6. 
   
   

   <!-- menubar1 mula -->
   
   <ul id='menubar1'>
   <li class='current'><a href='http://najibblog2010.blogspot.com'>Home</a></li>
   <li><a href='http://rizalsaputra81.blogspot.com'>Rizal</a></li>
   <li><a href='http://najibblog2010.blogspot.com/2010/07/blog-post.html'>SiteMap</a></li>
   <li><a href='http://najibblog2010.blogspot.com/2010/04/tukar-link.html'>Link Exchange</a></li>
   <li><a href='http://najibblog2010.blogspot.com/2010/03/link-friends.html'>Link Friends</a></li>
   <li><a href='http://www.blogger.com/profile/00902916344318297076' rel='nofollow'>About Me</a></li>
   

   <li class='current'><a href='#'>Shout Box</a>

   <ul>

   
   

   <li>Masukkan kode shout box di sini</li>

   
   

   </ul>

   </li>

   </ul>

   
   
   <!-- Menubar1 tamat -->

    Selesai deh.....selamat mencoba n semoga berhasil............dan jangan lupa baca yang lainnya, okehh :)