Membuat Highlighting Current Page atau Current Menu

Ini adalah contoh highlighting current page atau current menu!

Blog Tutorial - Highlighting Current Page atau Current Menu diartikan sebagai penanda halaman yang aktif untuk saat ini ketika user berada pada halaman terntentu, misalnya pada halaman Home, About, Help Us, atau pun Contact. Blogger sebenarnya sudah menanamkan fitur ini jika sedang mengaktifkan fitur untuk halaman (Page). Namun, kebanyakan saat ini blogger tidak begitu tertarik menggunakannya.

Jika sobat merasa tertarik menggunakannya, langsung saja ikuti langkah-langkah di bawah ini!

Silahkan langsung tuju ke halaman Edit HTML

Letakan kode CSS di bawah tepat di atas kode ]]></b:skin>

#nav ul {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipRyPKDwpExvgswH_HF_EMfg339-EDnMzYEZ5wYE9_jb0z234ZO_r1vCLColIaSwf58B8x8ZjaU7N23kzL5hyWgtYyaq66nyh5iRnR9nABy9BvsVmhnYGZemyv8ZSd3Fua2Zbxtd3cY1Cv/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/AVvXsEg2ar0qwHHGhSZ-HD4qTjidrPCRzOgIuARGQi_z1ycq2XE0TMn5OJvFv2wnsxBeIjIM5nq53WvaM7zlECsA5dCvzO8I0NVlfAQ8O3AjKDeyQ8YdxspSuqgrej_4TImmT7auAisJEjudZNX0/s400/current.gi) no-repeat center bottom;

color:#98CB00;

}

Letakan kode Javascript di bawah ini tepat di atas 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>

Kemudian silahkan cari kode di bawah 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>

Lalu letakan kode di bawah ini tepat di atas 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>

Agar Efek Current Page/Menu bisa bekerja, rekan harus mengganti tanda # di atas dengan alamat URL post yang aktif.

Untuk membuat dan mengedit tampilan menu jauh lebih cantik dari contoh menu di atas rekan sebaiknya mau tidak mau harus banyak mempelajari pengkodean HTML, CSS, dan Javascript. Ok.

Sekian dari saya, selamat mencoba dan semoga berhasil. :)