Membuat Navigasi di blog adalah sebuah kebutuhan bagi setiap blog yang ingin memudahkan pengunjung untuk mengakses isi content yang ada pada blog tersebut. pada tutorial sebelumnya, HAPIA Mesir telah memberikan tutorial tentang Membuat Menu Navigasi Dengan JQuery, walaupun terlihat bagus akan tetapi banyak yang yang menganggapnya akan memberatkan loading blog.
Membuat navigasi stylish mungkin dapat menjadi solusi bagi yang ingin memasang menu navigasi akan tetapi takut akan menambah berat loading blog. walaupun menu navigasi ini juga menggunakan JQuery, akan tetapi tidak akan menambah lama loading blog, karena menu ingin termasuk paling ringan.
Untuk Melihat contoh navigasi Stylish silahkan klik tombol demo dibawah ini :
Cara Membuat Navigasi Stylish di Blog adalah sebagai berikut :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Centang "Expand Template Widget".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- Centang "Expand Template Widget".
- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.3.2, jika belum silahkan copy JQuery versi 1.3.2 dibawah ini dan letakkan dibawah <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
- Kemudian copy paste script berikut dibawah script diatas :
<script src='http://hapiajavascript.googlecode.com/files/NavStylish.js' type='text/javascript'/>
- Selanjutnya untuk bagian CSS, silahkan cari code ]]></b:skin> dan letakkan code CSS berikut diatasnya :
ul{ /* the unordered list */
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px;
margin-left:-40px;
}
ul li{
border:1px solid #444;
display:inline-block; /* changing the display property */
float:left; /* floating the list items to the left */
height:25px;
list-style-type:none; /* disabling the list icon */
overflow:hidden; /* hiding the overflowing content */
}
ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none; /* removing the underline text-decoration */
}
/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
outline:none;
padding:5px 10px;
display:block;
}
/* styles that are assigned individually */
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:#eee;
color:#333;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:#fff;
background: #333;
}
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px;
margin-left:-40px;
}
ul li{
border:1px solid #444;
display:inline-block; /* changing the display property */
float:left; /* floating the list items to the left */
height:25px;
list-style-type:none; /* disabling the list icon */
overflow:hidden; /* hiding the overflowing content */
}
ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none; /* removing the underline text-decoration */
}
/* styling the links */
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {/* these properties are shared between the classes */
outline:none;
padding:5px 10px;
display:block;
}
/* styles that are assigned individually */
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:#eee;
color:#333;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:#fff;
background: #333;
}
- Kemudian cari code <div id='content-wrapper'>, dan copy paste code berikut di atasnya :
<ul id="navigationMenu">
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
<li><a href="#" class="normalMenu">Home</a></li>
<li><a href="#" class="normalMenu">Services</a></li>
<li><a href="#" class="selectedMenu">Our clients</a></li>
<li><a href="#" class="normalMenu">The team</a></li>
<li><a href="#" class="normalMenu">About us</a></li>
<li><a href="#" class="normalMenu">Contact us</a></li>
</ul>
- Simpan template.
Untuk tutorial aslinya silahkan kunjungi A Stylish Navigation Menu With jQuery.
Selamat mencoba dan happy blogging.
Untuk tutorial aslinya silahkan kunjungi A Stylish Navigation Menu With jQuery.
Selamat mencoba dan happy blogging.
menu navigasi memang sangat dibutuhkan bagi pengunjung, makasih sahabat atas tutorialnya. Salam
ternyata yang pertama, sungguh suatu surprise !
thanks mas, kami simpan ^__^
Sangat menarik ni, kebetulan belum pernah nyoba, terima kasih ya...
Wah,, nambah keunikan blogger tersendiri yah .. ;)
Nice info .. Saya udh follow .. Mw tukeran link ?? Visit me back and keep share with me .. ^^
waahhhh...
keren sobat....
memang kita perlu menu navigasi trsbt agar memudahkan pengunjung kita juga....
Mampir lagi utk cari ilmu baru.... ^_^
thanks infonya...
salam,
tfd
keren triknya sobat..
makin kreatif nich master..
happy blogging..
hihihihi...kek mata kedip²...hohohoho
good good
Wah, info menarik lagi nih.... semoga sukses terus ya kang
Coba dulu ahhh...
Makasih untuk tutorialnya kawand...
trims atas ilmunya, sangat bermanfaat sekali, sukses selalu n tetap semangat
Keren mas HAPIA! Saya udah pake diblog saya yg satulagi :) Makasih yah
bagus kawan
bener-bener stylish kawan.....
mantabh
keren kang, ane coba ah!
keren modelnya dan baru lihat d sini, karena kenyakan yg aku lihat cuma gt2 ajam ok deh aq save dulu
kalo buat menu horizontalnya gimana kak??
oby dah ubek ubek gugel tp gak adayg beres...
pinginnnya sih menu horizontalnya
oby taruh di atas iklan heading di blog oby..
kaka tahu gimana caranya ???
salam
dari bloger abnormal
wah mantabs nih tutor nya...kebetulan lagi pengen belajar..
Wah hebat mas Hapia.. Lihat demonya dulu yaw...
manatb
hebat
trims tuk berbagi pengetahuannya
salam hangat darui blue
Sudah saya lihat demonya, bagus sekali akan kucoba disalahsatu blogku!
asalamualikum...
wehe kren sob navbar nya in out
smooth lagi ya..kren2
Sukses Slalu!
thanks bro. jadi muncul daftar isi berdasarkan kategori?
ternyata hasilnya memuaskan sobat...
sudah pengunjung diberi kemudahan flexibel terhadap templte yg ada...
terimaksih banyak sobat
met malem sooob gimana kabarnya niiih?
keren juga tuh sob
mau tanya bro, kalo kebanyakan JS bukannya malah pengaruh di load blog. ?
agusta@ kalo kebanyakan script ngaruh di loadingnya sob.. jadi jangan banyak2 make script...bijak aja dalam milih2 penggunaan script...
menu style banget..menarik untuk dipasang nich.
keren sob...i like this..thanks abis sob....
omm..ada tips jitu mempercepat loading blog..atau gimana caranya bisa mengetahui kode css mana yang tidak di pakai..supaya loading blognya gak lambat...di tunggu saran atau postingannya bosss