3 Cara membuat menu vertikal

Met hari ini sobat... sekarang ane akan posting lagi niee,, yg pasti dengan artikel yang lain lagi heheh, sekarang ane ingin berbagi tips cara membuat menu secara vertikal... langsung aja ke artikel inti oke coyyyy...

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.. ^_^

S'moga artikel ane ini bermanfaat buat sobat-sobat yang berkunjung ke blog ane... atas kunjungannya ane ucapkan terimakasih :)

===> SELAMAT MENCOBA <===

Sobat Menyukai Artikel PT. Blog! Ketikkan alamat email sobat di bawah ini untuk mendapatkan update atikel blog ini langsung ke email sobat. Terima Kasih Atas Partisipasinya!