“Salam persahabatan”,
mungkin seperti itulah salam pembuka atau salam penutup dari sang empu tutorial ini. Anda mungkin kenal, bahkan mungkin juga telah menjadi salah satu sahabatnya dalam GFC.
Gambar 1. Screenshot dropdown menu horizontal dengan CSS3.
Trik blogger ini mungkin agak berbeda dengan posting aslinya1 (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).
Mau lihat tampilannya, klik di sini.
1. Prayitno, Hendro. “Blogger admin” blogspot. CSS3 Tutorial: “Membuat dropdown menu menggunakan css3 dan html5 | simple-35 blogger template(part2)”. April 7, 2011
wah mantap lanjutkan :)
BalasHapustk gan infonya.......salam
BalasHapusizin coba...
BalasHapusthanks...
http://totto-apa-adanya.blogspot.com
sep
BalasHapuskeren nehhh
walau agak oon sama CSS
gak papa deh dicobak :)
wah bsgus e, trims infonya.
BalasHapustapi kalo blogspot, di close langsung redirek ke website lain bisa ga ya.?
kalo bisa, tolong share cara ya.
trimakasih....
thanks mas, ijin copy scriptnya and tes dulu nih. plus modif2 juga.makasih and salam kenal
BalasHapusMenarik sekali tutorialnya, silahkan kunjungi saya balik di www.euisryan.co.cc
BalasHapusBoleh juga, tapi nunggu saya beli custom domain dulu deh
BalasHapus@Rusa Belajar terus Rusa, jangan sampai kalah sama kura-kura...wkwkwkwkwk.....
BalasHapusitu letak headernya dimana sih? ga ngerti OWO
BalasHapusKunjungan sore hari
BalasHapusKeep blogging, smuga berguna ilmunya
BalasHapusHappy blogging kawand, smuga menambah persaudaraan
BalasHapusHappy blogging teman teman
BalasHapusSalam kenal ya kawand,,, thxz infonya
BalasHapusJalan jalan sore hari
BalasHapus@Kanji Makurisu:
BalasHapusLetaknya header dalam HTML, biasanya memiliki markup sebagai berikut, gan.
<div id='header-wrapper'>
…
</div>
<div id='content-wrapper'>
Itu kalau agan meletakkannya di blog “Ekspresi Cyber-World™”
Markup HTML header :
BalasHapus<div id='header-wrapper'>
…
</div>
tambah efek jquery lumayan nih..
BalasHapussedang diterapkan tipsnya, makasih sob :D
BalasHapusSalam kenal master.. saya mau biki kyak gini tp ga ngerti caranya ngrubah blogku yg udah lama gini
BalasHapusok bgt. www.34nd.blogspot.com
BalasHapustriknya keren-keren Gan, thanks
BalasHapustipsnya mantap....ngomong-ngomong kalau untuk wordpress bagaimana >?
BalasHapusmas, yang ini kok aku coba gak muncul yaa nav menu nyaa,, ?
BalasHapus@beautyskin House:
BalasHapusPertama mba beuty, keliru meletakkan kode HTML-nya. Untuk peletakkan kode tersebut harus berada di antara <body>…</body>.
Kedua, dari pengamatan saya (Ctrl + U) pada blog mba. Coba letakkan kode HTML tersebut di atas atau di bawah </header> (mungkin kodenya berada di atas <div class='tabs-outer'>).
Ketiga, kode HTML yang saya maksud adalah:
<nav>
<ul id='menu-nav'>
…dst…
</nav>
Makasih kawan....minta ijin copas wat di pasang yah sekalian di share ke yang lain....trus satu lagi kawan, kalo mau ngasih border sama ganti warna pakai kode html bisa ga ya? Review http://infotwelve.blogspot.com
BalasHapusSekali lagi terimakasih
@Priyanto Mariette:
BalasHapusKenapa mesti lewat HTML, gan?
Untuk mengganti warna latar dan border, bisa dikostumisasi melalui CSS, terutama pada tag background dan border.
Kemudian tinggal dipilih ingin diletakkan pada properti apa, seperti: nav, menu-nav atau ul, li.
Saya baru nyobain nih, kok kalo gadgetnya saya letakkan di atas sub menunya ndak mau keluan, kalau di bawah bisa keluar. mohon dibantu ya.. trimakasih
BalasHapus@prima rahmadhani: Maaf, gan. Saya kurang mengeti dengan maksud agan. Mungkin ada baiknya jika menyertakan alamat blog agan, sebab profil blognya belum bisa diakses oleh publik. :D
BalasHapusdi utak atik akhirnya bisa juga, trimakasih ya.. ntar kalo udah jadi saya share alamat blognya
BalasHapusgan, tolongin saya dong, susah bgt dri kmaren buat navigasi utk blog saya. alhamdulillah nyoba tutorial dari blog agan berhasil N saya puas bgt gan, saya ucapkan terima kasih bnyak ya gan. tapi da 1 msalah lg gan: search nya gk mau kerja,gk bsa d klik/dmasukkin kata2, jd gmna dong gan. saya mohon pencerahannya y. alamat blog saya: spotfer.blogspot.com
BalasHapuso y gan, boleh tukaran link gk? tutorial blog agan bgus2 bgt, salute saya utk agan, seep dah !!
BalasHapusOh gan, maaf gan, dah tau saya masalahnya dmna, dah bisa gan, seneng bgt sya gan, mksih bnyak y, thanks, syukron, namaste, gracias, sukses slalu utk agan y, amin
BalasHapusgan, bngung lg ane ni, mklumlh msh newbie, warna font nya gk mau berubah, klo background dah bsa saya bngung koq gk da utk color nya d sni: nav {
BalasHapuswidth:100%;
background:#585858;
font:14px Sans-Serif;
mohon pencerahannya y gan
he he he . . . dah bsa lg gan, dah tw posisi warna nya, mklum gan, ^_^ htung2 skalian ngeramein
BalasHapusHi, The above articles is very impressive, and I really enjoyed reading your blog and points that you expressed.
BalasHapus