Cara Membuat Menu Slide Bergaya Vertikal Fixed Mungkin sobat ingin memasang menu seperti gambar di bawah ini, Oke kita lanjut aja ke Tutorial berikut ...

Login ke Blogger

Rancangan -> Edit HTML

Tekan Ctrl+F cari kode ]]>

 copy kode CSS dibawah ini paste diatas kode ]]>copy kode CSS dibawah ini paste diatas kode ]]>;

</span></p> <p> /* A universal CSS reset */</p> <p> <br></p> <p> margin:0;</p> <p> <br></p> <p> padding:0;</p> <p> <br></p> <p> }</p> <p> <br></p> <p> #navigationMenu body{</p> <p> <br></p> <p> font-size:14px;</p> <p> <br></p> <p> color:#666;</p> <p> <br></p> <p> background:#111 no-repeat;</p> <p> <br></p> <p> <br></p> <p> <br></p> <p> /* CSS3 Radial Gradients */</p> <p> <br></p> <p> background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px);</p> <p> <br></p> <p> background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111));</p> <p> <br></p> <p> font-family:Arial, Helvetica, sans-serif;</p> <p> <br></p> <p> }</p> <p> <br></p> <p> #navigationMenu li{</p> <p> <br></p> <p>  list-style:none;</p> <p> <br></p> <p>  height:39px;</p> <p> <br></p> <p>  padding:2px;</p> <p> <br></p> <p>  width:40px;</p> <p> <br></p> <p> }</p> <p> <br></p> <p> <br></p> <p> <br></p> <p> #navigationMenu span{</p> <p> <br></p> <p>  /* Container properties */</p> <p> <br></p> <p>  width:0;</p> <p> <br></p> <p>  left:38px;</p> <p> <br></p> <p>  padding:0;</p> <p> <br></p> <p>  position:absolute;</p> <p> <br></p> <p>  overflow:hidden;</p> <p> <br></p> <p> <br></p> <p> <br></p> <p>  /* Text properties */</p> <p> <br></p> <p>  font-family:'Myriad Pro',Arial, Helvetica, sans-serif;</p> <p> <br></p> <p>  font-size:18px;</p> <p> <br></p> <p>  font-weight:bold;</p> <p> <br></p> <p>  letter-spacing:0.6px;</p> <p> <br></p> <p>  white-space:nowrap;</p> <p> <br></p> <p>  line-height:39px;</p> <p> <br></p> <p> <br></p> <p> <br></p> <p>  /* CSS3 Transition: */</p> <p> <br></p> <p>  -webkit-transition: 0.25s;</p> <p> <br></p> <p>  /*-o-transition: 0.25s;*/</p> <p> <br></p> <p> <br></p> <p> <br></p> <p>  /* Future proofing (these do not work yet): */</p> <p> <br></p> <p>  -moz-transition: 0.25s;</p> <p> <br></p> <p>  transition: 0.25s;</p> <p> <br></p> <p> }</p> <p> <br></p> <p> <br></p> <p> <br></p> <p> #navigationMenu a{</p> <p> <br></p> <p>  background:url('https://lh5.googleusercontent.com/-KwCHdatizWA/TrjY-aOvayI/AAAAAAAAS9M/UjjseDoabfA/s1600/navigation.jpg') no-repeat;</p> <p> <br></p> <p>  height:39px;</p> <p> <br></p> <p>  width:38px;</p> <p> <br></p> <p>  display:block;</p> <p> <br></p> <p>  position:relative;</p> <p> <br></p> <p> }</p> <p> <br></p> <p> <br></p> <p> <br></p> <p> /* General hover styles */</p> <p> <br></p> <p> #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }</p> <p> <br></p> <p> #navigationMenu a:hover{</p> <p> <br></p> <p>  text-decoration:none;</p> <p> <br></p> <p> <br></p> <p> <br></p> <p>  /* CSS outer glow with the box-shadow property */</p> <p> <br></p> <p>  -moz-box-shadow:0 0 5px #9ddff5;</p> <p> <br></p> <p>  -webkit-box-shadow:0 0 5px #9ddff5;</p> <p> <br></p> <p>  box-shadow:0 0 5px #9ddff5;</p> <p> <br></p> <p> }<span style="background-color: rgb(255, 255, 255); font-family: LuzSans-HeavyItalic, 'trebuchet ms', verdana, sans-serif; font-size: 16px; letter-spacing: 0.527999997138977px; line-height: 19.1875px; text-align: center; text-indent: 48px;">

• (((  Selanjutnya Cari kode 

 copy kode berikut ini terus elu masukan di atas kode   )))

</span></p> <p> <div style='position: fixed; top: 40%; left: 0%;'> </p> <p> <br></p> <p> <ul id='navigationMenu'></p> <p> <br></p> <p> <li></p> <p> <br></p> <p> <a class='home' href='http://manapsibarani.blogspot.com/'></p> <p> <br></p> <p> <span>XXXXXXX</span></p> <p> <br></p> <p> </a></p> <p> <br></p> <p> </li> </p> <p> <br></p> <p> <br></p> <p> <br></p> <p> <li></p> <p> <br></p> <p> <a class='about' href='http://manapsibarani.blogspot.com/'></p> <p> <br></p> <p> <span>XXXXXXX</span></p> <p> <br></p> <p> </a></p> <p> <br></p> <p> </li> </p> <p> <br></p> <p> <br></p> <p> <br></p> <p> <li></p> <p> <br></p> <p> <a class='services' href='http://manapsibarani.blogspot.com/'></p> <p> <br></p> <p> <span>XXXXXXX</span></p> <p> <br></p> <p> </a></p> <p> <br></p> <p> </li> </p> <p> <br></p> <p> <br></p> <p> <br></p> <p> <li></p> <p> <br></p> <p> <a class='portfolio' href='http://manapsibarani.blogspot.com/'></p> <p> <br></p> <p> <span>XXXXXXX</span></p> <p> <br></p> <p> </a></p> <p> <br></p> <p> </li> </p> <p> <br></p> <p> <br></p> <p> <br></p> <p> <li></p> <p> <br></p> <p> <a class='contact' href='http://manapsibarani.blogspot.com/'></p> <p> <br></p> <p> <span>XXXXXXX</span></p> <p> <br></p> <p> </a></p> <p> <br></p> <p> </li> </p> <p> <br></p> <p> </ul> </p> <p> <br></p> <p> </div> <span style="background-color: rgb(255, 255, 255); font-family: LuzSans-HeavyItalic, 'trebuchet ms', verdana, sans-serif; font-size: 16px; letter-spacing: 0.527999997138977px; line-height: 19.1875px; text-align: center; text-indent: 48px;">

Yang http://manapsibarani.blogspot.com/ elu ubah dengan link yang akan di tuju dan yang XXXXXXX kamu ubah dengan Judul.

• Kemudiaan Save Template.
• Lihat Hasilnya gan !!!! XD,....