Sudah taau kan maksudnya? Ya hampir sama seperti fungsi tab view menu hany aja ada highlightnya. Langsung aja cara membuatnya:
1. Log in ke BLOGGER >> Rancangan >> Edit HTML(biasakan untuk memback up template anda)
2. Cari kode
]]></b:skin>
3. Latakkan script beriikut dibawah kode no 2 <div id='nav'>
<ul>
<li><a href='url'>HOME</a></li>
<li><a href='url'>FAQ'S</a></li>
<li><a href='url'>HELP US</a></li>
<li><a href='url'>CONTACT</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>
#nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ_ZynFVUIKCBLYCk0IypeyzEOjLimgT3nuIegGjlcw3yfCRsCj8ONTAI3Ois2GTewcExl0AaFM6h8gkD-ce4IU9vyth9fnUKM3FRy5wDk0HK7vcSsv42TY-AK001asRzRF-QZeBM7wiTR/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/AVvXsEjO0bU04Bk4VMtYoe9nWKQwGnYxBXlJNA1F9MIQmj29Im8vSx-RSyujnV9UaWLtSYOJaYwdtzO8ltqI_n0H0ptSGpqPynK5LSFw1YdTK24AViWE2N9el3Y01prML6dJoRLl0cIPlnmnK19e/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>
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>
<ul>
<li><a href='url'>HOME</a></li>
<li><a href='url'>FAQ'S</a></li>
<li><a href='url'>HELP US</a></li>
<li><a href='url'>CONTACT</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>
#nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ_ZynFVUIKCBLYCk0IypeyzEOjLimgT3nuIegGjlcw3yfCRsCj8ONTAI3Ois2GTewcExl0AaFM6h8gkD-ce4IU9vyth9fnUKM3FRy5wDk0HK7vcSsv42TY-AK001asRzRF-QZeBM7wiTR/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/AVvXsEjO0bU04Bk4VMtYoe9nWKQwGnYxBXlJNA1F9MIQmj29Im8vSx-RSyujnV9UaWLtSYOJaYwdtzO8ltqI_n0H0ptSGpqPynK5LSFw1YdTK24AViWE2N9el3Y01prML6dJoRLl0cIPlnmnK19e/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>
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>
Ganti tulisan yang berwarna merah dengan url posting anda yang masih aktif.
0 komentar :
Posting Komentar