Cara Membuat Menu Horizontal Di Blog
1. Silahkan langsung tuju ke halaman Edit HTML
2. Letakan kode CSS dibawah tepat diatas kode ]]></b:skin>
#nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8JYkSWYVZ1LQBMGHEuq0nmpPk5eTNIcEqrfQ40VH96rQNTV4qkiglnzIzOh1WY4btRSJQlO3XrzJVQAzIhbxQ3i_P1o7nsluiTuy965MuSee7lwiueaFO2k8J8OXV1qHIjJPCuSUPsS4/s400/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
#nav li {
float:left;
}
#nav li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
font-stretch:condensed;
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
#nav li a:hover {
color:#98CB00;
}
#nav li.current {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB6JzXnc87Vo8VFAeYrBjNWUaemqd1vHvWvd5x582bdxwWb4BcWSHA2fwQcv2FPq9_-3va0p7gyR3mRF-vC9Hc7OfRtCW5T_wHo1CLN3D3qyIU7GekOg6AYoy4VZ3Lq5istne16xEU6Ko/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8JYkSWYVZ1LQBMGHEuq0nmpPk5eTNIcEqrfQ40VH96rQNTV4qkiglnzIzOh1WY4btRSJQlO3XrzJVQAzIhbxQ3i_P1o7nsluiTuy965MuSee7lwiueaFO2k8J8OXV1qHIjJPCuSUPsS4/s400/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
#nav li {
float:left;
}
#nav li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
font-stretch:condensed;
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
#nav li a:hover {
color:#98CB00;
}
#nav li.current {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB6JzXnc87Vo8VFAeYrBjNWUaemqd1vHvWvd5x582bdxwWb4BcWSHA2fwQcv2FPq9_-3va0p7gyR3mRF-vC9Hc7OfRtCW5T_wHo1CLN3D3qyIU7GekOg6AYoy4VZ3Lq5istne16xEU6Ko/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}
2. Letakan kode Javascript dibawah ini tepat diatas kode </head>
<script type='text/javascript'>
//<![CDATA[
function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
function setActiveMenu(arr, crtPage)
{
for (var i=0; i<arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "current";
arr[i].parentNode.className = "current";
}
}
}
}
function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;
if (document.getElementById("nav")!=null)
setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}
//]]>
</script>
//<![CDATA[
function extractPageName(hrefString)
{
var arr = hrefString.split('/');
return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
function setActiveMenu(arr, crtPage)
{
for (var i=0; i<arr.length; i++)
{
if(extractPageName(arr[i].href) == crtPage)
{
if (arr[i].parentNode.tagName != "DIV")
{
arr[i].className = "current";
arr[i].parentNode.className = "current";
}
}
}
}
function setPage()
{
hrefString = document.location.href ? document.location.href : document.location;
if (document.getElementById("nav")!=null)
setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString));
}
//]]>
</script>
3. Kemudian silahkan cari kode dibawah ini dalam barisan kode pada halaman Edit HTML
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
Lalu letakan kode dibawah ini tepat diatas kode diatas.
<div id='nav'>
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='#'>FAQ'S</a></li>
<li><a href='#'>HELP US</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='#'>FAQ'S</a></li>
<li><a href='#'>HELP US</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>
Agar Efek Current Page / Menu bisa bekerja, rekan harus mengganti tanda # diatas dengan alamat url post yang aktif.
Untuk membuat dan mengedit tampilan menu jauh lebih cantik dari contoh menu diatas rekan sebaiknya mau tidak mau harus banyak mempelajari pengkodean HTML, CSS dan Javascript.
Kalau Berhasil Blog Anda Akan Tampil Menu Seperti Gambar Diatas
Selamat mencoba-Good Luck :)
Semoga artikel Cara Membuat Menu Horizontal Di Blog bermanfaat bagi Anda.
Posting Komentar