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.

Komentar

fb mengatakan…
Jadi enggak perlu masuk ke edit html ya.. Masuk ke gadget aja.. Thanks infonya sob
rawins mengatakan…
tanpa image, berarti lebih enteng dong ya..?
cobain ah... thks imponyah bos..
Suparyanto mengatakan…
Masih bingung, terutama tentang kode Gradient linear Sahabat.
Ferdinand mengatakan…
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???
Chugy mengatakan…
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.
Unknown mengatakan…
kayak punya nya brader ini di bawah header tu ya contohnya?...
rizal mengatakan…
css3 memang sangat menakjubkan, membuat tampilan blog lebih keren, seperti blog ini...
Unknown mengatakan…
kuganti pake ini akhirnya menu horni..horizontalku brad.,..hehehhehee
niesa mengatakan…
baru lagi pake gradient.coba ah..siapa tw jd lebih menarik.makash tipsny y.
Unknown mengatakan…
kok di menu ku ada yg di klik ga nemu halamannya ya brad? ada apakah?....pdhl bner tu aku masukin url nya
Athur Alam mengatakan…
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...
Unknown mengatakan…
udah brad..kembali ke menu awal akhirnya....hehehe
ayodaftar mengatakan…
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
Djangan Pakies mengatakan…
Kalo pake Widget ane bisa mempelajarinya Brader, tapi kalo otak-atik HTML seringkali bikin kepala puyeng.
Oke deh Ijin copas ilmunya
Ferdinand mengatakan…
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...
ashtho software easy mengatakan…
Salam kenal sob... keren banget nih sob.....
om rame mengatakan…
ini dia tutoriaL yang saya tunggu2, menu di headernya seperti kayak tomboL (digit). Lebih asyik ngeLiatnya.
saya simpen yah, trims banget Lho.
dee mengatakan…
ikut menyimak dan nambah pengetahuan disini:) Thanks Chuggy!
wew,,, saya gak ada space buat pasang :)
Bendera Setengah Tiang mengatakan…
info yang sangat menarik ....
sementara ini masih menyimak dulu ....
mungkin suatu saat akan berguna ....
bliyanbayem mengatakan…
dulu pernah pasang yang mirip ini mas... terus waktu ganti template lupa nyimpen kode widgetnya... akhirnya hilang! heheheheehh... ^_^

maaf ya kalo OOT!
Ferdinand mengatakan…
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...
Suparyanto mengatakan…
menu tabnya jadi transparant,mirip kayak menu tab di blog chugy ya?keren sahabat..Kunjungan di siang hari..
Wong Sikampuh mengatakan…
wah boleh di coba nih,mantap tutor nya kawand
Saung Web mengatakan…
Wah panjang juga kodenya ya sob.. but thanks for your info
angga7 mengatakan…
wah keren, aku coba coba ganti biar sesuai warna ya ,hehe
thanks sob
Amdhas mengatakan…
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.
Chugy mengatakan…
Blogger Admin :: Oh begitu OM ya...
Thanks Um buat masukannya.Sukses selalu..!!!
akhatam mengatakan…
Wahh cukupp menarikk gan... lam kenal aja ya..
Lutfi A mengatakan…
kalau mau make gituan nunggu posting yang lebih banyak lagii ..... newbie gan :)
Ucapan Ramadhan mengatakan…
bang kenapa di blog saya ga tampil ya?? apa ada yg salah setting nya?

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text