Membuat menu Blog dengan effect Jquery

membuat menu dengan effect jquery, kelihatannya cukup menarik untuk dibahas, oleh karena itu kita akan membahasnya Sebelum memulai mari kita lihat DEMO terlebih dahulu! apakah ini menarik atau tidak Lihat disini DEMOnya nah Sobat tertarik untuk membuatnya?? ayo kita mulai untuk tahap pertama login ke blog masuk ke Edit HTML, kemudian centang Expand Widget kemudian Tekan CTRL + F cari code  ]]></b:skin>
jika sudah ketemu masukkan CSS berikut ini tepat diatasnya

/* Menu */
.menu{
margin: 0 auto;                    /*align the display at the center*/
text-align: center;                /*align the display at the center*/
display:block;
width: 300px;
height: 60px;
}
.menu a{
text-decoration:none;
list-style:none;
color: #FFF;
}
.menu ul{margin:0px 0 0 0;padding:0px 0px 0px 0px;list-style:none;line-height:normal}

.menu li{float:left;margin:0px 0px 0px 1px}

.menu a{display:block;width:auto;height:28px;padding:8px 20px 0px 20px;background:#383838 }

dan setelah itu cari Code </body> kemudian masukkan Javascript dibawah ini tepat diatas code tersebut

<script src='http://bizanniusz.googlecode.com/files/library.js' type='text/javascript'/>
<script src='http://bizanniusz.googlecode.com/files/jQuery.menuEffect.min.js' type='text/javascript'/>
<script src='http://bizanniusz.googlecode.com/files/ini.js' type='text/javascript'/>

oke perjalanan kita belum selesai sampai disitu mari kita pasang code DIV nya dimana pun kamu suka
atau code berikut dapat kamu masukkan ke layout kemudian tambah gatgets kemudian masukkan code berikut

<div class="menu" id="menu1">
Other Element Fade Away
    <ul id="main">
        <li class="page_item current_page_item" style="margin-top: 0px;">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-2" style="margin-top: 0px;">
            <a title="About" href="#">About</a>
        </li>
        <li class="page_item page-item-973" style="margin-top: 0px;">
            <a title="Contact" href="#">Contact</a>
        </li>
    </ul>
</div>

<div class="menu" id="menu2">
Other Element Jump Up!
    <ul id="main">
        <li class="page_item current_page_item" style="margin-top: 0px;">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-2" style="margin-top: 0px;">
            <a title="About" href="#">About</a>
        </li>
        <li class="page_item page-item-973" style="margin-top: 0px;">
            <a title="Contact" href="#">Contact</a>
        </li>
    </ul>
</div>

<div class="menu" id="menu3">
Other Element Blink
    <ul id="main">
        <li class="page_item current_page_item" style="margin-top: 0px;">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-2" style="margin-top: 0px;">
            <a title="About" href="#">About</a>
        </li>
        <li class="page_item page-item-973" style="margin-top: 0px;">
            <a title="Contact" href="#">Contact</a>
        </li>
    </ul>
</div>

<div class="menu" id="menu4">
Other Element Roll up
    <ul id="main">
        <li class="page_item current_page_item" style="margin-top: 0px;">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-2" style="margin-top: 0px;">
            <a title="About" href="#">About</a>
        </li>
        <li class="page_item page-item-973" style="margin-top: 0px;">
            <a title="Contact" href="#">Contact</a>
        </li>
    </ul>
</div>

<div class="menu" id="menu5">
Other Element Roll down
    <ul id="main">
        <li class="page_item current_page_item" style="margin-top: 0px;">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-2" style="margin-top: 0px;">
            <a title="About" href="#">About</a>
        </li>
        <li class="page_item page-item-973" style="margin-top: 0px;">
            <a title="Contact" href="#">Contact</a>
        </li>
    </ul>
</div>

<div class="menu" id="menu6">
Other Element vibrate
    <ul id="main">
        <li class="page_item current_page_item" style="margin-top: 0px;">
            <a href="#">Home</a>
        </li>
        <li class="page_item page-item-2" style="margin-top: 0px;">
            <a title="About" href="#">About</a>
        </li>
        <li class="page_item page-item-973" style="margin-top: 0px;">
            <a title="Contact" href="#">Contact</a>
        </li>
    </ul>
</div>

Code diatas berbeda effectnya tinggal kamu pilih suka yang mana!!

terimakasih selamat mencoba dan semoga sukses
BUKU TAMU DISINI

Share on Google Plus

About Budi Setiawan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.