Advertise

Menu Navigasi Gradient Linear Dengan CSS3 "Slick Navigasi Black Dop"

Postingan kali ini saya coba menulis seputar CSS3 lagi, sebagai pelengkap dari CSS3 yang lalu yaitu Hover background transitions , Hover Tab menu dan juga Postingan yang lalu saya pernah membahas membuat menu navigasi CSS3 dengan menggunakan Free CSS3 Menu Maker.

dan kali ini saya coba membuat menu navigasi horizontal dengan menggunakan background gradient linear full CSS3 tanpa image dengan warna Black Dop.

Seperti apa bentuknya menu navigasi dengan CSS3 ini lihat screen shoot di bawah ini.

Menu Navigasi Gradient Linear Dengan CSS3- Slick Navigasi Black Dop

Menu Navigasi diatas menggunakan background Gradient linear CSS3 dengan kode warna #444444 pada bagian atas dan #666666 untuk bagian bawah. dan juga ronded corner pada bagian ujung kiri dan kanan, semuanya menggunakan CSS3.

Untuk contoh kode Gradient linear seperti ini :
background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
background: -moz-linear-gradient(top, #444444, #666666);

Model navigasi seperti ini kalau dalam bahasa sundanya sih Slick navigasi kalau ga salah tentunya blogger lebih tahu.

Jika blogger ingin memasangnya silahkan lihat source kodenya dan caranya di bawah ini untuk lebih mudah saya memansangnya langsung pada gadget HTML/Javascript :

Pertama masuk Rancangan > Element halaman > Tambah Gadget > Pilih HTML/JavaScript.
masukan kode di bawah ini :

<style>
#main-navigation {
width: 100%;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666));
background: -moz-linear-gradient(top, #444444, #666666);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');
border: 1px solid #444;
list-style: none;
padding: 8px;
margin: 4px;
float: left;
}

#main-navigation li {
float: left;
border-right: 1px solid #777;
}

#main-navigation li a {
font: 14px Georgia, "Times New Roman", Times, serif;
letter-spacing: 1px;
padding: 12px 20px;
border-right: 1px solid #333;
display: block;
color: #fff;
}

#main-navigation li a:hover {
background:#000000;
text-decoration:underline;
}

</style>

<ul id="main-navigation">
<li><a href="http://chugygogog.blogspot.com/">Home</a></li>
<li><a href="http://chugygogog.blogspot.com /">Themes</a></li>
<li><a href="http://chugygogog.blogspot.com/">Demos</a></li>
<li><a href="http://chugygogog.blogspot.com /">Blog</a></li>
</ul>

Kalau blogger tertarik untuk memasangnya silahkan dicoba.

NB :: Seperti biasa ganti url diatas yaitu teks tebal dengan url blogger.
Kode yang berwarna merah " filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#666666');. merupakan filter untuk bisa menampilkan warna gradient linear ini pada internet explorer.

