Cara Membuat Menu Rocking and Rolling Rounded with jQuery

Belajar SEO dan Blog Bagi pemula
Cara Membuat Menu Rocking and Rolling Rounded with jQuery

Masih di Variasi Blogger share Cara Membuat Menu Rocking and Rolling Rounded with jQuery cekidot

Silahkan sobat Copy Paste script  di bawah ini di Edit HTML jangan lupa centang pada Expand Template Widget kemudian tekan Ctrl+f kemudian paste kode script ]]></b:skin> jika sudah ditemukan silahkan Copy paste script di bawah ini dan simpan sebelum kode script tadi


#rocking-rolling {   width:auto;
  height:52px;
  text-align:left;
  font-family:&quot;Trebuchet MS&quot;,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;
}

Kemudian silahkan cari kembali kode script </body> jika sudah ketemu silahkan Copy paste script di bawah ini dan simpan di atas kode script tadi

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<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>

Satu langkah lagi sobat , Silahkan sobat Copy paste kembali script di bawah ini , untuk penyimpanan kode script di bawah ini sobat bisa atur sesuai dimana posisi menu yang ingin di tampilkan di blog sobat

<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>

Simpan dan lihat hasilnya..

Catatan : Silahkan ganti tanda yang # di atas dengan alamat link tujuan di menu blog sobat , untuk melihat contohnya klik DEMO

sumber


Share to

4 Responses to "Cara Membuat Menu Rocking and Rolling Rounded with jQuery"

  1. Info menarik gan...Salam kenal..

    BalasHapus
    Balasan
    1. ya , semoga bermanfaat :D dan salam kenal balik sob... :)

      Hapus
  2. Edit HTML - centang pada Expand wigdat Template. minta bantuannya... setelah edit HTML lgsung ke Expand Witget template. expand widget template itu didapat dari mana ya mas...?

    BalasHapus
    Balasan
    1. kalau untuk mencari kode script di edit html versi terbaru bisa baca disini sob http://variasiblogger.blogspot.com/2013/12/cara-mencari-kode-script-di-edit-html.html ( Cara Mencari Kode Script di Edit HTML Template Blogger Updates ), soalnya blogger sudah update dengan tampilan terbaru, semoga membantu jawaban saya... :)

      Hapus

Jika ada Tutorial Info Blog Indonesia ini, yang kurang dimengerti silahkan luangkan saja waktu anda untuk berkomentar, karena pertanyaan anda sangat berharga untuk perkembangan dan kemajuan blogs ini.

Soalnya diblogs ini adalah wadah untuk belajar mengenal webs/blogs, disini kita sama - sama belajar, seandainya anda adalah seorang pakar blogger profesional atau pakar seo indonesia bimbinglah saya, untuk menulis artikel berkualitas.

Oia sebelum menyisipkan script silahkan gunakan tools konversi terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar.

Terimakasih.. salam kenal dan salam hangat untuk blogger indonesia, yang selalu setia di Info blog Indonesia variasi blogger.

¯\(◕ ‿◕)/¯



convert TOS

Panduan, Bimbingan Cara Belajar Blogs dan Seo