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/AVvXsEhNb6RfTFMZhL03ttTalfLZKpb9-sqJ3ef4ngb96IzNpQ8Y2QXEwyENf-XrYOjp4mMIYkbQ1rxB6pe48IsXpCImaJ5SOI672CxMI9GiPM4HCDH_RDitunpipxOzPEmLZvBNFacrvcJEJK4/s1600/home.png); } ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJRkVVRC3NEx-JXb8iH2Ctcb8AllF4YkJhgqOlgBWw5ZjyK7uTJKZGVSBdYxWPr8mbw3_QYjqdXn_p-jBaFfUKbOWY-VJFn7HV19e0GVP6FlQcc7QlZqON9GvIeasYEXPx_-l_je9HmH8/s1600/id_card.png); } ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY23AxsjDkbvLJtgVStDMJXZZW6GcomrV4hJ5-t1_lPEx278x9HwBuEvexgOISbEFHTmU66pNOYPBDZ_IkigtLDqIPH3m1FMYILV47ifv_meVU8bR4Q5-8ed5HbVcHIpM07fkUXnuW5M4/s1600/search.png); } ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUFjoxqngpmTgPZ68Qu5lGBzwPqrc8WfI67oeOzsW3gUhbGH9xxhEvfAklduHs5a-Ag_4yeH1ItiYAsdgkffaGnxQxbvVHgm48cQFKvxI5XnO7Bvs184PmcC6Lt4DAXsyP8SEd6__om1A/s1600/ipod.png); } ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9HlKAy6FlmD6lqRc8b5QI9ebDme6q5swfpD6dtNrygk6Dlp9B1YbCPwNMmh5jQXqY-UkplcB6IyH_qy7mtZMbbU8kkX2mjW6ucwhD9ZpFVihaDjFRUOJZ9YiFRoGp9vT06yO6qZ5W2Qc/s1600/rss.png); } ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmFNG32Iocf7Cdzj1Pt5GBsPNM48veQO6xfkrRHOe-q-ugiylTtHFZpBQDPXMu4g7AfvBjhtvVickb-1KGeeW2VxA_TWfNp7IQ3N1mJZ1rtN6Urr08iaPDWD_Jbh5wizRLtPXH01e6-PE/s1600/camera.png); } ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi86DL5I46kUz_w63ZuvFqPpWEV7HVrsnjZkt2E5GZ0yiBcEFzX_cVP6GQ6HxZTfsFMTOVk-rk58WQeRbQEe_Vvm64DvAN34V31I-QhtCIiTn1TvmTOVHmTx77BoczMH5iyTKxbwWh_apw/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