Jalan jalan ke Agan Hario Pamungkas eh nemu materi unik yaitu Slide Out Navigation. Contoh menu KoerniawanBlog : Home - About - SiteMap - Login. Lumayan menarik membuat tampilan lebih exentrix. Dalam penggunaannya juga lumayan mudah tinggal penyesuaian dengan template blog kita langsung saja.
- Login Blogger
- Klik Rancangan kemudian Edit HTML lalu cari kode ]]></b:skin>
- Copas script berikut dan letakkan di atas kode ]]></b:skin>
- Kemudian cari kode </head> dan letakkan script berikut ini di atas kode </head>:
- Last, cari kode </body> dan letakkan script berikut ini di atas kode </body>
/*---------------- Beautiful Slide Out Navigation -------------------------------*/ .headerfixed { width:600px; height:56px; position:absolute; top:50%; left:10px; background:#fff url(title.png) no-repeat top left; } ul#navixed { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navixed li { width: 103px; display:inline; float:left; } ul#navixed li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#000; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navixed li a:hover{ background-color:#000; } ul#navixed li a span{ letter-spacing:2px; font-size:11px; color:#FFF; } ul#navixed .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiLNMja-Q5wOfMQoIqtOk5hq3QzbwaAHdT94Wmr8Vaj0Ee_3UfIURJZf6sSJ1OhG8jLKGKN8fDhmNcFmPM2rPaNOjpLOU2PyhsAGRf_9byndS6tHbuhPlN8s0waOeiW0L67Ekrc10Y19I/s1600/home.png); } ul#navixed .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XfpkNAvpwi4XBF7-DpOR_6yEJOFQLvzq0C4i6uq3zlTGDyVRaP4_V8LTMx1GUsytPK_vqjc1yuGxGOvkWtniCP5c82x5X5jZD7jGlqNMOh14cxxR0ug7wHA8ViJsn4DY-p31x52hXP4/s1600/id_card.png); } ul#navixed .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWwYGcIIFvZWeMF6NbU294_ZOTdgg8Ruta6KWapAkUgrmwWtOBip2GxHflByDTnog0Cy5LiPt73AgihIuCi33ybtCnQexhEooukcw83xzWG9NT-1C05rPsJzuJvtrJk2Uw1QW4Q6Z3-E/s1600/search.png); } ul#navixed .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicWgu917G9zIlgQyR1P30oyvnXpWj8pgNKrPZPYXRcxXaTcOkHY8tBwlCqGSqU1I0qxptrN1FWEeFkol11P3httuDp2qoPp9X9BCo-UTslvpq_rjRDnt5sIXpzGFtK3jD5JDSCaP87jec/s1600/ipod.png); } ul#navixed .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiFFKNjPO9gJ0K5VsJwLt9EF1z0HTF14nVp3M3J2vKhIUwx_U5ZMuB2FAB6I47UrMvDl6dozvADDguiaqMpLveNpAnhQ0EEyGWBB56lCdeuWd06qktJIX2j13PaSOg2HbPVMfEBpYTack/s1600/rss.png); } ul#navixed .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLk8LyTuKFs8CMgYT3EyTV-coC1Cv0Cj8DVzcGC06O_Y42R2jVYFkNoHfVpca6vCTd8tqefKh3a-HRoqmpIEEQ9ftl83jRXea4iyZgDRLoauOarbtgcWnqIuAEyOvkcdVZEGLjV1mqrdI/s1600/camera.png); } ul#navixed .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhuunceG0xavgHsbsgWmUNs1-eZ48vMEKeW4XqlFSnGPMC4SNNNgzMsCSgvRDj6P8nt8T-5Gs6Dmrwo8v9k-DFgCGpuc69-lRos_KIBhRbUrG46oncaoD7trWG8cvknAWTyUqVhL5y40/s1600/mail.png); }
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/> <script src='http://kangdadang.googlecode.com/files/jcolor.js'/> <script type='text/javascript'> $(function() { var d=300; $('#navixed a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); }); $('#navixed > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script>
<ul id='navixed'> <li class='home'><a href='#'><span>Home</span></a></li> <li class='about'><a href='#'><span>About</span></a></li> <li class='search'><a href='#'><span>Search</span></a></li> <li class='photos'><a href='#'><span>Photos</span></a></li> <li class='rssfeed'><a href='#'><span>Rss Feed</span></a></li> <li class='podcasts'><a href='#'><span>Podcasts</span></a></li> <li class='contact'><a href='#'><span>Contact</span></a></li> </ul>
Semoga Berhasil sejauh saya mencoba memang berhasil. Untuk penggunaan gambar anda dapat mengunjungi http://www.iconfinder.com dengan penyesuaian ukuran yang saya gunakan adalah 64 px.
Selata mencoba.....
0 komentar:
Posting Komentar