Membuat Navigasi Stylish Di Blog

Diposkan oleh Hery Prasetyo Saturday, April 24, 2010
بسم الله الرحمن الرحيم

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 Di 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 :

Membuat Navigasi Stylish Di Blog

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> :

<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;
}

- 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>

- Simpan template.

Untuk tutorial aslinya silahkan kunjungi A Stylish Navigation Menu With jQuery.

Selamat mencoba dan happy blogging.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

33 Responses to Membuat Navigasi Stylish Di Blog

  1. menu navigasi memang sangat dibutuhkan bagi pengunjung, makasih sahabat atas tutorialnya. Salam

     
  2. ternyata yang pertama, sungguh suatu surprise !

     
  3. aryadevi Says:
  4. thanks mas, kami simpan ^__^

     
  5. Kolom ponsel Says:
  6. Sangat menarik ni, kebetulan belum pernah nyoba, terima kasih ya...

     
  7. Wah,, nambah keunikan blogger tersendiri yah .. ;)
    Nice info .. Saya udh follow .. Mw tukeran link ?? Visit me back and keep share with me .. ^^

     
  8. riz Says:
  9. waahhhh...
    keren sobat....
    memang kita perlu menu navigasi trsbt agar memudahkan pengunjung kita juga....

     
  10. the others Says:
  11. Mampir lagi utk cari ilmu baru.... ^_^

     
  12. thanks infonya...

    salam,
    tfd

     
  13. rasiqzone Says:
  14. keren triknya sobat..
    makin kreatif nich master..
    happy blogging..

     
  15. Beben Says:
  16. hihihihi...kek mata kedip²...hohohoho
    good good

     
  17. Ega-Priatma Says:
  18. Wah, info menarik lagi nih.... semoga sukses terus ya kang

     
  19. Rock Says:
  20. Coba dulu ahhh...
    Makasih untuk tutorialnya kawand...

     
  21. harto Says:
  22. trims atas ilmunya, sangat bermanfaat sekali, sukses selalu n tetap semangat

     
  23. Keren mas HAPIA! Saya udah pake diblog saya yg satulagi :) Makasih yah

     
  24. bagus kawan

     
  25. bener-bener stylish kawan.....
    mantabh

     
  26. ahmad Says:
  27. keren kang, ane coba ah!

     
  28. Rizky2009 Says:
  29. keren modelnya dan baru lihat d sini, karena kenyakan yg aku lihat cuma gt2 ajam ok deh aq save dulu

     
  30. Syam Oby Says:
  31. 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

     
  32. andritea Says:
  33. wah mantabs nih tutor nya...kebetulan lagi pengen belajar..

     
  34. akhatam Says:
  35. Wah hebat mas Hapia.. Lihat demonya dulu yaw...

     
  36. manatb
    hebat
    trims tuk berbagi pengetahuannya
    salam hangat darui blue

     
  37. nuances pen Says:
  38. Sudah saya lihat demonya, bagus sekali akan kucoba disalahsatu blogku!

     
  39. Bunglon Blog Says:
  40. asalamualikum...
    wehe kren sob navbar nya in out
    smooth lagi ya..kren2

    Sukses Slalu!

     
  41. thanks bro. jadi muncul daftar isi berdasarkan kategori?

     
  42. riz Says:
  43. ternyata hasilnya memuaskan sobat...
    sudah pengunjung diberi kemudahan flexibel terhadap templte yg ada...
    terimaksih banyak sobat

     
  44. denie Says:
  45. met malem sooob gimana kabarnya niiih?

     
  46. yayah Says:
  47. keren juga tuh sob

     
  48. mau tanya bro, kalo kebanyakan JS bukannya malah pengaruh di load blog. ?

     
  49. HAPIA Mesir Says:
  50. agusta@ kalo kebanyakan script ngaruh di loadingnya sob.. jadi jangan banyak2 make script...bijak aja dalam milih2 penggunaan script...

     
  51. menu style banget..menarik untuk dipasang nich.

     
  52. Surya's Blog Says:
  53. keren sob...i like this..thanks abis sob....

     
  54. Surya's Blog Says:
  55. 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

     

Post a Comment