Login Blogger > Rancangan > Edit HTML
Copy kode dibawah ini dan taruh di atas kode mirip ]]></b:skin>
Copy kode dibawah ini dan taruh di atas kode mirip ]]></b:skin>
/* Menu Horizontal Dropdown */
#menuwrapperpic {background:#000 ;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper {width:970px;margin:0 auto;height:34px;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubar {width:100%;}
#menubar, #menubar ul {padding: 0;margin: 0;list-style: none;font-family:'Arial', serif;}
#menubar a {display: block;text-decoration: none;padding: 9px 10px 8px 10px;font:bold 13px/15px Arial,serif; text-decoration:none;color: #fff;border-right:1px solid #444}
#menubar a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzy_rqoNG0edSXqWywB59COL5aDnp4EMfx_84-gfdopVVq4p7lJWgwnapYXRi3x7xGItpUYmKXkBj_-wNT_jL85h6OWx5BBRsoqccvcrp88jlv7c2eXgRZ3UA_eBryffXdJxvF0blETJ3e/s1600/arrow_black_bottom.gif);background-repeat: no-repeat;background-position: right center; padding: 9px 20px 8px 10px;}
#menubar li {float: left;position: relative;}
/* hide from IE mac \*/
#menubar li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubar li ul, #menubar ul li {width:170px;}
#menubar ul li a {text-align:left;color: #fff;padding: 8px 13px;font-size: 13px;font-weight:normal;text-transform:none;font-family:Arial;border:1px solid #444;}
#menubar li ul {z-index:100;position: absolute;display: none;background:#000;}
#menubar li ul {-moz-box-shadow:0 2px 2px rgba(0, 0, 0, 0.6); -webkit-box-shadow:0 rgba(0, 0, 0, 0.6);}
#menubar li:hover a, #menubar a:active, #menubar a:focus, #menubar li.hvr a{background-color:#fff;color: #004276;text-decoration:underline;}
#menubar li:hover ul, #menubar li.hvr ul {display: block;}
#menubar li:hover ul a, #menubar li.hvr ul a {color: #edfdfd;background-color:transparent;text-decoration:none;}
#menubar li ul li.hr { display:block; font-size: 1px; height: 0px; line-height: 0px; margin:0px 0; }
#menubar ul a:hover {background-color: #fff!important;color: #004276 !important;text-decoration:none;}
#menubar li.selected a, #menubar li.selected a:visited {border-right:1px solid #444}
#menubar li.selected a:hover {background:none;color:#F7D528;}
Berikutnya silakan cari kode </head>, lalu taruh kode di bwah ini
tepat di atas </head>
tepat di atas </head>
<!-- Menu Horizontal -->
<script type='text/javascript'>
//<![CDATA[
function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com
if(navigator.appVersion.indexOf("MSIE")==-1){return;}
var i,k,g,lg,r=/\s*hvr/,nn='',c,cs='hvr',bv='menubar';
for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){
lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){
lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs;
this.className=cl;};lg[k].onmouseout=function(){c=this.className;
this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}}
//]]>
</script>
<!--[if lte IE 7]> <style> #menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;} </style> <![endif]-->
<script type='text/javascript'>
//<![CDATA[
function Menubar(){ //v1.1.0.2 by PVII-www.projectseven.com
if(navigator.appVersion.indexOf("MSIE")==-1){return;}
var i,k,g,lg,r=/\s*hvr/,nn='',c,cs='hvr',bv='menubar';
for(i=0;i<10;i++){g=document.getElementById(bv+nn);if(g){
lg=g.getElementsByTagName("LI");if(lg){for(k=0;k<lg.length;k++){
lg[k].onmouseover=function(){c=this.className;cl=(c)?c+' '+cs:cs;
this.className=cl;};lg[k].onmouseout=function(){c=this.className;
this.className=(c)?c.replace(r,''):'';};}}}nn=i+1;}}
//]]>
</script>
<!--[if lte IE 7]> <style> #menuwrapper, #menubar ul a {height: 1%;} a:active {width: auto;} </style> <![endif]-->
Setelah selesai kita akan menambahkan dan memunculkan navigasinya.
Caranya dengan menaruh kode ini di bawah <body>
Caranya dengan menaruh kode ini di bawah <body>
<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li class='selected'><a href='/'>Home</a></li>
<li><a href='#'>Peristiwa</a></li>
<li><a href='#'>Hiburan</a></li>
<li><a href='#'>Sport</a>
<ul>
<li><a href='#'>Bola</a></li>
<li><a href='#'>Moto GP</a></li>
<li><a href='#'>F1</a></li>
</ul>
</li>
<li><a href='#'>Politik</a></li>
<li><a href='#'>Hukum</a></li>
<li><a href='#'>Kesehatan</a></li>
<li><a href='#'>Tekno</a></li>
<li><a href='#'>Tutorial</a>
<ul>
<li><a href='#'>Menu1</a></li>
<li><a href='#'>Menu2</a></li>
<li><a href='#'>Menu3</a></li>
<li><a href='#'>Menu4</a></li>
</ul>
</li>
<li><a href='#'>Lowongan Kerja</a></li>
<li><a href='#'>Pendidikan</a></li>
<li><a href='#'>More</a>
<ul>
<li><a href='#'>Editorial</a></li>
<li class='hr'></li>
<li><a href='#'>Off Topic</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'></div>
</div>
NB:-p
# Silakan ganti link-link di atas dengan link artikel milik kamu dan
nama menu di blog.
nama menu di blog.
0 comments:
Posting Komentar