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/AVvXsEi4QTx25aszbBOfbMu5vw0ITKIHNt0dw5YW05UD8D0Gm-ehLKxmgAq1NouHQsxNdiC3DTzucCxsXI2JA9vpymXh8MVxbpb89XZabFo-Nf1fsgz9AFCpnk6pJHK4Pfc3RkZMGBmgnQpB6E5j/') 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
25 komentar:
Hallo...Mas..
Oy,..Td saya udah Pasang tab menu di blogspot saya...
trs saya mau nanya nih...!!! Gmn cara Nge-Gunakan / mengedit tab Menunya ...???? trs,..Gmn cara ganti nama pada Tab Menu...???
Tolong ya mas Kasih tau'in....^_^
soalna,..Saya Masih baru dlm menggunakan blogspot...!!!
Toloong Balas Ke Email saya: DC.Xv3ze@gmail.com
anda telah di tag di http://teranung.blogspot.com/
saya dah pake nih ( tapi dari langkah ke 4 )ga dari (1,2,3)
yang saya mo tanyain bisa di taruh di antara header - main post ga yah...?
kalo yang sekarang kan adanya di atas header..
@dvallen
kalau tab menunya di taruh di bawah header letakan saja, kode menu yg kelima di atas kode ini :
<div class='clearfix' id='content-wrapper'>
Mas maaf ganggu dan sebelumnya thx atas tutorialnya. Saya coba merubah header, tapi dampaknya tab horisontal saya jadi pindah ke atas, padahal sebelum ganti header tab nya ada di bawah. Gimana caranya biar kembali ke bawah? Oh ya blog yg saya buat thifanpokhan.blogspot.com. Thx ya
kalau tag Css ngga di rubah..
masuk saja ke tab Elemen Html kemudian.. drag elemen yang bertulisan HTML/Javascript jadi di bawah tulisan HEADER..
Thifan Po Khan .. Tanjung Priok Bukan Bang ??
ada kesalahan di bagians "font: $bodyfont;"
maaf bukannya sok tahu, aku juga newbie,, masih sekolah, tapi aku adalah konsumen script anda, he2,, alias lgi nyoba juga, n kbetulan tau bagian mana yg salah,,
oke...
keren ko bang, nih aku pakai..
eh sorry,, aku baru nyambung kenapa anda buat seperti itu,,, he..
terima kasih
tanya... bos. di tab menu itukan ada judul home, prifacy policy, contac us dan search... nah, kendala aku begini : bagaimana cara menambah judul menu dengan menggunakan kode yang telah bos terangkan di atas. misalnya saya ingin menambah music, puisi, software, dll. thanks atas bantuannya. ditunggu jawaban secepatnya. sekali lagi terima kasih....
Ok... bos... menambah judul menu saya sudah berhasil.... sekarang saya mo nanya lagi... gimana agar agar tab menu kita berada di tengah / center dari blog kita...? hehehe sory banyak tanya... masih newbie...
<ul class="menu1">
simpanya di sini
</ul>
contoh kode-nya sperti ini:
<li><a href="#nogo"><b>Musik</b></a></li>
masukan text-align:center;
pd kode di bawah
.menu1 { text-align:center; dts }
mas punyaku jadi acak2kan ya
napa?
OK BANGET
nanti halamannya gimana?
@ Sigidh-Boedhy
untuk blogspot halaman-nya di taut kan secara manual..
Sukses abiz Boz stelah @ praktekin,liat aj di www.audiavidianto.blogspot.com
makasih banget tutornya.... saya dah coba
sukses.......
@ yoe
sip sy dah liihat blog na
Muter-muter..pusing..gak ngerti...
Laptop Murah
@ Laptop Murah
hehehe.. itu tulisan rada jadul jg.. mungkin akan sy update biar.. gmpang di cerna
Masih Bingung bos mohon dipermudah :)
@ Bronis Mancipta
ini tulisan lama boss.. mungkin perlu saya update. thank atas masukanya
Thanks neh Mas, udah separuh berhasil neh....
makasih banget atas infonya boss....
Post a Comment
" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah
Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"
Makacih Atas Komentar-Nya