Membuat Highlighting Current Page Atau Current Sajian Di Blogger

Tempat Blogging 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 bergotong-royong 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 :)

Tempat Blogging  

Tempat Blogging Yang menciptakan Saya tertarik untuk membahas fungsi Current Page ini sebab 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 menyerupai hanya sebagai hiasan pengganti link saja, dan kebanyakan hanya terlihat bagus ketika user mengarahkan mouse (mouse hover) namun tidak mempunyai fitur penanda bahwa sajian tersebut seharusnya terlihat ikut aktif dalam halaman yang juga aktif.

Tempat Blogging  

Tempat Blogging Sebagai pola silahkan rekan melihat demonya di zoomtemplate.com

Tempat Blogging  

Tempat Blogging  

Tempat Blogging  

Tempat Blogging 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. 

Tempat Blogging  

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

Tempat Blogging  

Tempat Blogging

Tempat Blogging  

Tempat Blogging OK pribadi 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, sebab hampir setiap arahan 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.

Tempat Blogging  

Tempat Blogging 1. Silahkan pribadi tuju ke halaman Edit HTML

Tempat Blogging  

Tempat Blogging 2. Letakan arahan CSS dibawah sempurna diatas arahan ]]></b:skin>
 

Tempat Blogging #nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoQ4AV-8x-VVwUFUtQ4sCaN6899alyTH6ryaIhF_vnVdEWhXtLZBtk59zqND-l_VPpssImif6sJ1vooj9qzIa5gSFrj-3bCuSYqlphwGfMrHbTAe9DJ0GvYAZ_d6FdIo9HahPmbrtNXg_O/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/AVvXsEi6CBverw-kOlqWrhj8XMfbNx92ArvDIwmb3eMiLp4xuJ5Q1cBq9M9KbYP3al89XHHEpz5IuSa4FhJ1H0-0KhXtwinx_OWI-2j7t7D0jAck47En9SogWlRQLOblS37XLvX2ErG_mRRhVf1f/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}

Tempat Blogging  

Tempat Blogging 2. Letakan arahan Javascript dibawah ini sempurna diatas arahan </head>

Tempat Blogging  

Tempat Blogging <script type='text/javascript'>
//<![CDATA[

Tempat Blogging 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));
}

Tempat Blogging //]]>
</script>

Tempat Blogging  

Tempat Blogging 3. Kemudian silahkan cari arahan dibawah ini dalam barisan arahan pada halaman Edit HTML

Tempat Blogging  

Tempat Blogging <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>

Tempat Blogging  

Tempat Blogging Lalu letakan arahan dibawah ini sempurna diatas arahan diatas.

Tempat Blogging  

Tempat Blogging <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>

Tempat Blogging  

Tempat Blogging Agar Efek Current Page / Menu sanggup bekerja, rekan harus mengganti tanda # diatas dengan alamat url post yang aktif.

Tempat Blogging  

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

Tempat Blogging  

Tempat Blogging Selamat mencoba :)

Share this post