membuat menu seperti gambar diatas / ala macintonsh.
telah di jelaskan dari ahli blogger seperti www.o-om.com yang menjelaskan tutor nya , dan langsung menuju pembuat nya Ndesign-studio.com.
dan untuk melihat bentuk nya disini.
keren bukan
.
naaaaaaaaaaaaah
disini saya memberikan script JS yang sudah jadi , tinggal bagaimana kamu mengedit gambar nya ?
script nya :
<script src=' http://h1.ripway.com/ewin_coga/jquery.js' type='text/javascript'/>
<script src=' http://h1.ripway.com/ewin_coga/interface.js ' type='text/javascript'/>
<link href=' http://h1.ripway.com/ewin_coga/style.css' rel='stylesheet' type='text/css'/>
Cara meletakkan script nya
1. Login ke blogger
2. Tata Letak
3. Edit Html
4. cari kata <HEAD>
5. Masih di Edit HTML. masukkan script di bawah ini di atas
</body>
</html>
letaknya paling bawah, seperti ini :
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
</body>
</html>
6. Ini langkah terakhir pengeditan, yang saya maksudkan disini pengeditan nya?
memang agak membingunkan,
dimana meletakkan nya script bisa di edit html (</body> "ada 2 body bisa dibagian bawah/atas) dan juga bisa dengan menambahkan add widget yang script nya HTML.
(kalau di taruh di widget HML sebaik nya di bagian atas atau bawah pasti nya ditengah2) berikut yang harus di ubah .
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="NAMA LINK NYA"><img src="http://oom.blog.googlepages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="NAMA LINK NYA"><img src="http://oom.blog.googlepages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="NAMA LINK NYA"><img src="http://oom.blog.googlepages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="NAMA LINK NYA"><img src="http://oom.blog.googlepages.com/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="NAMA LINK NYA"><img src="http://oom.blog.googlepages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="NAMA LINK NYA"><img src="http://oom.blog.googlepages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="NAMA LINK NYA"><img src="http://oom.blog.googlepages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="NAMA LINK NYA"><img src="http://oom.blog.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
</div>
pengeditan nya warna merah merupakan link URL blog/web kamu
warna kuning merupakan gambar nya (" bisa kamu ubah gambar sesuai dengan keinginan setelah di upload dan mendapatkan url dari pada gambar tersebut, baru lah kamu ganti") selamat berjuang yah..
bagi yang mengerti script Js.Css, php akan mudah mengedit² dari pada script2 tersebut .
buat o-om Tks, banget om ..
SEMOGA BERHASIIL..
2 komentar:
gimana cara masukkan emotion di coment?? cara buat tulisan bergerak mengikuti mouse gimn???
Terima kasih
Artikel anda di
http://freeware-scripts.infogue.com/membuat_menu_css_ala_macintosh
promosikan artikel anda di infoGue.com. Telah tersedia widget shareGue dan pilihan widget lainnya serta nikmati fitur info cinema, game online & kamus untuk para netter Indonesia. Salam!
Posting Komentar