• Posted by : Ariel Nicho Apr 16, 2013

    Selamat Datang di blog saya.
    Salam sejahtera bagi kita semua..

    Kali ini Lavixta Star akan membagikan sedikit tutorial untuk anda ssemua pecinta blog. Materi kali ini adalah "Cara Membuat Active Blending Horizontal Menu". Maksudnya, menu horizontal yang memiliki efek hover Active Blending.
    Banyak orang yang bingung memilih-milih menu mana yang cocok untuk blognya karena terlalu banyak jenis menu yang ada, saya menyarankan teman-teman untuk menggunakan menu yang satu ini. Karena menu saya ini sangat user friendly (mudah digunakan).



    Jika tertarik, berikut langkah-langkah pembuatannya:
    • Sediakan terlebih dahulu cemilan dan minuman yang segar agar merilekskan pikiran anda. ^_^
    • Loggin di blogger.com
    • Pilih blog yang bersangkutan
    • Dari "Dasbor", pilih "Template"
    • Klik "Edit HTML"
    • Lalu cari kode </head> (gunakan CTRL+F atau F3 untuk mempermudah pencarian)
    • Masukkan kode berikut diatas/sebelum kode </head>

    Code
    <style>
    *{padding:0; border:0; margin:0}
    #default a,
    #example a{display:block; width:90px; -moz-border-radius: 35px;
    border-radius: 35px; height:46px; margin-right:3px; float:left; background-image:url(http://1.bp.blogspot.com/-Yp_sc6XfCFA/UB-FjMu08rI/AAAAAAAABDo/vrZojjTdJxg/s1600/nav-sprite.png); background-repeat:no-repeat; cursor:pointer; text-indent:-9999px}
    #example_home{background-position:0 0}
    #example_home:hover, #example_home.hover{background-position:0 -48px}
    #example_blog{background-position:-90px 0}
    #example_blog:hover, #example_blog.hover{background-position:-90px -48px}
    #example_demo{background-position:-180px 0}
    #example_demo:hover, #example_demo.hover{background-position:-180px -48px}
    #example_about{background-position:-270px 0}
    #example_about:hover, #example_about.hover{background-position:-270px -48px}
    #example_services{background-position:-360px 0}
    #example_services:hover, #example_services.hover{background-position:-360px -48px}
    #example_contact{background-position:-450px 0}
    #example_contact:hover, #example_contact.hover{background-position:-450px -48px}
    </style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js'/>
      <script src='jquery.blend.js'/>
      <script>
       $(document).ready(function(){
        $(&quot;#example a&quot;).blend();
        $(&quot;#example2 a&quot;).blend();
       });
      </script></script>


    Jika saat menyimpan template terjadi kesalahan script, coba hilangkan kode </script>, setelah itu coba simpan template kembali, jika berhasil ya syukur, tetapi jika masih terjadi kesalahan silahkan tanya di komentar.

    • Setelah itu, coba cari salah satu kode dibawah ini :

    Code
    <div id='outer-wrapper'>    
            atau
    <div id='content-wrapper'>
            atau
    <div id='main-wrapper'>

    • Jika sudah ketemu salah satu kodenya, silahkan masukkan kode berikut ini dibawah/setelah kode tersebut :
    Jika teman-teman menemukan tiga-tiganya silahkan pilih salah satu. Ingin tahu perbedaan "Outer Wrapper", "Content Wrapper", dan "Main Wrapper", silahkan kunjungi artikel sebelumnya. 

    Code
    <div id='demo'>
    <div id="example">
    <a href="link tujuan" id="example_home">Home</a>
    <a href="link tujuan" id="example_blog">Blog</a>
    <a href="link tujuan" id="example_demo">Demo</a>
    <a href="link tujuan" id="example_about">About</a>
    <a href="link tujuan" id="example_services">Services</a>
    <a href="link tujuan" id="example_contact">Contact</a>
    </div></div>


    1. Ganti tulisan link tujuan dengan link/alamat yang akan dituju setelah menu diklik,
    2. Ganti tulisan yang berwarna biru dengan kata yang akan ditampilkan di setiap menu 

    • Selanjutnya, simpan template anda, dan teman-teman sudah bisa melihat hasilnya.
    Tambahan :

    Teman-teman juga bisa menempatkan menu ini melalui Tata Letak > Tambah Gadget > HTML/JavaScript > Copy code "<div id='demo'>....</div>"  (yang diatas) > Simpan gadget. Setelah itu anda pindahkan gadgetnya ke tempat yang anda inginkan, misalnya di header, footer, diatas postingan,dll.

    Demo Free Live



    Itulah tutorial mengenai "Cara Membuat Active Blending Horizontal Menu"




    Sekian dulu pemberitahuan dari saya..
    See you in my next pages..
    Bye gan..!!


    *jangan lupa komentarnya ya gan.. :D

    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
    DAFTAR ISI :

    0 comments

    Peraturan yang harus diikuti ketika membuat komentar :
    1. Tidak Membuat Link Aktif
    2. Tidak SPAM
    3. Menggunakan Bahasa Yang Sopan
    4. Tidak Berhubungan Dengan SARA, Seks, dan Judi

    Selamat Berkomentar..
    Terima Kasih Atas Kerjasamanya.. ^_^

    Show Konversi KodeHide Konversi Kode Show Emoticon

  • Copyright © 2013 - Nisekoi - All Right Reserved

    ANS Home Powered by Blogger - Designed by Johanes Djogan