Jumat, 10 Agustus 2012

Cara membuat menu vertikal di Blog

Berikut Langkah-langkahnya :
1. Logn in ke blogger sobat
2. Pilih tab ==> Design ==> Edit HTML
3. Kemudian sobat cari kode ini ==> ]]></b:skin>
4. Copy kode dibawah ini dan pastekan di atas kode ===> ]]></b:skin>
  1. <!--VERTICAL-MENU-STARTS-Widget-by-http://trikdantutorialblog.blogspot.com/-->  
  2. #verticalmenu  
  3. border-bottom-width0;  
  4. }  
  5. #verticalmenu ul{  
  6. margin0;  
  7. padding0;  
  8. fontnormal 90% 'Trebuchet MS''Lucida Grande'Arialsans-serif;  
  9. }  
  10. #verticalmenu a{  
  11. displayblock;  
  12. padding3px 0;  
  13. padding-left9px;  
  14. width200px;  
  15. text-decorationnone;  
  16. color#fff;  
  17. border-right:1px solid #000000;  
  18. background-color#2175bc;  
  19. border-bottom1px solid #90bade;  
  20. border-left7px solid #1958b7;  
  21. }  
  22. #verticalmenu a:hover {  
  23. background-color#2586d7;  
  24. border-left12px solid #1c64d1;  
  25. width195px;  
  26. }  
  27. #verticalmenu div.menutitle{  
  28. colorwhite;  
  29. border-bottom1px solid #053E66;  
  30. padding5px 3px 5px 13px;  
  31. background-colorblack;  
  32. width201px;  
  33. fontbold 90% 'Trebuchet MS''Lucida Grande'Arialsans-serif;  
  34. }  
  35. <!--VERTICAL-MENU-STOPS-Widget-by-http://trikdantutorialblog.blogspot.com/-->  

5. Setelah selesai simpan Template

6. Lalu klik page Element ==> Add Gadget ==> pilih HTML/Java Script
7. Copy kode di bawah ini dan pasteka di dalam gadget tersebut

  1. <!--VERTICAL-MENU-STARTS-Widget-by-http://trikdantutorialblog.blogspot.com/-->  
  2. <div id="verticalmenu">  
  3. <div class="menutitle">Library</div>  
  4. <ul>  
  5. <a href="http://trikdantutorialblog.blogspot.com/">Home</a>  
  6. <a href="...your link...">tab 2a</a>  
  7. <a href="...your link...">tab 3a</a>  
  8. <a href="...your link...">tab 4a</a>  
  9. <a href="...your link...">tab 5a</a>  
  10. <a href="...your link...">Contact me</a>  
  11. </ul>  
  12. <div class="menutitle">All about Blogs</div>  
  13. <ul>  
  14. <a href="...your link...">tab 1b</a>  
  15. <a href="...your link...">tab 2b</a>  
  16. </ul>  
  17. <div class="menutitle">Blogger</div>  
  18. <ul>  
  19. <a href="...your link...">tab 1c</a>  
  20. <a href="...your link...">tab 2c</a>  
  21. <a href="...your link...">tab 3c</a>  
  22. <a href="...your link...">tab 4c</a>  
  23. </ul>  
  24. </div>  
  25. <a href='http://trikdantutorialblog.blogspot.com/2012/02/cara-membuat-menu-vertikal-sederhana.html' title='Get This Menu!'>Get This Menu!</a>  
  26. <!--VERTICAL-MENU-STOPS-Widget-by-http://trikdantutorialblog.blogspot.com/-->  




8. Setelah selesai simpan deh...
9. Selesai..


Selamat Mencoba

Tidak ada komentar:

Poskan Komentar