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/AVvXsEjvR7DywV8eEoX3UFXCdm-v287Z5eZsYkmwIXyno3HIZYb8WnzT-lBQA2A9HWPRUB4UWb8FzxAie2gKw3XMQt3qGT9eu7eBI0QYtKj58BP5G0O9BqWgy5OQHCQvK71IiDX6dc38dIjBUr0/s1600/home.png); } ul#navigation .about a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfQgQIRV82Z6iVSQcV3QYMk9UVy3tcjTxgUFlLrZo8o7eK9coM4Y7HfsAtNW1EJpZgAqiA2o1EST2zycOoN8dY2BRQJyIdUXjXHg7mWmozEaULT8EDzcXLsU0f5tsJCWU_i5JwBlftr4A/s1600/id_card.png); } ul#navigation .search a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhILBtLs_ac-He7aHmAYvr7XbBh8-78i3P4HiaxUoX8iEzrDWV1crYQRh3yEJBpgqHhF3TS-wcxrGyhoB2o9zh1AsDBvSk2zULCXzmWbrewCISv5km-P1EMYPkAPHxIGTYF5Lgouo4BYcg/s1600/search.png); } ul#navigation .podcasts a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipzN8twCsmdCFH6R6fVFzc3lQGKR3ZW2ylt2TdkIQglkazO9OlUSpoMaiZtrTZQDHI3tN-2kyR-9nTqC7koj1wM9GCtlRRSPfTBEaCcKFTn9gWd5bfCA6JtEmyi8N9MFtuGAR02xgXYoc/s1600/ipod.png); } ul#navigation .rssfeed a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg-0k6kcKzM9vj9w_ZQXRk0SRnhZUdoSgxRyb93zeVsACO6Tk_N1hlB-2EmZzaEVyIg-kdiyEjRXqsNVS54bIk_LHheQVSwY1GDO1BFBherWktBfAUSv5-UJL2fvlXud2wejb3cmbOmRQ/s1600/rss.png); } ul#navigation .photos a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijo_8BZO8diHvEFWYRlD1EEh9KkW9FREfJ1RGQhhjxTe3RpLJkTG4UTAqTLkPRPH5EOX4aCbCbYI9a-xTVvntX2Qi8uXjAFbu6FfwArSaBafvBDZHi722QyErzpVopT7MAj43eeCRJjcU/s1600/camera.png); } ul#navigation .contact a { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisgLAfgFPbfG5NsPz0dZheyCvNrw2ZQdcxZGWRqvzvQ21gZksw-EoUgrEvawErhURFgX5EflH6CWyTdgi9FTH1ATPhPFWehdZDId_0tQx7iNYbUKta5oP98okMwhf5zwkxCJ0xwrw-C30/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