Membuat Menu Slide Di Samping

Mau buat menu seperti pada gambar diatas atau pada menu disamping kiri pada blog ini. Gampang sobat hanay ikutis step-stepnya, ok langsung tancap gan....

1. Login dulu ke blog sobat


2. Pilir Rancangan, Edit Html


3. Cari kode </head>


4. Masukan kode dibawah ini sebelum kode no.3
   
   view plainprint?

   1. <style type='text/css'>  
   2. #sidemnu {  
   3.  background: transparent url() right top no-repeat;  
   4.  padding: 0;  
   5.  position: fixed;  
   6.  left: 0;  
   7.  width: 355px;  
   8.  margin-left: -325px;  
   9.  margin-top: 75px;  
   10.  -o-transition: all 3s ease-in;  
   11.  -moz-transition: all 3s ease-in;  
   12.  -webkit-transition: all 3s ease-in;  
   13.  opacity: 0.4;  
   14.  }  
   15. #sidemnu:hover {  
   16.  opacity: 1.0;  
   17.  -o-transform: translate(325px);  
   18.  -moz-transform: translate(325px);  
   19.  -webkit-transform: translate(325px);  
   20.  }  
   21. .GRmouseover {  
   22.  font: 20px Arial Narrrow;  
   23.  font-weight: bold;  
   24.  float: right;  
   25.  margin: 10px 10px 0 0;  
   26.  color: #FF0000;  
   27.  text-shadow: 0.01em 0.01em 0.2em #fff;  
   28.  -o-transition: all 0.5s ease;  
   29.  -moz-transition: all 0.5s ease;  
   30.  -webkit-transition: all 0.5s ease;   
   31.  }  
   32. .GRmouseover:hover {  
   33.  -o-transform: scale(1.0) rotate(720deg) translate(0px);  
   34.  -moz-transform: scale(1.0) rotate(720deg) translate(0px);  
   35.  -webkit-transform: scale(1.0) rotate(720deg) translate(0px);  
   36.  color: #ffffff;   
   37.  text-shadow: 1px 1px 2px #000;   
   38.  background: #bfbfbf; padding: 0 8px; opacity(0.5)  
   39.  border-radius: 8px;  
   40.  -moz-border-radius: 8px;  
   41.  -webkit-border-radius: 8px;   
   42.  border: 1px solid #777;   
   43.  }    
   44. #sidemnu .boxdalam {  
   45.  padding:10px 5px;  
   46.  border: 1px solid #333;  
   47.  background: #39393E;  
   48.  width: 300px;  
   49.  border-radius: 12px;  
   50.  -moz-border-radius: 12px;  
   51.  -webkit-border-radius: 12px;  
   52.  box-shadow: 1px 1px 15px #000;   
   53.  -moz-box-shadow: 1px 1px 15px #000;   
   54.  -webkit-box-shadow: 1px 1px 15px #000;   
   55.  }   
   56. #sidemnu .boxdalam2 {  
   57.  width: 275px;  
   58.  color: #000066;  
   59.  font: 12px Arial;  
   60.  padding: 5px 10px;  
   61.  }  
   62. #sidemnu .boxdalam ul, #sidemnu .boxdalam li{list-style: none;margin: 0;padding: 0;}  
   63. #sidemnu .boxdalam h3 {  
   64.  font: 18px Droid Serif;  
   65.  font-weight: bold;  
   66.  color: #2AFF00;  
   67.  text-shadow: 0 1px 1px #fff;  
   68.  border-bottom: 1px dotted #555;  
   69.  border-top: 1px dotted #555;  
   70.  background: #15181B;  
   71.  text-align: center;   
   72.   }  
   73. #sidemnu .boxdalam li {  
   74.  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR1utkw4ZDih9iM6Kn2PcX8OcBDsBktKF5yfcF1TvxSPBp8R_JtkgdzY3O-cqKFBMQQKvxnXgYJRMxOuBmXWvONG2B3vRx1z9Cpekcsrr9cK3kbDTVJry2Z2owBlHeUCmDbuU9_z_IDKk6/s128/RedArrowH12V10.png) top left no-repeat;  
   75.  background-position: 0px 3px;  
   76.  border-bottom: 1px dotted #666;  
   77.  }  
   78. #sidemnu .boxdalam li:hover {  
   79.  background: none;  
   80.  }   
   81. #sidemnu .boxdalam li a{  
   82.  padding-left: 20px;  
   83.  font: 11px calibri;   
   84.  color: #00FFFC;  
   85.  text-shadow: 0px 1px 1px #000000;  
   86.  text-decoration: none;   
   87.  }  
   88. #sidemnu .boxdalam li a:hover{  
   89.  color: #eee;  
   90.  background: #222;  
   91.  padding: 5px;  
   92.  border-radius: 5px;  
   93.  -moz-border-radius: 5px;  
   94.  -webkit-border-radius: 5px;   
   95.  text-shadow: 0px 0px 1px red;  
   96.  line-height: 20px;  
   97.  margin:0 10px;    
   98.  }  
   99. #sidemnu .boxdalam img {  
   100.  padding: 2px;  
   101.  border: 6px solid #000;  
   102.  border-radius: 10px;  
   103.  -moz-border-radius: 10px;  
   104.  -webkit-border-radius: 10px;  
   105.  -o-transition: all 3s ease;  
   106.  -moz-transition: all 3s ease;  
   107.  -webkit-transition: all 3s ease;  
   108.  opacity: 0.5;    
   109.  }  
   110. #sidemnu .boxdalam img:hover {  
   111.  opacity: 1.0;  
   112.  }  
   113. </style>  


5. Setelah itu cari kode <body>, letakan kode dibawah ini dimana saja yang penting masih di dalam tag <body>
   
   view plainprint?

   1. <div id='sidemnu'>  
   2. <div class='GRmouseover'>MENU</div>  
   3. <div class='boxdalam'>  
   4. <div class='boxdalam2' style='height:300px;overflow-y:auto;'>  
   5.   
   6. <h3>Judul 1</h3>  
   7. <ul>  
   8. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   9. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   10. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   11. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   12. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   13. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   14. </ul>  
   15. <h3>Judul 2</h3>  
   16. <ul>  
   17. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   18. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   19. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   20. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   21. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   22. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   23. </ul>  
   24. <h3>Judul 3</h3>  
   25. <ul>  
   26. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   27. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   28. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   29. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   30. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   31. <li><a href='url tujuan sobat'>Terserah sobat</a></li>  
   32. </ul>  
   33.   
   34. </div>  
   35. </div>  
   36. </div>  


6. Setelah itu klik simpan, dan lihat hasilnya.....

Gimana, menarik bukan......
Sobat bisa mengganti warna atau menambah backgroun pada script CSS, untuk url tujuan dan linknya silahkan sobat ganti sesuai dengan keperluan sobat.
Ok selamat berkreasi....
Tetaplah semangat untuk tersenyum, Salam senyum dariku....