26.7.09

CSS Menu With Subfolder

cssmenu2

Dear my friends, someone comment me if i have no a new post for almost a week, i value him because he think i won't got SEO if i have no new post, OK you are right man.

Sorry, many days I don't make a new post because I looking for a new way to increase my blog traffic with blogsurfing around the internet world (hihihi..).

OK friends, now i have to make a new post. This post is a trick and tutorial about how to make a horizontal drop down menu with sub folder using CSS, I always like using CSS to make my blog menu.

Tips: For some blogger who have many post it will be hard for visitor to find the oldest post, so you have to make a menu with sub folder to separated some posts with the labels and put its label on the sub folder menu, sure it will be easier for visitor to find your oldest post.

Here i will explain a trick how to make menu with sub folder using CSS, please follow this tutorial :

As a preparation step, you should download files below

http://h1.ripway.com/woyzer/jqueryslidemenu.css

http://h1.ripway.com/woyzer/jqueryslidemenu.js


You could make change to the CSS files for background or foreground menu color, then upload files to your upload host server, for example I use ripway for my files upload host server.

Login to your blogger account, enter to Layout and Edit HTML, make sure to checklist Expand Widget Template.

Always backup your template before make a change

Put this code below before </HEAD> code :


<link rel="stylesheet" type="text/css" href="http://h1.ripway.com/woyzer/jqueryslidemenu.css" />

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://h1.ripway.com/woyzer/jqueryslidemenu.js"></script>

Change the red written text with your own files URL address !

Find this code <div id='main-wrap1'> (your main wrap widget, maybe name is different), put this code below before your main wrap widget:


<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://bizril.blogspot.com">HOME</a></li>
<li><a href="http://bizril.blogspot.com/search?max-results=200">CONTENT</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 1</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.blogger.com/profile/09867939709875498061">ABOUT</a></li>
</ul>
<br style="clear: left" />
</div>

You should change the red written text with your own URL, green written text with your own menu item and also you could add or remove menu items depend on your needed.

Save the template and now you ready to use your menu.

Blog, Blogger, Google, Alexa, Bing, Yahoo, Search, SEO, PageRank, Traffic, Meta, Tag, Webmaster, Analyzer, Tutorial, Tips, Trick, Booster

