Ninja Cloak : Anonymous Web Proxy

Hello my friend bloggers, this time I will be posting about someone who sends me a message on the cbox "How do I create a menu slides like I have?".

Yhupz. Let's see how to do it.Previously seen first! like what I've got a slide menus?

Look at the top of this post!

The way to do it:

1. Go to your blogger account.
2. Then go to LAYOUT >> Edit HTML don't forget to check list "Expand Widget Template".
3. And then copy below code:

/*-- (Menu/Nav) --*/
#nav-element{width:968px;margin:0; padding:0px 0 0px 0; float:center}
.nav-left{float:left;margin:-1px;padding-left:6px;width:744px}
.nav-right{float:left;margin:0px;padding:0px 0 0px 0;width:200px}
#nav{background:#333 url(http://ilhamfiles.webs.com/template/ilhamfilesblogspotcom/topmenubgrhy30.jpg) no-repeat; height:30px; padding:4px 0 0; margin-bottom:0px; clear:both; margin:0 auto;position:relative;top:0}
.jqueryslidemenu{background:#414141;font:bold 12px Verdana;width:100%}
.jqueryslidemenu ul{list-style-type:none;margin:0;padding:0}
.jqueryslidemenu ul li{display:inline;float:left;position:relative}
.jqueryslidemenu ul li a{background:#414141;border-right:1px solid #778;color:#2d2b2b;display:block;padding:8px 10px;text-decoration:none}
* html .jqueryslidemenu ul li a{display:inline-block}
.jqueryslidemenu ul li a:link,.jqueryslidemenu ul li a:visited{color:#FFF}
.jqueryslidemenu ul li a:hover{background:#000;color:#FFF}
.jqueryslidemenu ul li ul{display:block;left:0;position:absolute;visibility:hidden}
.jqueryslidemenu ul li ul li{display:list-item;float:right}
.jqueryslidemenu ul li ul li ul{top:0}
.jqueryslidemenu ul li ul li a{border-bottom:1px solid gray;border-top-width:0;font:normal 13px Verdana;margin:0;padding:5px;width:160px}
.jqueryslidemenuz ul li ul li a:hover{background:#eff9ff;color:#000}
.downarrowclass{position:absolute;right:7px;top:12px}
.rightarrowclass{position:absolute;right:5px;top:6px}


Note : For the following code Red . You can edit, but you must see the following #outer-wrapper code of your template.
4. Then place CSS code in the top ,above this code]]></b:skin>
5. Setelah itu, untuk menerapkan kode css diatas ke template kita caranya copy dahulu kode html di bawah ini:

   
   <div id='nav-element'>
   <div id='nav'>
   <div class='nav-left'>
   <b:section class='nav-left' id='nav-left' preferred='yes' showaddelement='no'>
   <b:widget id='HTML99' locked='false' title='' type='HTML'/>
   </b:section>
   </div>
   <div class='nav-right'>
   <b:section class='nav-right' id='nav-right' preferred='yes' showaddelement='no'>
   <b:widget id='HTML100' locked='false' title='' type='HTML'/>
   </b:section>
   </div>
   </div>
   </div>

6. Then put this HTML code just below this code
   <div id='outer-wrapper'>
7. The next step is to install the widget with the HTML code below:
   
   • For Slide Menu, click Edit on the HTML99 :

     
    <div id="myslidemenu" class="jqueryslidemenu">
   <ul>
   <li><a href="http:/ilhamfiles.blogspot.com">Item 1</a></li>
   <li><a href="LINK URL DISINI">Item 2</a></li>
   <li><a href="LINK URL DISINI">Folder 1</a>
   <ul>
   <li><a href="LINK URL DISINI">Sub Item 1.1</a></li>
   <li><a href="LINK URL DISINI">Sub Item 1.2</a></li>
   <li><a href="LINK URL DISINI">Sub Item 1.3</a></li>
   <li><a href="LINK URL DISINI">Sub Item 1.4</a></li>
   </ul>
   </li>
   <li><a href="LINK URL DISINI">Item 3</a></li>
   <li><a href="LINK URL DISINI">Folder 2</a>
   <ul>
   <li><a href="LINK URL DISINI">Sub Item 2.1</a></li>
   <li><a href="LINK URL DISINI">Folder 2.1</a>
   <ul>
   <li><a href="LINK URL DISINI">Sub Item 2.1.1</a></li>
   <li><a href="LINK URL DISINI">Sub Item 2.1.2</a></li>
   <li><a href="LINK URL DISINI">Folder 3.1.1</a>
   <ul>
   <li><a href="LINK URL DISINI">Sub Item 3.1.1.1</a></li>
   <li><a href="LINK URL DISINI">Sub Item 3.1.1.2</a></li>
   <li><a href="LINK URL DISINI">Sub Item 3.1.1.3</a></li>
   <li><a href="LINK URL DISINI">Sub Item 3.1.1.4</a></li>
   <li><a href="LINK URL DISINI">Sub Item 3.1.1.5</a></li>
   </ul>
   </li>
   <li><a href="LINK URL DISINI">Sub Item 2.1.4</a></li>
   </ul>
   </li>
   </ul>
   </li>
   <li><a href="LINK URL DISINI">Item 4</a></li>
   </ul>
   <br style="clear: left" />
   </div>

   
   
   • For Search Engine, click on the HTML 100:

     
   <form action="http://ilhamfiles.blogspot.com/search" method="get"><div style="margin-top:3px;float: left;"><input class="textinput" name="q" size="20" type="text" /></div><div style="margin-top:1.8px;float: left; margin-left:5px"><input style="margin-left: 10px;" value="Cari" class="buttonsubmit" name="submit" size="10" type="submit" /></div></form>



8. Lastly, stay right to the animated menu with copy the code below and save it under the code<head> :

   <script src='http://www.serie3.info/s3slider/style/js/jquery.js' type='text/javascript'/>
   <!--[if lte IE 7]>
   <style type="text/css">
   html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
   </style>
   <![endif]-->
   <script src='http://ilhamfiles.webs.com/template/ilhamfilesblogspotcom/7.js' type='text/javascript'/>
   <script type='text/javascript'>
   arrowimages.down[1]=&quot;http://ilhamfiles.webs.com/images/down.gif&quot;
   arrowimages.right[1]=&quot;http://ilhamfiles.webs.com/images/right.gif&quot;
   </script>

9. The Click SAVE!

Now Look ... results! Satisfactory or not? If the hack above having problems, please contact me at the column contact us.Good luck, may be useful.

Related Posts