Masih semangat bikin postingan kan.
Tutorial kali ini yaitu mengenai tab menu horizontal, yang merupakan lanjutan dari tab menu yang classic, jika belum tahu, baca disini
Kali ini tab menunya akan kita modif sedemikian rupa, sehingga tampilannya akan nonjol n bagus banget kayak di OS Macintosh. Seperti ini nih tab menu yang akan kita buat :
Penasaran kan gimana cara ngebikinnya...
Ini ilmunya aku dapat dari sini
Oke, sekarang waktunya berkreasi....
1. Login blogger/blogspot, trus klik Layout -> Edit HTML
2. Seperti biasa, download file HTML kamu
3. Setelah selasai donwlad, kamu cari kode <head> dan letakkan script ini di bawahnya persis ya!!!
<script src='http://oom.blog.googlepages.com/jquery.js' type='text/javascript'/>
<script src='http://oom.blog.googlepages.com/interface.js' type='text/javascript'/>
<link href='http://oom.blog.googlepages.com/style.css' rel='stylesheet' type='text/css'/>
4. Kemudian cari kode ini </body> dan kamu letakkan script berikut ini di atasnya
<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>
5. Save template
6. Langkah yang paling menentukan, yakni langkah terakhir menempelkannya pada template. Kamu copy script di bawah ini :
<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.o-om.com"><img src="http://oom.blog.googlepages.com/rss.png" alt="rss" /><span>RSS</span></a>
</div>
7. Klik Layout -> Page Elements -> Add a Page Element -> Java Script
n kamu paste script tadi ke dalam kotak yang tersedia
Sekarang Blog kamu jadi lebih keren kan.
oke om terima kasih banget atas tip dan triknya
ReplyDeleteom kalo tabmenu yang diletio tu gmana yaa? mohon bantuan, terimakasiiiiiiiiih
ReplyDelete:) tank bgt om blog gua jadi lebih keren ......
ReplyDeletemana game nya????????????????
ReplyDeleteok om trism ilmunya sangat membantu
ReplyDeletehttp://download-serba-gratis.blogspot.com/
Trimz ye Om ataz ilmunyee....!!!
ReplyDeletesalam sillaturrahmi ya om!!!
om,nnti mampir keBlog Aye ya...!!!
(http://webgx.blogspot.com/)
Mohon pencerahanya mas,
ReplyDeletegimana c caranya membuat link dari navigasi bar dibawah ini agar bisa menuju halaman baru.lihat gambar mas dibawah ini.
http://i1116.photobucket.com/albums/k572/awx1/navbar2.png
pada menu Computer,Games,Software apabila diklik bisa menuju halaman yang diinginkan Gimana??.
Maaf mas msh baru ngeblog ne?tlg blas ke email sy dunk.
ini blog sy:http://myrecoveryboiler.blogspot.com/
terimakasih banyak mas ats bantuanya.salam dari saya WALDA diriau.
Menarik ini infonya.. Lanjutkan lagi gan berikan yang terbaik..
ReplyDeleteAgen Poker
Agen Poker Online
Agen Poker Terpercaya
Poker Online
Poker Terpercaya
Bandar Domino
Bandar Domino Online
Agen Domino
Judi Poker
Taruhan Poker
Bandar Poker