Jika ente tidak tertarik dengan Navbar default dari blogger dan ingin menggantikan dengan Navbar seperti yang terdapat pada blog ini, ente bisa menggikuti tutorial di bawah secara step by step.
Langkah Pertama :
Menghilangkan Navbar Blooger dengan cara menambah kode css ini
#navbar-iframe{display:none; height:0; visibility:hidden}
Simpan sebelum tag body ini.
body {
background:$bgcolor;
margin:0;
color:$textcolor;
dan seterusnya
}
Langkah Kedua :
Tambahkan kode css navigasi ini.
/************** NAV1 *************/
#nav1{
height:32px;
line-height:32px;
background:white;
padding:0 10px;
background:transparent;
border-bottom: 1px solid #cfe4f2;
}
#nav1 ul,
#nav1 ul li
{
margin:0;
padding:0;
list-style:none;text-align:left;
}
#nav1 ul li{
float:left;
display:block;
}
#nav1 ul li a:link,
#nav1 ul li a:visited{
color:#0007EE;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;;
display:block;
}
#nav1 ul li a:hover{
color:black;
}
#nav1 ul li ul li{
float:none;
display:block;
}
#nav1 ul li ul li a:link,
#nav1 ul li ul li a:visited{
color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;
}
#nav1 ul li ul li a:hover{
color:#3B5998;
background:#EBEFF7;
}
.submenu {
position: absolute;
width: 160px;
background: #fff;
padding:10px;
border:solid 1px #2E4B88;
border-top:none;
z-index: 1000;
display:none;
line-height:26px;
}
#nav1 ul li#nav1_rss {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoJD8XlNygftOlloKHWr_NmMMEZwI78RA3DMFPFb3Y9OIxsA29-zsNq88AtyolB8BJNk3wduTdoCeMvgxJOXTmqnKuPuYD3ekQJwfNE6DOOoktMAekqIfWzhzgZdtJghekhdDmSa-Ro_lZ/') no-repeat 10px;
padding-left:26px;
float:right;
}
#nav1 ul li#nav1_cat {
background:transparent;
float:right;
padding-left:10px;
}
Simpan sebelum kode ini.
]]></b:skin>
Langkah Ketiga :
Tambahkan javascript ini
<script src='http://santi23.fileave.com/jquery-1.3.2.min.js' type='text/javascript'/>
<script type='text/javascript'>
function nav1(){
$("div#nav1 ul li").mouseover(function() {
$(this).find('ul:first').show();
});
$("div#nav1 ul li").mouseleave(function() {
$("div#nav1 ul li ul").hide();
});
$("div#nav1 ul li ul").mouseleave(function() {
$("div#nav1 ul li ul").hide();
});
};
$(document).ready(function(){
nav1();
});
</script>
Simpan javascript di atas sebelum kode ini
</head>
Langkah Keempat;
Masukan html navigasi ini.
<div id='nav1'>
<ul>
<li><a href='url / alamat link tujuan' >Home</a></li>
<li class=''><a href='#' title='About'>About</a></li>
<li><a href='#' title='Child Pages Test'>Cara Membuat Blog</a>
<ul class='submenu'>
<li><a href='url / alamat link tujuan' title='Membuat Blog'>Membuat Blog</a></li>
<li><a href='url / alamat link tujuan' title='pengaturan blog'>Pengaturan</a></li>
<li><a href='url / alamat link tujuan' title='membuat tulisan'>Menulis</a></li>
</ul>
</li>
<li id='nav1_rss'> <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Subscribe to Feed</a></li>
<li id='nav1_cat'><a href='/'>Categories ▼</a>
<ul class='submenu'>
<li><a href='url / alamat link tujuan' title='View all posts filed under Test category'>Test category</a></li>
<li><a href='url / alamat link tujuan' title='category 2'>Test category 2</a></li>
<li><a href='url / alamat link tujuan' title='category 3'>Test category 3</a>
</li>
</ul>
</li>
</ul>
</div>
Simpan kode di atas sesudah kode ini.
<body>
Langkah Kelima
Setelah itu klik “ Save Template “ ( Simpan Template )
Bagaimana cara menggedit link pada navigasinya
Setelah Navbar –nya terinstall di blog kita, sekarang yang perlu ente pelajari dan lakukan adalah menggedit link url pada menu –nya sesuai dengan keingginan link tujuan ente.
coba perhatikan ini.
<li><a href='url /alamat blog ente'>Home</a></li>
Url / alamat blog ente = ganti tulisan itu dengan url blog ente misal; http://www.namablog.blogspot.com/ – dengan demikian maka setiap penggunjung menekan menu “ Home “ maka ia akan kembali pada halaman depan blog ente.
begitu juga
Url / alamat link tujuan = ganti dengan url / alamat link yang ingin ente tuju. misalkan jika ente punya alamat facebook jadi www.myfacebookuuu.com dst.
Sesuaikan juga nama menu navigasinya dengan url / alamat link. misal Membuat Blog di ganti dengan Myfacebook. dst.
Setelah beres menggedit link url –nya seperti biasa Simpan Template
0 comments:
Post a Comment