how to Create Menu With Scroll Function

Selasa, 11 Januari 2011

For beginner blogger like me, create a menu with the scroll function is first I thought hard, but if we understand the programming language, making menu like this is very easy. To save the place if my friend has a very long list of menu, menu with scroll function could be the perfect solution other than using the marquee or running text.

 
And making this menu does not use HTML code that many and complicated, yup just a little HTML code, my friend was able to make its menu. This menu can also mate menfaatkan in place long blogroll or list of posts that mate menus have.

 
To create a menu pal only need the HTML code like this:

 

    
<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee">

    
CONTENTS MENU

    
</ Div>

 

 
Description:

    
* Width -> width menu

    
* Height -> height menu

    
* Padding -> distance between the posts with the edge line

    
* Border -> thickness of the edge line

Stay pal kreasikan itself in accordance with your blog.
Sample HTML code for the menu that I have:

 

    
<div style="overflow:auto;width:310px;height:200px;padding:10px;border:1px solid #eee">

    
1. <a Href="http://miscah.blogspot.com/2009/04/panduan-membuat-blog.html"> Guide Create a Blog </ a>

    
2. <a Href="http://miscah.blogspot.com/2009/04/mengganti-template-blogspot.html"> Changing Blogger Templates </ a>

    
3. <a Href="http://miscah.blogspot.com/2009/04/cara-membuat-label-kategori.html"> How to Create Labels </ a>

    
4. <a Href="http://miscah.blogspot.com/2009/04/untuk-membuat-tampilan-tulisan-atau.html"> Upload Pictures to the Postings </ a>

    
5. <a Href="http://miscah.blogspot.com/2009/04/cara-pasang-banner-di-blog.html"> How to Put Banner </ a>

    
6. <a Href="http://miscah.blogspot.com/2009/04/tutorial-membuat-text-area.html"> Tutorial Creating a Text Area </ a>

    
7. <a Href="http://miscah.blogspot.com/2009/04/membuat-favicon.html"> Tips Make Favicon </ a>

    
8. <a Href="http://miscah.blogspot.com/2009/04/trik-membuat-read-more.html"> Tricks to Make Read More </ a>

    
9. <a Href="http://miscah.blogspot.com/2009/04/cara-pasang-search-engine-di-blog.html"> How to Put Search Engine </ a>

    
10. <a Href="http://miscah.blogspot.com/2009/04/menyimpan-file-di-geocitiesyahoocom.html"> Storing Files on Yahoo! Geocities </ a>

    
11. <a Href="http://miscah.blogspot.com/2009/04/kode-html-tampil-di-postingan.html"> HTML Code Shown in Posts </ a>

    
12. <a Href="http://miscah.blogspot.com/2009/04/cara-pasang-meta-tag.html"> How to Install Meta Tag </ a>

    
13. <a Href="http://miscah.blogspot.com/2009/04/daftarkan-blog-ke-search-engine.html"> Submit a Blog to the Search Engine </ a>

    
14. <a Href="http://miscah.blogspot.com/2009/04/alexa-rank.html"> Alexa Rank </ a>

    
15. <a Href="http://miscah.blogspot.com/2009/04/tips-membuat-efek-marquee.html"> Tips Make Marquee Effect </ a>

    
16. <a Href="http://miscah.blogspot.com/2009/05/pasang-kode-tukaran-link.html"> Attach Link exchange code </ a>

    
17. <a Href="http://miscah.blogspot.com/2009/05/backlink.html"> Backlinks </ a>

    
18. <a Href="http://miscah.blogspot.com/2009/05/yahoo-messenger-emoticons.html"> Yahoo Emoticons </ a>

    
19. <a Href="http://miscah.blogspot.com/2009/04/link-berkelip-warna-warni.html"> Links twinkle Colorful </ a>

    
20. <a Href="http://miscah.blogspot.com/2009/05/tips-membuat-menu-dropdown.html"> Creating Dropdown Menu </ a>  </ Div>

Little information concerning the above elements:

    
* Overflow: auto is the code for the rollers pages if the content of these pages has exceeded the height or width limits that have been specified.
    
* Width: 310px is the width of the field is in want, in this case amounted to 310 pixels, this value must be adjusted with the desire or be adjusted with the existing width of the sidebar. however, always related to the sidebar then you should use a value of 100% (width: 100%).
    
* Height: 200px is the height of the desired field, this value can change as you wish, ie be 300px.
    
* Padding: 10px is the distance for which there is writing in these pages do not hit the wall page, this value is, of course, can change as you wish. eg padding: 5px.
    
* Border: 1px solid # eee is the boundary line on each side, # eee to color code gray.

Good luck!


source : 
http://miscah.blogspot.com
Stumble
Delicious
Technorati
Twitter
Facebook
Reddit

0 komentar:

histats

visitor

free counters

recent post

recent post

recent comments