50 komentar:

  1. Thanks infonya sob... tetap belajar dan berkreasi..

    BalasHapus
  2. hay sobat...nice blog...

    BalasHapus
  3. Nice Post, keep share ya..
    Sukses selalu juga bizril :)

    Thanks ya

    BalasHapus
  4. Yeah, i can see that. thanks

    BalasHapus
  5. kunjungan blk nieh :)))

    BalasHapus
  6. hi, thanks 4 your visit. Right now i'm upset b'cause someone has stolen my template creation. Pls support me to say "NO TO STEALING OTHER'S CREATION". Once again thanks.

    BalasHapus
  7. hi..thanks for visiting;) good day!

    BalasHapus
  8. hai kamana bae yeuh ki dulur teh.. ditunggu comment nya ya..

    BalasHapus
  9. Thanks ... sya pingin Blajar CSS tapii gak bsa2 he3x

    BalasHapus
  10. Hello my friend, thank you very much for the visit, good week with happiness and peace. Valter.

    BalasHapus
  11. tips yang sangat berguna....

    BalasHapus
  12. Anonim9:15 AM

    clever stuff,and I like the outcome of the text.I shall add to mine once I get time thank you and keep well my friend.

    BalasHapus
  13. BIZRIL10:02 AM

    @秘密崇拜者:
    @asep canda:
    @Putera04:
    @Breath Love:
    @aBe:
    @Master Oos:
    @rival:
    Thanks for comment here, i appreciate you, i hope this will be useful for you

    BalasHapus
  14. bro,
    biar cepet dapat banyak keyword google, banyak2in ngasih komentar pada blog DO FOLLOW, biasanya yang ada tandanya "U COMMENT i FOLLOW" soalnya auto back link

    PR juga cepet naik kalo makin banyak backlink kita, apalagi komen di blog yang PR nya lebih tinggi dari PR blog lu

    selamat hunting bro

    gud lak

    BalasHapus
  15. bro,
    biar cepet dapat banyak keyword google, banyak2in ngasih komentar pada blog DO FOLLOW, biasanya yang ada tandanya "U COMMENT i FOLLOW" soalnya auto back link

    PR juga cepet naik kalo makin banyak backlink kita, apalagi komen di blog yang PR nya lebih tinggi dari PR blog lu

    selamat hunting bro

    gud lak

    BalasHapus
  16. Hello friends.
    A great day for you.
    Friendships.
    Teb.

    BalasHapus
  17. wah.. hebat tutorialN.. coba ah...

    BalasHapus
  18. Ganesha most beautiful of the world

    BalasHapus
  19. good post.. keep sharing my friend

    BalasHapus
  20. good post .. I really like it .. very useful ..

    BalasHapus
  21. BIZRIL6:12 PM

    @Free Tips 4U: yeah, sure me too, if someone use my template without including copyright of creator. To all my friend who use template from other creator, please don't remove the copyright credit!! thanks

    BalasHapus
  22. BIZRIL6:17 PM

    @Stella:
    @resistanCe:
    @natasha:
    @Skipper:
    @Tebinfea:
    @Aisyah:
    @Ganesha:
    @draxc0la:
    @satria:
    ---------Thanks for your comment, hope this post is useful for you guy----------------

    BalasHapus
  23. BIZRIL6:22 PM

    @gaban: sure gaban, i'd like to comment at other blog post, but i don't care with other blog pr or rel to comment, just leave a comment at their posts that i understand with their topics. thanks

    BalasHapus
  24. sob, ada award buat km, ambil ya.

    BalasHapus
  25. Wiiiw.. each visit there are always new .. you are creative man.. I need to bookmarks

    BalasHapus
  26. i thought i wrote something here yesteday.. but it seems... it disappear or something..!??!? hhmm...

    BalasHapus
  27. thanks 4 d visit!

    BalasHapus
  28. BIZRIL4:51 PM

    @Free Tips:
    @Saung:
    @shiela:
    ----- Thanks,hope this article useful for you -----

    BalasHapus
  29. BIZRIL4:59 PM

    @genial: we'll very appreciate your comment, maybe you make a comment in another post, and maybe you make a comment with too many URL.

    @all visitors/friends: I'm very sorry to all my visitors and my friends, i have been applying new rules for comments since july 29, comment here moderated before published, hope you understand, Thanks.

    BalasHapus
  30. visit you back...

    BalasHapus
  31. good luck always 4u bizril....

    BalasHapus
  32. hello have a happy weekend!

    BalasHapus
  33. BIZRIL1:25 PM

    @Alleth: thanks 4 visit back, feel free to visit here !
    @Breath: thanks, good luck 4 u too
    @wyne: thanks, happy weekend 4 u too

    BalasHapus
  34. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  35. Anonim12:03 PM

    visit my blog
    http://trickandtutorial.blogspot.com/

    trick and tutorial about computer and internet

    BalasHapus
  36. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  37. is the javascript part easy to implement with xml? or json link files?

    BalasHapus
  38. best seo service.. I like this your tips..
    search engine optimization agencies

    BalasHapus
  39. Thanks for the coding guidelines.They are very useful for the web designers.
    Bahrain website design company

    BalasHapus
  40. @Term Papers;
    @SURAJIT;
    @Web Design Bahrain;
    Thanks for visit here, hope this useful for you

    BalasHapus
  41. @Prototype: I never use json, i think you must convert all codes first to json script, but i can use it in php script by using : echo "java script here";

    BalasHapus
  42. Many retailers and companies use verification methods such as unique barcodes, coupon ID numbers, holographic seals, and watermarked paper as protection from unauthorized copying or use.

    BalasHapus
  43. Great information.I use information to my site and everyone wrote nice comments.I am glad and i need more information Please share with me.

    BalasHapus
  44. Thanks for the informative writing. Would mind updating some good tips about it. I still wait your next place. ;)

    Web Design and Development Services

    BalasHapus
  45. @coupons: many ways to protect copyright from illegal use, but the best think from the bottom of the heart of the copyer

    @all: thanks for comments, i hope this useful for you

    BalasHapus
  46. I have found your blog to be quite useful. Keep updating your blog with valuable information.

    BalasHapus

Bizril Blog ™ adalah DoFollow blog
.
Tulislah komentar dengan menggunakan bahasa yang baik dan tidak menyinggung SARA (Suku, Agama, Ras dan Antar golongan). Usahakan agar komentar anda relevan dengan topik bahasan.
Boleh menyertakan 1 link pada komentar, tetapi jika lebih dari 1 link akan dihapus.
Terimakasih atas komentar anda.