Cara Membuat Menu Navigasi Rocking Rolling Rounded

Cara Membuat Menu Navigasi Rocking Rolling Rounded. Pada liburan kali ini akan saya isi dengan aktifitas blogging, dan hari ini saya akan share tutorial yang sangat menarik untuk disimak dan di terapkan di blog kita. Rocking Rollong Rounded adalah sebuah menu navigasi yang dibuat sedemikian rupa sehingga bisa memikat hati siapapun yang melihatnya.

Fungsi dari menu ini sama saja fungsinya dengan menu navigasi horizontal sih menurut saya, kalau ada yang berpendapat berbeda silahkan berikan pendapatnya pada kotak komentar ya hhe... bagi yang penasaran dengan menu navigasi Rocking Rolling Rounded-nya silahkan sobat lihat gambar di bawah ini.

Masih belum jelas juga? nih saya kasih demonya, untuk melihat demonya sobat bisa megunjungi link ini . Nah bagaimana setelah melihat tampilan menu navigasinya, sekarang sobat tinggal mencari tempat yang tepat untuk meletakkan menu navigasi ini pada blog anda. Berikut ini langkah-langkah Cara Membuat Menu Navigasi Rocking Rolling Rounded.


1.log in ke blogger.
2.Klik rancangan » edit HTML » centang kotak Expand Template Widget. Atau klik template » edit HTML » centang kotak Expand Template Widget. Dan disarankan untuk membackup template anda, sebagai cadangan bila terjadi kesalahan dalam pengeditan.
3.Pastikan pada template anda sudah dilengkapi dengan Jquery 1.3.2. kalau belum ada silahkan anda letakkan kode Jquery ini di atas kode </head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

4.Letakkan juga kode di bawah ini tepat di bawah kode Jquery yang ada di atas.

<script src='http://raihanun.googlecode.com/files/jquery-animate-css-rotate-scale.js' type='text/javascript'/>


<script src='http://raihanun.googlecode.com/files/jquery-css-transform.js' type='text/javascript'/>

5.Selanjutnya letakkan kode CSS di bawah ini di atas kode ]]></b:skin>.

#rocking-rolling{
width:auto;
height:52px;
text-align:left;
font-family:"Trebuchet MS",sans-serif;
font-size:16px;
font-style:normal;
font-weight:bold;
text-transform:uppercase;
}


#rocking-rolling h2,#rocking-rolling p, #rocking-rolling form{
/* netralisasi tampilan elemen heading, paragraf dan formulir */
margin:0 0 0 0;
pading:0 0 0 0;
border:none;
background:transparent;
}


#rocking-rolling .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;
}


#rocking-rolling .link{
left:2px; top:2px;
position:absolute;
width:48px;
height:48px;
}


#rocking-rolling .icon_home{
background:transparent url(http://3.bp.blogspot.com/-fuX8vT6cIzs/TlXFJXROx2I/AAAAAAAAAxE/D1kiRmSFBy4/s1600/home.png) no-repeat top left;
}


#rocking-rolling .icon_mail{
background:transparent url(http://2.bp.blogspot.com/-FaTjV0LsMXQ/TlXFJ_5vpxI/AAAAAAAAAxc/JRPFgDCZ6lg/s1600/mail.png) no-repeat top left;
}
#rocking-rolling .icon_help{
background:transparent url(http://4.bp.blogspot.com/-l7M2zGOJAQo/TlXFJ0YZR6I/AAAAAAAAAxM/32acLuLn_r8/s320/help.png) no-repeat top left;
}


#rocking-rolling .icon_find{
background:transparent url(http://4.bp.blogspot.com/-ZIEGzN0LZCg/TlXFJ8WVzEI/AAAAAAAAAxU/2-oDKLYjsKw/s1600/find.png) no-repeat top left;
}


#rocking-rolling .icon_photos{
background:transparent url(http://4.bp.blogspot.com/-IwFEevO-np8/TlXFKFu47FI/AAAAAAAAAxk/aejG1YmQumc/s1600/photos.png) no-repeat top left;
}


#rocking-rolling .item_content{
position:absolute;
height:52px;
width:220px;
overflow:hidden;
left:56px;
top:7px; background:transparent; display:none;
}


#rocking-rolling .item_content h2{
color:#aaa;
text-shadow:1px 1px 1px #fff;
background-color:transparent;
font-size:14px;
}


#rocking-rolling .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;
}


#rocking-rolling .item_content a:hover{
color:#0b965b;
}


#rocking-rolling .item_content p{
background-color:transparent;
text-transform:none;
font-weight:normal !important;
display:none;
}


#rocking-rolling .item_content p input{
border:1px solid #ccc;
padding:1px;
width:155px; float:left;
margin-right:5px;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}

6.Yang terakhir adalah meletakkan kode pemanggil Menu navigasi Rocking Rolling Rounded  yang bisa sobat letakkan di mana saja/ terserah anda ingin meletakkannya di mana, tetapi kali ini saya akan meletakkannya di bawah header, maka carilah kode <div id='content-wrapper'> dan letakkan kode di bawah ini tepat di atas-nya.

<div id='rocking-rolling'>
<div class='item'>
<a class='link icon_mail'></a>
<div class='item_content'>
<h2>KONTAK SAYA</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>BANTUAN</h2>
<p>
<a href='#'>Buku Tamu</a>
<a href='#'>Lapor</a>
<a href='#'>Kritik dan Saran</a>
</p>
</div>
</div>


<div class='item'>
<a class='link icon_find'></a>
<div class='item_content'>
<h2>TELUSURI</h2>
<p>
<form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form> 
</p>
</div>
</div>


<div class='item'>
<a class='link icon_photos'></a>
<div class='item_content'>
<h2>GALERI FOTO</h2>
<p>
<a href='#'>Kategori</a>
<a href='#'>Arsip</a>
<a href='#'>Daftar Isi</a>
</p>
</div>
</div>


<div class='item'>
<a class='link icon_home'></a>
<div class='item_content'>
<h2>MULAI DARI SINI</h2>
<p>
<a href='#'>Pelayanan</a>
<a href='#'>Portfolio</a>
<a href='#'>Pembayaran</a>
</p>
</div>
</div>


<div style='clear:both;'></div>
</div>


<script type='text/javascript'>  function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$('.link',a).stop().animate({rotate:'+=40deg'},0)},10);a.stop().animate({width:'52px'},1e3).find('.item_content').stop(true,true). fadeOut().find('p').stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$('.link',a).stop().animate({rotate:'+=-40deg'},0)},10);a.stop().animate({width:'268px'},1e3).find('.item_content').fadeIn(400, function(){$(this).find('p').stop(true,true).fadeIn(600)})}$('.item').hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)})  </script>

Kode-kode yang saya berikan warna di atas bukan hanya untuk hiasan lho sobat tetapi untuk memudahkan sobat untuk mengedit kodenya. begini keterangannya :

• Kode yang berwarna biru adalah judul menu.
• Kode yang berwarna merah adalah nama menu.
• Kode yang berwarna kuning adalah link yang akan ditujukan. 

Kalau sudah selesai silahkan save template sobat, dan lihat hasilnya. Dan selesai sudah langkah-langkah Cara Membuat Menu Navigasi Rocking Rolling Rounded. Mudah-mudahan postingan saya kali ini bisa bermanfaat bagi sobat. :)