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:
- Go to your blogger account.
- Then go to LAYOUT >> Edit HTML don't forget to check list "Expand Widget Template".
- And then copy below code:
- Then place CSS code in the top ,above this code]]></b:skin>
- 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> - Then put this HTML code just below this code
<div id='outer-wrapper'> - 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">
- 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>
<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>
- 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]="http://ilhamfiles.webs.com/images/down.gif"
arrowimages.right[1]="http://ilhamfiles.webs.com/images/right.gif"
</script> - The Click SAVE!
/*-- (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.