Skip to main content

Mempercantik Dropdown Menu (Navigasi Horizontal) Blog dengan CSS3

Mempercantik Dropdown Menu. Baru saja saya mendapatkan email dari temen tentang "Dropdown Menu (Navigasi Horizontal) dengan CSS3" Rasanya tak ada jeleknya saya menyebarkan tutorial bermanfaat ini bagi rekan-rekan blogger yang membutuhkannya.

Mari kita saling menyebarkan ilmu yang bermanfaat bagi sesama. Silahkan simak dengan seksama, karena pemasangan kode-kode ini kurang satu komapun pun akan berpengaruh terhadap tampilan yang kita harapkan nantinya.

Selengkapnya sebagai berikut :

Salam persahabatan
Mungkin seperti itulah salam pembuka atau salam penutup dari sang empu - nya tutorial ini. Anda mungkin kenal, bahkan mungkin juga telah menjadi salah satu sahabatnya dalam GFC. Trik blogger ini mungkin agak berbeda dengan posting aslinya (sama caranya), karena menu horizontal di sini tidak menggunakan image & ditambahkan form pencarian   mempercantik search button dengan CSS3 oleh Rudy   di kanannya.

Letakkan kode CSS3 berikut di atas ]></b:skin>.

/*-- NAV --*/ nav { width:100%; background:#585858; font:14px Sans-Serif; letter-spacing:0.03em; position:relatif; overflow:hidden; border-radius: 2em; -webkit-border-radius: 2em; -moz-border-radius: 2em; -webkit-box-shadow: 0 2px 4px rgba(0,0,0, .4); -moz-box-shadow: 0 2px 4px rgba(0,0,0, .4); } /* main level */ #menu-nav{ width:500px; float:left; margin:0; padding: 7px 6px 0; position:absolute; } #menu-nav li { line-height:1.5em; float:left; list-style:none; margin:0 auto; padding:0 5px 8px; position:relatif; } #menu-nav a, #menu-nav a:visited { color:#e7e5e5; text-decoration:none; padding: 3px 16px; border:solid 1px transparent; display:block; margin: 0; -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0,0,0, .3); } #nav a:hover { background: #000; color: #fff; } /* main level link hover */ #menu-nav a.current, #menu-nav li:hover > a { background:#E6E6E6; color:#444444; text-decoration:none; border:outset 1px #f2f2f2; -webkit-box-shadow: 0 1px 1px #585858; -moz-box-shadow: 0 1px 1px #585858; box-shadow: 0 1px 1px #585858; text-shadow: 0 1px 0 rgba(255,255,255, 1); } /* sub levels link hover */ #menu-nav ul li:hover a, #menu-nav li:hover li a { color:#666666; background:none; border:none; -webkit-box-shadow: none; -moz-box-shadow: none; } #menu-nav ul a:hover { background: #0078ff !important; color: #fafafa !important; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 0 1px 0 #dddddd; } /* dropdown */ #menu-nav li:hover > ul { display: block; z-index:1; } /* level 2 list */ #menu-nav ul { display: none; margin: 0; padding: 0; width: 180px; position: absolute; top: 40px; left:auto; background:#f2f2f2; border: solid 1px #b4b4b4; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); box-shadow: 0 1px 3px rgba(0,0,0, .3); } #menu-nav ul li { float: none; margin: 0; padding: 0; } #menu-nav ul a { text-shadow: 0 1px 0 #fafafa; } /* level 3+ list */ #menu-nav ul ul { left: 90px; top: auto; position: absolute; } /* rounded corners of first and last link */ #menu-nav ul li:first-child > a { -webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #menu-nav ul li:last-child > a { -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px; -webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; } /* clearfix */ #menu-nav:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #menu-nav { display: inline-block; } html[xmlns] #menu-nav { display: block; } * html #menu-nav { height: 1%; } /*-- SEARCH --*/ #search { width: 240px; float: right; margin: 0; padding: 3px 8px; } .searchform { display: inline-block; zoom: 1; /* ie7 hack for display:inline-block */ *display: inline; border: solid 1px #5e6366; padding: 3px 5px; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); background: #71787b; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed)); background: -moz-linear-gradient(top, #fff, #ededed); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */ } .searchform input { font: normal 12px/100% Arial, Helvetica, sans-serif; } .searchform .searchfield { background: #d5d5d5; padding: 6px 6px 6px 8px; width: 180px; border: solid 1px #bcbbbb; outline: none; -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); } .searchform .searchbutton { color: #fff; border: solid 1px #494949; font-size: 11px; height: 27px; width: 27px; text-shadow: 0 1px 1px rgba(0,0,0,.6); -webkit-border-radius: 2em; -moz-border-radius: 2em; border-radius: 2em; background: #555; background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); background: -moz-linear-gradient(top, #9e9e9e, #454545); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ }

Sesuaikan kode yang berwarna merah (width) dengan lebar blog Anda. Kemudian silakan mengganti kode - kode yang berhubungan dengan pewarnaan, baik menggunakan hex triplet (ex: #ff0000), color name (ex: red), RGB {ex: rgb(255, 0, 0)}, atau RGBA {ex: rgba(255, 0, 0, 0.5)}.

Kemudian letakkan kode HTML seperti yang tampak di bawah ini, di sekitar elemen header blog Anda (bisa di atas, di dalam, maupun di bawah elemen header tersebut).

<nav> <ul id='menu-nav'> <b:if cond='data:blog.url != "#"'> <li><a href='#' title='Beranda'>Home</a></li> <b:else/> <li><a class='current' href='#' title='Anda sekarang berada di halaman Beranda'>Home</a></li> </b:if> <b:if cond='data:blog.url != "#"'> <li><a href='#' title='Tentang Penulis'>About</a></li> <b:else/> <li><a class='current' href='#' title='Anda sekarang berada di halaman Tentang Penulis'>About</a></li> </b:if> <li><a href='#'>Untuk Percobaan</a> <ul> <li><a href='#'>kosong</a></li> <li><a href='#'>kosong</a> <ul> <li><a href='#'>kosong</a> <ul> <li><a href='#'>kosong</a></li> <li><a href='#'>kosong</a></li> </ul> </li> <li><a href='#'>kosong</a></li> <li><a href='#'>kosong</a></li> <li><a href='#'>kosong</a> <ul> <li><a href='#'>kosong</a></li> <li><a href='#'>kosong</a></li> <li><a href='#'>kosong</a></li> <li><a href='#'>kosong</a></li> </ul> </li> </ul> </li> <li><a href='#'>kosong</a></li> <li><a href='#'>kosong</a></li> </ul> </li> <b:if cond='data:blog.url != "#"'> <li><a href='#' title='Daftar Isi'>Sitemap</a></li> <b:else/> <li><a class='current' href='#' title='Anda sekarang berada di halaman Daftar Isi'>Sitemap</a></li> </b:if> </ul> <div id='search'> <form action='/search' class='searchform' method='get'> <input class='searchfield' id='q' name='q' type='text' value=''/> <input class='searchbutton' type='submit' value='Go'/> </form> </div> </nav>

Ganti kode yang diberi tanda ‘kres’ (#) dengan alamat tautan yang Anda tuju (ex: http://optimasi-blog.blogspot.com/2005/05/about-optimasi-blog.html).

Demo Optimasi Blog (Sumber Tulisan) Selamat mencoba, Semoga berguna

Popular posts from this blog

75 istilah ekonomi lengkap

Setelah sebelumnya admin telah memberikan informasi tentang istilah bidang kesenian dan kebudayaan, selanjutnya admin akan menuliskan info tentang istilah ekonomi lengkap. Dalam artikel tentang ekonomi atau berita ekonomi indonesia sering kita dengar istilah-istilah yang kurang kita mengerti, atau sebenarnya kita mengetahui maksudnya namun tak mampu menjelaskan atau menjabarkannya secara rinci kepada orang lain.

Untuk itu, berikut kami tuliskan daftar istilah dalam bidang ekonomi dalam 75 istilah ekonomi : Aset : kekayaan.Akumulasi : proses penambahan modal (uang tunai, mesin-mesin, dsb.Bankir : orang yang memperdagangkan uang ; cukong.Bank : kantor penyimpanan, perkreditan keuangan.Banker : direktur bank.Barter : perdagangan dengan saling menukar barang.Bonanza : sumber rejeki (keuntungan, kebahagiaan).Bonus : honor tambahan di luar gaji (uang ekstra).Brankas : lemari tempat menyimpan uang, barang-barang berharga.Bursa : tempat memperjualbelikan saham.Butik : toko yang menjual barang…

67 Istilah Pertanian Lengkap

Dalam bidang pertanian dikenal banyak istilah pertanian yang biasa diterapkan dalam kalimat yang tentunya berhubungan dengan dunia pertanian. Namun, meski kita sering mendengar dan tahu maksud istilah tersebut, saat kita ditanya dan disuruh mendeskripsikan ternyata kesulitan. Untuk itu, kali ini Enjangcom akan memberikan informasi tentang istilah-istilah dalam bidang pertanian dan penjelasannya. Istilah-istilah tersebut kami rangkum dalam 67 istilah pertanian, selengkapnya sebagai berikut : Agrobisnis : melakukan usaha perdagangan dalam bidang hasil-hasil pertanian.Agraria : urusan pertanian atau tanah pertanian.Airdas : pengairan dasar.Amubu : alat memupuk dan menabur.Amuru : alat memupuk dan menggaru.Apiani : peternak lebah.Agrisilvikultur : pertanian rakyat yang dilakukan di areal kehutanan.Agroindustri : industri di bidang pertanian.Ammonifikasi : proses peruraian bahan organik oleh mikro-organisme menjadi amoniak.Benih : bibit tanaman yang akan ditebar, diternak, dan lain-lain.Da…

7 perbedaan koperasi dengan badan usaha lain

7 perbedaan koperasi dengan badan usaha lain. Selain koperasi, ada beberapa badan usaha lain yang bergerak dalam bidang ekonomi, antara lain toko, firma, persekutuan komanditer (CV), dan perseroan Terbatas (PT). Usaha yang dilakukan koperasi berbeda dengan yang dilakukan badan usaha lain tersebut.
Perbedaan koperasi dengan badan usaha lain ada tujuh, yang tentu saja jika dibandingkan lebih menguntungkan koperasi, perbedaan yaitu sebagai berikut :
NoKoperasiBadan Usaha Lain1Mengutamakan kesejahteraan anggotaMengutamakan kepentingan perusahaan2Keanggotaan bersifat sukarelaKeanggotaan terbatas3Modal dari simpanan anggotaModal dari penjualan saham, perorangan, atau kelompok4Berbadan hukumAda yang tidak berbadan hokum5Pengurus dipilih anggotaPengurus ditentukan oleh pemegang saham6Terdapat pembagian SHU menurut jasa anggotaTidak ada pembagian SHU7Keuangan bersifat terbukaKeuangan bersifat tertutup
Dari, ketujuh perbedaan tersebut, mungkin anda terdorong untuk mendirikan usaha koperasi? Jika…