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/AVvXsEjGB9CRwMz0QROaXWlRmxqh4uoDNQy396pGMxg8xn1ikjqmrj-i76xFie1N_Mxk0OvX-gfXmxtWU3EsntGFF7Ggm1r3Eljo410NL1kIw2brOxzzShEIZOvJlZwxizkVp-yi_M6NCXO9604/s1600/home.png); } ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgedUdL9u7flCRmCr9gdOI0M2hMNuAURPw-Du_gXMMoxiPL9iZLUtGtWBn2xlDGhRwOKZ_fDrBcQ31PuSg7dM8nX8RnbezWBtkJmswd23_yn0Ssan4AIkOyQdtw1vjd2qVn72_iDjytLto/s1600/id_card.png); } ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhun4iRSF9yQwYev18fkm4ENvSS4M2s1hbyh3XjL532I49uSYHxEsTdh9nVApRhjbCr221c-eqtqPzGzMAMWs8MWHnQHU_XMhsA_Qc4vN3G9smlCb3JWnO4d6sHSz6WoXCy5EAQxxc6K0Q/s1600/search.png); } ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxzanI_FDfZV-iJbfhzVkeFSsGiejblFUoEC7ircWHEbeq6vgKHUboQXhWKu2ZbU3O-QJLhfRURIZ1iD2b0X3UYICulyfgk5_TphBUkiJkl5kmHvZp3OHRTNxkCIIomXE-b1jZzgY2260/s1600/ipod.png); } ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiogN63lFkKXnn8VkN_66zscMR1YEAG-nZ70XgdHaz9up3EzTHdkqiXGe0YXb1v4v6eN1g4GEOyuRMLLTNO0O7IF5_ANcV7ow3JEBkTR3khBTb-j5ESrK1vXOwtzjq-JS7sPj6dcx_x53Y/s1600/rss.png); } ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYO50izLEYB3rrDTpk5DuE1ym6FBxqeGAUtANJPRJ1XURWaBWVOiCO0IlMnHW-AzLpa-p-hYNRwmtXcl17wXSr14DTyywa3oM_wDxKOG1Plu49AXgiGqRQmh-ZiBcYRoyCn39KLTpWAuY/s1600/camera.png); } ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XpoCvthQrljVtHX2WkHKiMD3o2w8eVOxiOdSf7UZLiihrDMaOgrVwJUTubw5QnPB2jOP8mazDPGTRNaXfZBBlJm2tHfF0uSqqT3LypeHDz4NmS-6SCSv-MggGy1kvD2i_gGo9J2WJRQ/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 !
Tidak ada komentar:
Posting Komentar