Blogger Note

Article :

Membuat Menu Tooltip Dengan Efek JQuery (Smart Menu)






Saya rasa udah 1 minggu blog ini gak posting he..he..he.. ,  ok sekarang kita mulai ke topiknya, pada tutorial sebelumnya Blog Musa Khairul Umam di Kategori Tips Modifikasi Blog sudah menerangkan cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka akan tetapi pada hari ini saya akan share Membuat Menu Tooltip Dengan Efek JQuery (Smart Menu) ok langsung saja tutorialnya di bawah
* login ke blogger
* Masuk ke Rancangan dan pilih Edit HTML
* Cari kode <head> dan letakan kode dibawah ini sebelum atau diatas kode <head>



<link href='https://sites.google.com/site/jayanaktkj/css2/smartmenu.css' rel='stylesheet' type='text/css'/>
<script src='http://s3.envato.com/files/223265/js/jquery-1.3.2.min.js' type='text/javascript'/>
        <script src='http://s3.envato.com/files/223265/js/smartmenu-min.js' type='text/javascript'/>

        <script src='js/syntaxhighlighter/scripts/shCore.js' type='text/javascript'/>
        <script src='js/syntaxhighlighter/scripts/shBrushJScript.js' type='text/javascript'/>
        <script src='js/syntaxhighlighter/scripts/shBrushXml.js' type='text/javascript'/>
        <script type='text/javascript'>
            jQuery(window).ready(function(){
                jQuery(&quot;#navigation&quot;).Smartmenu({animationDuration: 350});
            });
            SyntaxHighlighter.all();
        </script>
<style type='text/css'>
           body {
               background : #333;
           }
          
           #wrap {
               margin : 50px auto 0px auto;
               width : 750px;
           }
          
           #description {
               margin-top: 80px;
           }
          
           #description ul {
               margin: 0px;
               padding: 0px;
               list-style: none;
           }

           h2 {
               font-family: helvetica, arial;
               font-size: 15pt;
               color: #888;
           }

           pre {
               font-size: 8pt;
           }
        </style>

* Alamat url https://sites.google.com/site/jayanaktkj/css2/smartmenu.css bisa diganti dengan ini https://sites.google.com/site/jayanaktkj/smartmenu/smartmenu.css yaitu menu dengan background transparant

* Dan terakhir cari kode <div id='header-wrapper'> dan letakan kode dibawah ini setelah atau dibawah kode <div id='header-wrapper'> kode dibawah ini juga bisa diletakan di sidebar yaitu dengan tambah gadget dan lalu pilih HTML

<div class='smartmenu' id='navigation'>
                <ul>
                    <li>
                        <a href='http://jaya-tkj.blogspot.com'>Beranda</a>
                        <ul>
                            <li>

                                <a href='alamat url'>Tips dan Trik</a>
                            </li>               
                            <li>
                                <a href='alamat url'>My Blogger</a>
                            </li>               
                            <li>
                                <a href='alamat url'>My Wordpress</a>
                            </li>               
                            <li>

                                <a href='alamat url'>Terbaru</a>
                            </li>               
                            <li>
                                <a href='alamat url'>Populer</a>
                            </li>               
                            <li>
                                <a href='alamat url'>Media</a>
                            </li>               
                        </ul>

                    </li>               
                    <li>
                        <a href='alamat url'>Wordpress</a>
                        <ul>
                            <li>
                                <a href='alamat url'>Tips dan Trik</a>
                            </li>               
                            <li>

                                <a href='alamat url'>Tentang Saya</a>
                            </li>               
                            <li>
                                <a href='alamat url'>Terbaru</a>
                            </li>               
                            <li>
                                <a href='alamat url'>Populer</a>
                            </li>               
                        </ul>

                    </li>               
                    <li>
                        <a href='alamat url'>Template</a>
                        <ul>
                            <li>
                                <a href='alamat url'>Blogger</a>
                            </li>               
                            <li>
                                <a href='alamat url'>Wordpress</a>

                            </li>               
                        </ul>
                    </li>               
                    <li>
                        <a href='alamat url'>Tutorial</a>
                        <ul>
                            <li>
                                <a href='alamat url'>Blogger</a>
                            </li>               
                            <li>

                                <a href='alamat url'>Wordpress</a>
                            </li>               
                            <li>
                                <a href='alamat url'>Photoshop</a>
                            </li>               
                            <li>
                                <a href='alamat url'>Corel Draw</a>
                            </li>               
                        </ul>

                    </li>               
                    <li>
                        <a href='alamat url'>Rss Feed</a>
                    </li>               
                    <li>
                        <a href='alamat url'>Galeri</a>
                        <ul>
                            <li>
                                <a href='alamat url'>Foto</a>

                            </li>               
                            <li>
                                <a href='alamat url'>Wallpaper</a>
                            </li>               
                            <li>
                                <a href='alamat url'>Screensavers</a>
                            </li>               
                            <li>

                                <a href='alamat url'>icon</a>
                            </li>               
                        </ul>
                    </li>               
                </ul>
            </div>

* Terakhir ganti alamat url dengan alamat url kalian masing masing dan bisa di edit sesuka kamu

*Jangan lupa komentarnya ya

21 comments:

16 September 2011 19.53

nice info

17 September 2011 03.38

To e-news:Sama2 sob

17 September 2011 23.11

Good job sobt...
q coba dualu

18 September 2011 00.01

makasih mas tutornya ijin bookmark dulu buat nanti kalau mau nyoba heheh :)

18 September 2011 00.16

@A-NX:SILAHKAN DI COBA DOLO HEHEHE...

18 September 2011 00.16

@Bang Tegar:Silahkan sob

18 September 2011 16.50

bagus blog-nya...pertama masuk sudah memberikan kesan mendalam...Isinya juga bagus sob...Ikut gabung blog ini no 54

19 September 2011 01.18

@cardiacku:Terimakasih sob atas follownya

19 September 2011 02.09

ada link demo nya gak sob ?? mw buat ane praktekin neh, hehehehee,, ijin nyoba yah sob,, thx

19 September 2011 02.44

kog ga ada demo nya sobb ???..
biar pada tahu modelnya kayak gimana sobb ???

22 September 2011 02.58

wah, mantep bener nih blog ente gan...
salut ane..

mampir balik ya gan.. :)

22 September 2011 04.31

ya gan ko ga ada demo nya

22 September 2011 08.32

hmm keren jg tp syang pake jquery :(

24 September 2011 21.18

keren gan, templatenya bisa berubah2 gini.. gimana caranya

26 September 2011 00.51

@ArifBelum sempat buat demonya sob hehehe...

26 September 2011 00.51

@ShinobiBelum sempat buat demonya sob hehehe...

26 September 2011 00.51

@DevanobyTKP GAN

26 September 2011 00.52

@rubbyBelum sempat buat demonya sob hehehe...

26 September 2011 00.52

@Cek InfoHEHEHE...

26 September 2011 00.52

@apakah ini ituUdah ada postnya sob

6 November 2011 16.51

kalau untuk link ada gak ?

Posting Komentar