Photobucket Photobucket Photobucket Photobucket Photobucket Photobucket Photobucket Photobucket Photobucket Photobucket Photobucket Photobucket
Widget by : arief

Senin, 01 Maret 2010

UvumiTools Drop down Menu


For those who are interested in installing the navigation on a blog, maybe you are interested in this drop down menu called UvumiTools Drop Down Menu.
uvumitools drop down menu
The difference of UvumiTools Drop Down Menu from the others is at its move that is so smooth, and exotic when we open and close the menu. It is because of using Mootools Javascript FrameWork thus making your blog perform more professional instead of it before. The original tutorial of UvumiTools Drop Down Menu can be read at this page, and at this tutorial, you will find a bit different because Kang Rohman has given a touch on it to be viewed more interesting.
 demo

Need to remember that one template will be different with the others, so you have to be able to adapt this tutorial with your template by modifying the CSS given.
Preparation in creating UvumiTools Drop Down Menu:

  • Keywords
The keywords that I mean are those to be viewed in the navigation. As an example, Kang Rohman wants to use the keywords of Home, Free Template, Blog Tutorial, Business Guide, and more.

  • Links
The links that I mean are the URL addresses to be pointed when visitors click on the keywords or navigation buttons that we will create at this tutorial. The links or URL addresses can be directed to other blogs. Example:
http://template-tutorial.com
http://www.blogspottutorial.com
http://www.life4business.com

The URLs can also point to the pages in the blog itself, e.g. the posts or categories. If you have not caught this point, please get the article talking about Horizontal Navigation here at Tutorial On Making Horizontal Navigation , e.g. :
http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html
http://kolom-tutorial.blogspot.com/2008/03/free-template-magazine-template-1.html
http://kolom-tutorial.blogspot.com/2009/03/magazine-template-r1.html

Need to remember again that one template design will be different from the others, so it is possible that this tutorial will not work on your blog.  Therefore, Kang Rohman suggests you to apply this tutorial on your new blog as try-out to avoid the error occurring to your main blog. Please choose the white minima template to make you easy.
Let’s get started:

  1. Please login to blogger with your ID
  2. Click Layout
  3. Click Edit HTML. Edit HTML
           
  4. Find the code]]></b:skin>
  5. Copy and paste the code below exactly above the code ]]></b:skin>
.

Copy and paste the code below exactly above the code



Scroll down your mouse and then find the code similar with:



Copy and paste the code below exactly under the code:



  1. Click SAVE TEMPLATE.
  2. Done
For the first step, you have done it, and for the next step, you simply replace the red-printed links with your own links, and the keywords as viewed in green should be replaced with your own as well.
I am sure that you have to edit on the CSS to match with the characteristics of your template. If you want the raw file of the CSS and JavaScript UvumiTools Drop Down menu, please download here!

Tidak ada komentar:

Posting Komentar