ARSIP BLOG

Cara Membuat Menu Navigasi Rocking Rolling Rounded

Posted by on Jumat, 21 September 2012

Rocking Rolling 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. 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.

{ 5 comments... read them below or add one }

Irvan Noor Hasim mengatakan... Reply Comment

Untuk icon lain selain itu ada tidak?

indra kurniawansyah mengatakan... Reply Comment

Thanks sangat bermanfaat untuk ane yang baru belajar ngeblog.

tomeighm mengatakan... Reply Comment

you can look here visit our website anchor site great post to read check this site out

Unknown mengatakan... Reply Comment

you can try these out Dolabuy YSL my company Dolabuy Louis Vuitton my sources replica bags

Unknown mengatakan... Reply Comment

high end replica bags t31 p3h00z1g58 gucci replica handbags l79 k2z56i0w08 Ysl replica y05 v3f47m6z99

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Posting Komentar

Ketentuan komentar:
- Baik dan Sopan.
- Komentar harus sesuai dengan isi postingan.
- No Spam, No Junk, No Rubbish, No Porn.
- Mudah Dimengerti.

Dimohon juga untuk Meng-Kritik atau kasih Saran buat Blog ini

Terima Kasih