Karya-Reza

Mengerti Kebutuhan Pengunjung

Select Menu
  • Home
  • Seputar Dunia Blogging
  • Template Untuk Blog
  • Widget Blog
  • Dan Lainnya
    • Tukar Link !
    • Daftar Banner Yang Sudah Tukar Link
  • Error Page
Home » Widget Blogging » Membuat Menu Rocking Rolling Rounded Di Blog

Monday, June 30, 2014

Membuat Menu Rocking Rolling Rounded Di Blog

Reza Syahputra Rizal
38 Comments
Widget Blogging
Monday, June 30, 2014

DEMO

  • DEMO KLIK DISINI
Membuat Menu Rocking Rolling Rounded Di Blog - Mungkin semua dari blogger
Pasti memiliki menu navigasi di blognya , tetapi apakah anda bosan ? , dengan Menu lama
Mungkin menu ini bisa jadi refrensi bagi anda yang sedang mencari menu dengan versi baru

Berikut Langkah Pembuatan :

1. Anda Tambahkan Script Ini Diatas <head>
 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

2. Simpan Kembali Script Dibawah Ini Diatas <head>
<script src='http://reader-download.googlecode.com/svn/trunk/jquery-animate-css-rotate-scale.js' type='text/javascript'></script> 
<script src='http://reader-download.googlecode.com/svn/trunk/jquery-css-transform.js' type='text/javascript'></script>

3. Tambahkan CSS Ini diatas  ]]></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;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  -webkit-border-radius:30px; 
  -webkit-box-shadow:1px 1px 3px #555;
  -moz-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; 
  -webkit-box-shadow:none; 
  -moz-box-shadow:none; 
  box-shadow:none; 
}

4. Silahkan anda letakan kode dibawah ini terserah dimana
anda ingin menampilkan menu tersebut

<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>
Silahkan anda ganti judul dengan isi dari blog anda

Share

Like

G+

Tweet

Tweet
38 Komentar untuk "Membuat Menu Rocking Rolling Rounded Di Blog"

Berkomentarlah Sesuai Isi Artikel Diatas :)

Klik Untuk Komentar
Unknown
Balas
Unknown June 30, 2014 at 9:22 PM
delete

coba saya terapkan di blog

Unknown
Balas
Unknown June 30, 2014 at 9:24 PM
delete

ijin coba gan

Unknown
Balas
Unknown June 30, 2014 at 9:24 PM
delete

ijin comot ilmunya mas

Anonymous
Balas
Anonymous June 30, 2014 at 9:29 PM
delete

keren,tapi beratin blog gak nih?

Anonymous
Balas
Anonymous June 30, 2014 at 9:30 PM
delete

keren mas,tapi berat gak nih?

Unknown
Balas
Unknown June 30, 2014 at 9:32 PM
delete

Wahh mantep nih.. Izin nyoba ya..

Deancooel
Balas
Deancooel June 30, 2014 at 9:35 PM
delete

Keren nih, bisa ngeroll kayak gitu
Ijin cobain dulu sob

Unknown
Balas
Unknown June 30, 2014 at 9:38 PM
delete

kayaknya keren nih menu rocking rolling nya , coba praktekin di blog ane ah .
makasih gan

Ilham
Balas
Ilham June 30, 2014 at 9:49 PM
delete

wah keren :D
dicoba dulu ya :D
Pertamax ?
mungkin :v

Anonymous
Balas
Anonymous June 30, 2014 at 9:53 PM
delete

wah kren nih izin coba dlu
thanks for sharing

Anonymous
Balas
Anonymous June 30, 2014 at 9:57 PM
delete

wah mantap nih gan ane izin praktik dulu ya gan, mksh udh share

Anonymous
Balas
Anonymous June 30, 2014 at 9:59 PM
delete

mantap nih gan ane minta izain praktk ya gak mksh udh share

Budi
Balas
Budi June 30, 2014 at 10:05 PM
delete

Wah Pertamax nih
Keren mas info Nya

Unknown
Balas
Unknown June 30, 2014 at 10:14 PM
delete

wah keren kang reza
ini yang saya cari cari
nice post kang

FAJAR
Balas
FAJAR June 30, 2014 at 10:19 PM
delete

Mantap Juga Postinganya gan

Makasih gan

