Membuat Highlighting Current Page Atau Current Sajian Di Blogger

Highlighting Current Page atau Current Menu biasanya diartikan sebagai penanda halaman aktif untuk ketika ini ketika user berada dalam halaman tertentu, misalkan dalam halaman Home, About, Help us dan Contact. Pada Blogger sendiripun bahwasanya baru-baru saja sudah menanamkan fitur ini jikalau kita sedang mengaktifkan fitur untuk halaman (Page). Namun entah kenapa kebanyakan blogger termasuk aku sendiri tidak begitu tertarik menggunakan. Mungkin sudah telat kali ya :)

 

Yang menciptakan Saya tertarik untuk membahas fungsi Current Page ini alasannya hampir semua template yang aku sediakan di zoomtemplate.com sudah tertanam fitur untuk menampilkan sajian navigasi, sayangnya ya itu tadi, sajian yang seharusnya bagus malah ibarat hanya sebagai hiasan pengganti link saja, dan kebanyakan hanya terlihat anggun ketika user mengarahkan mouse (mouse hover) namun tidak mempunyai fitur penanda bahwa sajian tersebut seharusnya terlihat ikut aktif dalam halaman yang juga aktif.

 

Sebagai pola silahkan rekan melihat demonya di zoomtemplate.com

 

 

 

Disitu sanggup rekan lihat ketika kita berada dalam area halaman HOME, Link sajian HOME juga terlihat ikut aktif. Begitupula ketika rekan berapa dalam halaman FAQ'S dan beberapa Menu lainnya yang terlihat juga ikut aktif. 

 

Biar lebih gampang mempelajarinya silahkan Download pola Demo Menu yang sudah aku rancang disini.

 

 

OK eksklusif ke tutorial saja ya. Oh iya pola sajian dibawah ini tidak sama dengan pola sajian di zoomtemplate.com, tapi rekan sanggup mengedit sajian tersebut sesuai kebutuhan. Terus terang aku kesulitan menjelaskannya, alasannya hampir setiap instruksi CSS Menu mempunyai rancangan yang unik dan berbeda.Tapi dengan pola kali ini aku yakin rekan paling tidak mempunyai sedikit citra bagaimana cara Aktive Curren Page / Current Menu ini bekerja.

 

1. Silahkan eksklusif tuju ke halaman Edit HTML

 

2. Letakan instruksi CSS dibawah sempurna diatas instruksi ]]></b:skin>
 

#nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZe9N_BEQkTwnoEeCclp8lacp4b3JIvWvUddbVVbFkkI4okGXDXEz-Jv4VSd2TUOEMnBeqx1c4yVMKgqDNhSUT7IxtZbieTBUnEzn_ov_bUb6nm212Pu9AKSETCvc1H2C3xE3A556sfIDO/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/AVvXsEhWt08N4BruZrjXonWoM0MgFTP80XTe2E7kJoUqZ3ZFU55VkRgcnvNyzQ6p9mqA7UQGge9Wewq72mho9WHuNIubxQQ8LqRjXMdf0IF_PI7aNzIHrdhuI9hWM5sS_LYM6Kwl79QLKovBhOoY/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}

 

2. Letakan instruksi Javascript dibawah ini sempurna diatas instruksi </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>

 

3. Kemudian silahkan cari instruksi dibawah ini dalam barisan instruksi 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 instruksi dibawah ini sempurna diatas instruksi 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 sanggup bekerja, rekan harus mengganti tanda # diatas dengan alamat url post yang aktif.

 

Untuk menciptakan dan mengedit tampilan sajian jauh lebih anggun dari pola sajian diatas rekan sebaiknya mau tidak mau harus banyak mempelajari pengkodean HTML, CSS dan Javascript.

 

Selamat mencoba :)