Contoh menu tooltip dengan efek jQuery disini gimana bagus kan...
* Cara membuatnya ialah sebagai berikut 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("#navigation").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 <body> dan letakan kode dibawah ini sebelum atau diatas kode <body> 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>
* Terakhi ganti alamat url dengan alamat url kalian masing masing dan bisa diedit sesuka kalian
0 komentar:
Posting Komentar