Home » » Make Fancy Menu Drop Down

Make Fancy Menu Drop Down



Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode <head>
7. Letakkan Kode CSS dibawah ini sebelum atau diatas kode <head> kalau tidak bisa taruh dibawahnya saja.
<link rel="stylesheet" href="https://sites.google.com/site/jayanaktkj/fancy-menu/style.css?attredirects=0&d=1" type="text/css" media="screen"/>
        <script type="text/javascript" src="https://sites.google.com/site/jayanaktkj/fancy-menu/jquery-1.2.6.min.js"></script>
        <script type="text/javascript" src="https://sites.google.com/site/jayanaktkj/fancy-menu/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#navigation > div').hover(
                function () {
                    var $this = $(this);
                    //$this.find('.images').fadeIn();
                
                    $this.find('a.menu').removeClass('menu').addClass('hovered');
                
                    $this.find('.images').stop().animate({
                        'width'     :'230px',
                        'height'    :'390px',
                        'opacity'   :'1.0'
                    },400,'easeOutBack',function(){
                
                        $(this).parent().find('div').fadeIn('fast');
                    });
                },
                function () {
                    var $this = $(this);
                
                    $this.find('div').fadeOut(500);
                    //$this.find('.images').hide();
                   $this.find('a.hovered').removeClass('hovered').addClass('menu');
               
                    $this.find('.images').stop().animate({
                        'width'     :'100px',
                        'height'    :'0px',
                        'top'       :'0px',
                        'left'      :'0px',
                        'opacity'   :'0.9'
                    },600,'easeOutBack');
              }
            );
            });
        </script>

8. Setelah Itu Beralihlah dan cari kode  <body>
9. Letakkan kode dibawah ini sebelum atau diatas kode <body> , kode ini juga bisa juga diletakan di sidebar yaitu dengan cara Add Gadget and HTML/Java Script.
<br clear="all" />
 
        <div id="content">

            <div class="total_images" id="navigation">

         
                <div class="eachs" id="link1">
                 
                    <a href="#" class="menu" style=" width:90px;">Beranda</a>
                 
                    <img src="http://stashbox.org/1072268/bg.png" alt="" width="140" height="140" class="images"/>
                 
                    <div>
                        <ul>
                            <li><a href="#">Sub Item 1</a></li>
                            <li><a href="#">Sub Item 2</a></li>
                            <li><a href="#">Sub Item 3</a></li>

                            <li><a href="#">Sub Item 4</a></li>
                            <li><a href="#">Facebook</a></li>
                         
                            <li><a href="#">Sub Item 5</a></li>
                            <li><a href="#">Sub Item 6</a></li>
                            <li><a href="#">Sub Item 7</a></li>
                            <li><a href="#">Sub Item 8</a></li>

                        </ul>
                    </div>
                </div>

             
                <div class="eachs" id="link4">
             
                    <a href="#" class="menu" style=" width:90px;">Web</a>
                 
                    <img src="http://stashbox.org/1072268/bg.png" alt="" width="140" height="140" class="images"/>
                
                    <div>
                        <ul>
                            <li><a href="#">Sub Item 1</a></li>
                            <li><a href="#">Sub Item 2</a></li>

                            <li><a href="#">Sub Item 3</a></li>
                            <li><a href="#">Sub Item 4</a></li>
                            <li><a href="#">Sub Item 5</a></li>
                         
                            <li><a href="#">Sub Item 6</a></li>
                            <li><a href="#">Sub Item 7</a></li>
                            <li><a href="#">Sub Item 8</a></li>

                            <li><a href="#">Sub Item 9</a></li>
                        </ul>
                    </div>
                </div>
             
             
                <div class="eachs" id="link2">
                 
                    <a href="#" class="menu" style=" width:100px;">Blogger</a>
                 
                    <img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>
                 
                    <div>
                        <ul>
                            <li><a href="#">Sub Item 1</a></li>

                            <li><a href="#">Sub Item 2</a></li>
                            <li><a href="#">Sub Item 3</a></li>
                            <li><a href="#">Sub Item 4</a></li>
                            <li><a href="#">Sub Item 5</a></li>
                         
                            <li><a href="#">Sub Item 6</a></li>
                            <li><a href="#">Sub Item 7</a></li>

                            <li><a href="#">Sub Item 8</a></li>
                            <li><a href="#">Sub Item 9</a></li>
                        </ul>
                    </div>
                </div>
             
             
                <div class="eachs" id="link3">
                 
                    <a href="#" class="menu" style=" width:72px;">CSS</a>
                 
                    <img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>
                
                    <div>
                        <ul>

                            <li><a href="#">Sub Item 1</a></li>
                            <li><a href="#">Sub Item 2</a></li>
                            <li><a href="#">Sub Item 3</a></li>
                            <li><a href="#">Sub Item 4</a></li>
                            <li><a href="#">Sub Item 5</a></li>
                         
                            <li><a href="#">Sub Item 6</a></li>

                            <li><a href="#">Sub Item 7</a></li>
                            <li><a href="#">Sub Item 8</a></li>
                            <li><a href="#">Sub Item 9</a></li>
                        </ul>
                    </div>
                </div>
            
                <div class="eachs" id="link5">
                 
                    <a href="#" class="menu" style=" width:84px;">jQuery</a>

                 
                    <img src="http://stashbox.org/1072268/bg.png" alt="" width="160" height="199" class="images"/>
                 
                    <div>
                        <ul>
                            <li><a href="#">Sub Item 1</a></li>
                            <li><a href="#">Sub Item 2</a></li>
                            <li><a href="#">Sub Item 3</a></li>
                            <li><a href="#">Sub Item 4</a></li>
                            <li><a href="#">Sub Item 5</a></li>

                         
                            <li><a href="#">Sub Item 6</a></li>
                            <li><a href="#">Sub Item 7</a></li>
                            <li><a href="#">Sub Item 8</a></li>
                            <li><a href="#">Sub Item 9</a></li>
                        </ul>
                    </div>
                </div>
             
             
                <br clear="all" /><br clear="all" /><br clear="all" /><br clear="all" />

             
            </div>
        </div>
     
     
        <br clear="all" />


NB:
Ganti tanda # dengan alamat blog kalian masing maising diingatkan url dimulai dengan http://
contoh :  http://www.3xploration.co.cc

10. Save

Good Luck

Semua ini adalah apa yang pernah aku cobain sendiri . . dan aku dapat/mengerti dari teman2 blogger lainnya karena aku hanya seorang blogger pemula yang ingin mengetahui lebih banyak hal lagi . . . . Thank's
Share
Related Post

0 comments:

Archives

Label


ShoutMix chat widget
Guest Book
 

Subscribe Via Email

Enter your email address:

Delivered by FeedBurner

My Blog

Show

Exploration


Show

[Valid Atom 1.0]
Google PageRank Checker Powered by  MyPagerank.Net

Powered by FeedBurner

SEO Stats powered by MyPagerank.Net

Show

Show

Exploration

Welcome To My Blog

I hope you find what you're looking for here . . Thank you for visit to my simple blog . .

Rizky Maulana

This life is a sacrifice and struggle . . and I am just a man who wants to be better than ever . .