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>
* 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 <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:
nice info
To e-news:Sama2 sob
Good job sobt...
q coba dualu
makasih mas tutornya ijin bookmark dulu buat nanti kalau mau nyoba heheh :)
@A-NX:SILAHKAN DI COBA DOLO HEHEHE...
@Bang Tegar:Silahkan sob
bagus blog-nya...pertama masuk sudah memberikan kesan mendalam...Isinya juga bagus sob...Ikut gabung blog ini no 54
@cardiacku:Terimakasih sob atas follownya
ada link demo nya gak sob ?? mw buat ane praktekin neh, hehehehee,, ijin nyoba yah sob,, thx
kog ga ada demo nya sobb ???..
biar pada tahu modelnya kayak gimana sobb ???
wah, mantep bener nih blog ente gan...
salut ane..
mampir balik ya gan.. :)
ya gan ko ga ada demo nya
hmm keren jg tp syang pake jquery :(
keren gan, templatenya bisa berubah2 gini.. gimana caranya
@ArifBelum sempat buat demonya sob hehehe...
@ShinobiBelum sempat buat demonya sob hehehe...
@DevanobyTKP GAN
@rubbyBelum sempat buat demonya sob hehehe...
@Cek InfoHEHEHE...
@apakah ini ituUdah ada postnya sob
kalau untuk link ada gak ?
Posting Komentar