Labels:
Tutorial Blog
Bikin Sendiri Menu Navigasi Untuk Blogspot
Sebenarnya cara paling sederhana membuat menu navigasi dengan memanfaatkan kode HTML sederhana pada widget tanpa perlu mengedit kode template pada sudah pernah saya posting disini.
Tetapi berhubung hasilnya amat sangat sederhana sekali tanpa embel-embel background warna dan border, So buat yang tertarik silahkan saja ikuti cara berikut:
Tahap pertama menambah kode CSS ditemplate blog, caranya:
1.Login ke account blog anda
2.di control panel pilih blog yang akan di buat menu navigasinya kemudian pilih edit template, sebelum mengubah kode template anda sebaiknya backup dulu dengan mendownload template Anda.
3.Jangan lupa memberi tanda centang pada expand widget.
4.Kemudian cari kode berikut </b:skin>
5.Setelah menemukan kode diatas copypaste-kan kode dibawah ini tepat diatas kode </b:skin> atau letakkan diantara tags <head> </head>
.menubar{
width: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
.menubar ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
background: #FF6C00
border-top-width: 1;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #808080
border-right-color: #808080;
border-bottom-color: #808080;
border-left-color: #808080
}
.menubar ul li{
display: inline;
}
.menubar ul li a{
float: left;
color: #FFFFFF;
padding: 5px 11px;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #C0C0C0
}
.menubar ul li a:visited{
color: #FFFFFF;
}
.menubar ul li a:hover, .menunav ul li .selected{
color: #FFFFFF !important;
padding-top: 5px;
padding-bottom: 5px;
background: #454545;
}
Tahap kedua, Menambah Widget Untuk Menu Navigasi.
1. masuk di Tata Letak kemudian pilih EDIT HTML jangan lupa expand widget dengan memberi tanda centang, dan letakkan kode dibawah ini diantara tags <body> </body>
2.Dan masukkan kode berikut tepat dibawah kode html header:
<div class="menubar">
<ul>
<li><a href="/">Home</a></li>
<li><a href="URL-1">Link-1</a></li>
<li><a href="URL-2">Link-2</a></li>
<li><a href="URL-3">Link-3</a></li>
</ul>
</div>
URL-1 sampai URL-3 diperolehdari url berdasarkan URLlabel seperti contoh dibawah ini:
/search/label/NamaLabel
kode warna merah ganti dengan nama label/kategori/tags sesuai blog anda.
3. Jangan lupa di save perubahan tersebut, untuk melihat hasilnya klik pratinjau.
4. Selamat..!! sekarang blog anda sudah punya menu navigasi.
Semoga bermanfaat dan selamat berblogging ria.
0 comments:
Leave a Reply