Berikut di bawah ini adalah screenshot nya.
Tanpa berlama-lama berikut cara membuatnya :
- Login ke blogger.com , jika sudah,
- Pilih Template → Edit HTML → Ceklist Expand Template Widget
- Cari kode ]]></b:skin> dengan menggunakan (ctrl+f) agar mudah mencari
- Setelah itu copas script di bawah ini di atas kode ]]></b:skin>
ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 0px; list-style: none; z-index:999999; width:721px;float:right; } ul#navigation li { width: 103px; display:inline; float:left; border:0; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#eeeeee; 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.96; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#CAE3F2; } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; font-family:trebuchet-ms, arial, tahoma, Sans-Serif; font-weight:bold; text-shadow: 0 -1px 1px #fff; } ul#navigation .home a{ background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqs8gy1eXsg8I6jOtqMbZXLkOVxuLS_LczBUiqDkSeRMW0g-_1CzAp3KIQId8iF6aX65gfbVsiXlRH2LMyxN6S_oH6MTPS4XeUQzMfA8Z31-A5olRRiRqK1BZEP3fycaQLHcsNECmvX0g/s1600/home.png); } ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyVU7CK_Y_nH-w1zlOSWGtzWwx3nQT2kZlAgk4-3KMSwucxQlJ7TTaVLcXxKR1Mfbi-HzXZes1zWzmQTJsrwOdHfzhYOl2kmTozxdFM7YvfV2EBNUawIvvz65IsgtkU3tG5nWPYj3vPs/s1600/id_card.png); } ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6WF_KOl4bnQfg3Y_PUWiu8bvjJhk7T0tO91H0sYyTCUc67K_VMyvy_E6nJ6ixKxKrst0xzzOqFDP50qJx_gsBqZSFehN9tu_MoOPQzYK7qfCWJxLcMa5std653bY1cMkVfq9DCLmVexk/s1600/search.png); } ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV9AjtyxJYsh5igoDwt8DQ7z_xYSsqj0dCd1A_tHsGahlSY0qlGfvHvJw1QIBKvT7rlBovnqsSjhm6oDhNdhOG8OfeH02uU8yOC1tKOFTjMkBlPnpVnnoHra8kIdfVU1LQD5y9ZsN_9us/s1600/ipod.png); } ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ69W80xvcJgec46cgPDdYx-HbMGzCdQ0kjOMJNS5YJsfkH2B39so-F_OQ-L1ym_yvLaXFtQhFVcgAVjSBc5zIPn3BcEeQMnaYkcc2nNSZpQMUv93bF5Kglpm4Qjd29ORB2cF9F-xLIMs/s1600/rss.png); } ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8VVitAXkgGieqc0u2cinIhC8RKljJp7BL6FUWixPXBBEyH2fUkXEM-gnKrd2j581xeSRNyaGZW-uxnSXsQyPsN1FqjwLfsp9JVqY1zJh2LxvW5CLAHSWh8vqXBVgjWbX8lwF-l3b_s18/s1600/camera.png); } ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxouac_kLobBJQEKQH4LM0b0ljka0Zdl6IJmj4EdxbHVe_NfA3T3YlXHJ7Iq8pta4y3YfdZsQ-Jq9bzA7eNaMG_ubX0S_AYWeP9jl5b8iPY8ho4fEdC8TnGPp-UTjSc2tqHlZVWlQwUBw/s1600/mail.png); }
- Setelah itu cari kode </head>
- Copas script di bawah ini di atas kode </head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript"> </script> <script type="text/javascript">$(function() { var d=300; $('#navigation a').each(function(){ $(this).stop().animate({ 'marginTop':'-80px' },d+=150); });
$('#navigation > li').hover( function () { $('a',$(this)).stop().animate({ 'marginTop':'-2px' },200); }, function () { $('a',$(this)).stop().animate({ 'marginTop':'-80px' },200); } ); }); </script>
- Setelah itu cari kode <body>
- Copas script di bawah ini di bawah kode <body>
<ul id="navigation"> <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>
- Jika sudah selesai, simpan dan lihat hasilnya
Selamat Mencoba !
No comments:
Post a Comment