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-width: 0;  
4. }  
5. #verticalmenu ul{  
6. margin: 0;  
7. padding: 0;  
8. font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;  
9. }  
10. #verticalmenu a{  
11. display: block;  
12. padding: 3px 0;  
13. padding-left: 9px;  
14. width: 200px;  
15. text-decoration: none;  
16. color: #fff;  
17. border-right:1px solid #000000;  
18. background-color: #2175bc;  
19. border-bottom: 1px solid #90bade;  
20. border-left: 7px solid #1958b7;  
21. }  
22. #verticalmenu a:hover {  
23. background-color: #2586d7;  
24. border-left: 12px solid #1c64d1;  
25. width: 195px;  
26. }  
27. #verticalmenu div.menutitle{  
28. color: white;  
29. border-bottom: 1px solid #053E66;  
30. padding: 5px 3px 5px 13px;  
31. background-color: black;  
32. width: 201px;  
33. font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-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

view plainprint?

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