Menu Navigasi Putar

     Pagi sobat,..!! pagi ini Mas_BRO memberikan menu navigasi putar atau "Menu Rocking & Rolling", gunanya untuk membuat menu anda menjadi lebih enak di lihat dan rapi,. baiklah langsung saja ikuti langkah - langkah di bawah berikut ini, Silahkan,....

1. Masuk ke akun blog anda
2. Rancangan > Edit HTML...
3. Centang Expand Template Widget > Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.
4. Selanjutnya dalam Edit Template sobat cari kode ]]></b:skin> atau <style> Jika kesulitan mencarinya cukup tekan Ctrl + F
5. Bila sudah ketemu sekarang sobat copy kode CSS di bawah ini dan paste di css

/* Sliding Ang Rolling */  .menu{width:800px;height:52px;position:relative;top:20px;left:-230px;font-family: "Trebuchet MS", sans-serif;font-size: 16px;font-style: normal;font-weight: bold;text-transform: uppercase;}.item{position:relative;background-color:#f0f0f0;float:right;width:52px;margin:0px 5px;height:52px;border:2px solid #ddd;-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;-moz-box-shadow:1px 1px 3px #555;-webkit-box-shadow:1px 1px 3px #555;box-shadow:1px 1px 3px #555;cursor:pointer;overflow:hidden;}.link{left:2px;top:2px;position:absolute;width:48px;height:48px;}.icon_home{background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_home.png) no-repeat top left;}.icon_mail{background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_mail.png) no-repeat top left;}.icon_help{background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_help.png) no-repeat top left;}.icon_find{background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_find.png) no-repeat top left;}.icon_photos{background:transparent url(http://i1263.photobucket.com/albums/ii623/dek_rif/Icon/th_photos.png) no-repeat top left;}.item_content{position:absolute;height:52px;width:220px;overflow:hidden;left:56px;top:7px;background:transparent;display:none;}.item_content h2{color:#aaa;text-shadow: 1px 1px 1px #fff;background-color:transparent;font-size:14px;}.item_content a{background-color:transparent;float:left;margin-right:7px;margin-top:3px;color:#bbb;text-shadow: 1px 1px 1px #fff;text-decoration:none;font-size:12px;}.item_content a:hover{color:#0b965b;}.item_content p {background-color:transparent;display:none;}.item_content p input{border:1px solid #ccc;padding:1px;width:155px;float:left;margin-right:5px;}

6. Masih dalam Edit Template, sekarang sobat cari kode </body> lalu letakkan kode berikut ini di atas kode tersebut.

<!-- Sliding And Rolling -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/><script src='http://otowebsite.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/><script src='http://otowebsite.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/><script>$('.item').hover(function(){var $this = $(this);expand($this);},function(){var $this = $(this);collapse($this);});function expand($elem){var angle = 0;var t = setInterval(function () {if(angle == 1440){clearInterval(t);return;}angle += 40;$('.link',$elem).stop().animate({rotate: '+=-40deg'}, 0);},10);$elem.stop().animate({width:'268px'}, 1000).find('.item_content').fadeIn(400,function(){$(this).find('p').stop(true,true).fadeIn(600);});}function collapse($elem){var angle = 1440;var t = setInterval(function () {if(angle == 0){clearInterval(t);return;}angle -= 40;$('.link',$elem).stop().animate({rotate: '+=40deg'}, 0);},10);$elem.stop().animate({width:'52px'}, 1000).find('.item_content').stop(true,true).fadeOut().find('p').stop(true,true).fadeOut();}
</script>

7. Simpan template.

8. Sekarang adalah langkah untuk meletakkan Menu Rocking & Rolling ini, sobat bisa meletakkan Menu Rocking & Rolling ini di elemen HTML/Java Script.
9. Pada Dasbor klick Rancangan > Tambah Gadget > Pilih elemen HTML/Java Script.
10. Lalu copy kode di bawah ini dan paste atau letakkan di dalam elemen HTML/Java Script tadi.

<div class="menu"><div class="item"><a class="link icon_mail"></a><div class="item_content"><h2>Contact us</h2><p><a href="#">eMail</a><a href="#">Twitter</a><a href="#">Facebook</a></p></div></div><div class="item"><a class="link icon_help"></a><div class="item_content"><h2>Help</h2><p><a href="#">FAQ</a><a href="#">Live Support</a><a href="#">Tickets</a></p></div></div><div class="item"><a class="link icon_find"></a><div class="item_content"><h2>Search</h2><p><input type="text"></input><a href="">Go</a></p></div></div><div class="item"><a class="link icon_photos"></a><div class="item_content"><h2>Image Gallery</h2><p><a href="#">Categories</a><a href="#">Archives</a><a href="#">Featured</a></p></div></div><div class="item"><a class="link icon_home"></a><div class="item_content"><h2>Start from here</h2><p><a href="#">Services</a><a href="#">Portfolio</a><a href="#">Pricing</a></p></div></div></div>  # = LINK

Screenshootnya

Terima Kasih Atas Kunjungannya - Mas_BRO