728x90 AdSpace

HEADLINE NEWS

28 Juli 2010

Highlighting Current Page atau Current Menu Blogger adalah membuat penanda halaman aktif ketika kita mengarahkan ke arah menu tersebut. pada sebagian template mungkin hanya berbentuk penanda hover saja seperti pada blog saya ini. namun dengan highlighting ini tampilan menu akan semakin menarik dan mempunyai daya tarik tersendiri bagi pemilik maupun pengunjung blogger. banyak trik lainnya dalam modifikasi horizontal menu blogger, seperti membuat horizontal menu dropdown, membuat menu dropdown dengan css dan sebagainya. nah buat sobat yang pengen mempercantik blognya, dengan membuat highlight current page atau current menu, berikut tutorialnya.
berikut adalah gambar tampilannya :

mari kita mulai tutorialnya :
  1. Login ke account blogger milik anda
  2. Klik rancangan lalu klik edit html
  3. Klik expand widget templates

Letakan kode CSS dibawah tepat diatas kode ]]></b:skin>
#nav ul {
background:url(http://lh6.ggpht.com/_mWNaJ9OwpbA/TFEHgnUugnI/AAAAAAAAAbY/FqdeXVsyb-g/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:urlhttp://lh3.ggpht.com/_mWNaJ9OwpbA/TFEHgupDT7I/AAAAAAAAAbc/VB8DmkeBKkI/current.gif) no-repeat center bottom;
color:#98CB00;
}
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>
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>
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>
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.
Asrizal Wahdan Wilsa

Memulai Blogging sejak tahun 2009 hingga sekarang. Aktif di bidang musik yang dinaungi salah satu label musik di Kota Bandung. Saat ini fokus melanjutkan kuliah ke jenjang S2 di Universitas Negeri Semarang (UNNES). Website: Sharing Media - Info Tips dan Trik Terbaru

  • Blogger Comments
  • Facebook Comments

1 komentar:

Berkomentarlah dengan bijak, relevan dengan artikel, komentar spam dan promosi akan kami hapus, terimakasih.

Kami akan menjawab komentar anda secepat mungkin, opsi lain silakan berkomentar di halaman facebook/melalui twitter kami.

Item Reviewed: Membuat Highlighting Current Page atau Current Menu Blogger Description: Rating: 5 Reviewed By: Asrizal Wahdan Wilsa
Scroll to Top