23-Institute
Balas
23-Institute June 30, 2014 at 10:20 PM
delete

wah lumayan nih scriptnya buat jaga2 gan :D
makasih gan :D

Unknown
Balas
Unknown June 30, 2014 at 10:22 PM
delete

Owh, gini to caranya.. Izin coba dulu gan (y)

Unknown
Balas
Unknown June 30, 2014 at 10:26 PM
delete

waah., boleh ane coba nh gan ;) bagus juga nh.. hehe

Travel and Destination Guide
Balas
Travel and Destination Guide June 30, 2014 at 10:58 PM
delete

keren gan, bisa gerak gitu menu/navigasinya, sangat bermanfaat.

Travel and Destination Guide
Balas
Travel and Destination Guide June 30, 2014 at 10:59 PM
delete

keren gan bisa gerak gitu navigasinya

Raihan Sa'di
Balas
Raihan Sa'di July 1, 2014 at 1:49 AM
delete

patut di coba gan... sambil nunggu berbuka sambil bereksperimen nih :v

Anonymous
Balas
Anonymous July 1, 2014 at 1:53 AM
delete

coba saya peraktekan
ini bis akan di taruh widget

Anonymous
Balas
Anonymous July 1, 2014 at 1:54 AM
delete

keren gan, izin praktek ya
ini bisa kan di letakan di widget

kimi
Balas
kimi July 1, 2014 at 2:36 AM
delete

wow kayaknya yang satu ini keren nih :D
izin praktek son :D

kimi
Balas
kimi July 1, 2014 at 2:38 AM
delete

wow kayaknya yang satu ini keren nih :D
izin praktek sob :D

kimi
Balas
kimi July 1, 2014 at 2:38 AM
delete

wow kyakanya keren nih sob :D
izin praktek :D

Unknown
Balas
Unknown July 1, 2014 at 5:11 AM
delete

widih keren neh, ijin bookmark ya

Unknown
Balas
Unknown July 1, 2014 at 6:39 AM
delete

keren gan langsung ane coba dah ^_^
thanks for share

Angelo
Balas
Angelo July 1, 2014 at 6:50 AM
delete

Berat nggakk nih

Angelo
Balas
Angelo July 1, 2014 at 6:51 AM
delete

ijin praktek bro

Iska
Balas
Iska July 1, 2014 at 11:05 PM
delete

bagus sih, tapi berat, hehe

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal July 2, 2014 at 3:25 AM
delete

Ok Gan :D

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal July 2, 2014 at 3:25 AM
delete

Ok Silahkan :like:

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal July 2, 2014 at 3:26 AM
delete

Ok Silahkan :like:

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal July 2, 2014 at 3:26 AM
delete

ok silahkan :like:

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal July 2, 2014 at 3:27 AM
delete

Ga akan gan :D

Reza Syahputra Rizal
Balas
Reza Syahputra Rizal July 2, 2014 at 3:28 AM
delete

Ga akan gan :-d

admin
Balas
admin July 3, 2014 at 2:47 AM
delete

weh keren juga tapi ribet ,,,,, tapi kerenlah psotinganya

Berkomentarlah Sesuai Isi Artikel Diatas :)

Newer Post Older Post Home
Subscribe to: Post Comments (Atom)
  • Contact Me !

Contact Me !

  • Semua Niche

    Popular Posts

    • Membuat Menu Rocking Rolling Rounded Di Blog
    • Membuat Navigasi Halaman Dengan Keyboard
    • Fianetcakep Blogger Template Download
    • Blue Awesome Template Seo Dan Rensponsive
    • Harderly Blogger Template
    • Minima Colored Blogger Template
    • Memodifikasi Widget Popular Post Tampil Lebih Menarik
    • Memodifikasi Tampilan Demo Dan Download
    • Membuat Sidebar Multi Tab dengan Efek jQuery Di Blog
    • Download KanBai BTemplate Blog

    Berlangganan

    Dapatkan Informasi Dari Blog Karya-Reza Melalui Email

    Follow blog

    Subscribe To

    Posts
    Atom
    Posts
    Comments
    Atom
    Comments

    About Me

    Reza Syahputra Rizal
    View my complete profile

    © 2025 Karya-Reza Published By Karya-Reza powered by Blogger.com.
    All Right Reserved By Blog Dian Anarchyta.