31 komentar:

  1. Jadi enggak perlu masuk ke edit html ya.. Masuk ke gadget aja.. Thanks infonya sob

    BalasHapus
  2. tanpa image, berarti lebih enteng dong ya..?
    cobain ah... thks imponyah bos..

    BalasHapus
  3. Masih bingung, terutama tentang kode Gradient linear Sahabat.

    BalasHapus
  4. Met pagi Sob.. aku datang hhe... wah si bozz lagi bikin Top Menu hhe.... Siip keren SOb... mudah dicerna tapi klo boleh tanya kenapa selalu ditempatin di Widget Sob???

    BalasHapus
  5. Ferdinand :: Si Brader bisa sajah...ia ni kalau di Widget mungkin lebih mudah kalau mau edit2...jadi ga perlu repot buka edit html.

    Suparyanto :: Masih bingung ya sob ...!!! ntar di perjelas masalah Gradient linear seperti ini.

    Rawins :: Ia uM tanpa image , mungkin lebih cepat dalam loadnya.

    FB :: Betul sekali ga perlu repot2 buka edit HTML.

    BalasHapus
  6. kayak punya nya brader ini di bawah header tu ya contohnya?...

    BalasHapus
  7. css3 memang sangat menakjubkan, membuat tampilan blog lebih keren, seperti blog ini...

    BalasHapus
  8. kuganti pake ini akhirnya menu horni..horizontalku brad.,..hehehhehee

    BalasHapus
  9. baru lagi pake gradient.coba ah..siapa tw jd lebih menarik.makash tipsny y.

    BalasHapus
  10. kok di menu ku ada yg di klik ga nemu halamannya ya brad? ada apakah?....pdhl bner tu aku masukin url nya

    BalasHapus
  11. Jika saya harus jujur, saya akan mengatakan bahwa Anda lah salah satu blogger konsisten yang tak pernah berhenti bereksperimen dan berinovasi... selalu saja ada update info salah satunya tentang pengaplikasian CSS seperti diatas...

    hanya, saya baru bisa memanfaat info diatas hanya sebatas untuk menambah pengetahuan saja, belum untuk coba diaplikasikan dalam blog saya saat ini...

    BalasHapus
  12. udah brad..kembali ke menu awal akhirnya....hehehe

    BalasHapus
  13. Saya baru tahu ada kode filter gradient linear. Sudah dicoba belum di browser yg berbeda seperti opera, safari dsb apa tampilan gradien linearnya tetap muncul.

    Thanks sob infonya

    BalasHapus
  14. Kalo pake Widget ane bisa mempelajarinya Brader, tapi kalo otak-atik HTML seringkali bikin kepala puyeng.
    Oke deh Ijin copas ilmunya

    BalasHapus
  15. Sore Brader.. mumpung lagi Blogging bentar aku mampir dlu kesini hhe... Owh gtu toh hhe... kayanya emank bener juga sih Sob... gak perlu terlalu ribet nyari kodenya satu2 ya haha... mantabz.. kayanya lain kali aku bisa ikutan tuh naronya di widget aja hhe... Semangat N happy blogging Sob...

    BalasHapus
  16. Salam kenal sob... keren banget nih sob.....

    BalasHapus
  17. ini dia tutoriaL yang saya tunggu2, menu di headernya seperti kayak tomboL (digit). Lebih asyik ngeLiatnya.
    saya simpen yah, trims banget Lho.

    BalasHapus
  18. ikut menyimak dan nambah pengetahuan disini:) Thanks Chuggy!

    BalasHapus
  19. info yang sangat menarik ....
    sementara ini masih menyimak dulu ....
    mungkin suatu saat akan berguna ....

    BalasHapus
  20. dulu pernah pasang yang mirip ini mas... terus waktu ganti template lupa nyimpen kode widgetnya... akhirnya hilang! heheheheehh... ^_^

    maaf ya kalo OOT!

    BalasHapus
  21. berhubung masih ngomongin CSS3 aku jadi pengen bikin efek bayangan untuk postingan dan widget kaya disini nie hhe.... keren juga sob klo diliat2 hhe... tapi gak di DJ Site soalnya udah item hhe..... Semangat Sob.. N happy blogging.... Wallpaper gak ada yg baru nie? Hunter x hunter Sob klo ada hhe...

    BalasHapus
  22. menu tabnya jadi transparant,mirip kayak menu tab di blog chugy ya?keren sahabat..Kunjungan di siang hari..

    BalasHapus
  23. wah boleh di coba nih,mantap tutor nya kawand

    BalasHapus
  24. Wah panjang juga kodenya ya sob.. but thanks for your info

    BalasHapus
  25. wah keren, aku coba coba ganti biar sesuai warna ya ,hehe
    thanks sob

    BalasHapus
  26. Gradient linear bisa di buat sebagai background di atas implementasinya sebenarnya bukan filter, karena itu ga fungsi sebenarnya. Coba lihat di postingan om tentang acordion, om hilangin filternya tapi masih terlihat di webkit.
    dan lihat di artikel:

    http://hendro-prayitno.blogspot.com/2010/09/css3-transform-skew-membuat-gambar.html

    di artikel tersebut om pakai untuk background yang apabila di gulung akan berubah, tapi om ga pakai filter. Memang terlihat ambigu tapi itu kenyataannya, karena gradient filter ini adalah bentuk pengembangan ketika CSS3 baru muncul. Setelah sintaks di tetapkan w3c filter ini ga tau keberadaannya.

    BalasHapus
  27. Blogger Admin :: Oh begitu OM ya...
    Thanks Um buat masukannya.Sukses selalu..!!!

    BalasHapus
  28. Wahh cukupp menarikk gan... lam kenal aja ya..

    BalasHapus
  29. kalau mau make gituan nunggu posting yang lebih banyak lagii ..... newbie gan :)

    BalasHapus
  30. bang kenapa di blog saya ga tampil ya?? apa ada yg salah setting nya?

    BalasHapus