Auto4blog: Membuat Dock Menu Ala Mac OS Di Blogspot

Selamat Siank Sahabat DJ Site Semua,

Huahh... akhirnya sampai di hari minggu lagi wkwkwk.... Sebenernya sih saya mau libur posting, tapi rasanya berat untuk ninggalin blog ini hhe jadi saya posting dulu deh klo masalah Blogwalking ya kaya biasa nyusul haha...

Setelah kemaren saya posting tentang Mimpi, hari ini saya mau balik lagi ke konten semula yaitu Technology. Tapi saya mau ngutip komentar dipostingan kemaren dulu, Soalnya menurut saya bagus untuk jadi kata-kata motivasi yaitu Komentarnya Bozz oOz, Begini Komentarnya:

"Orang Yg mau maju itu orang2 yang berani "bermimpi" seperti kang feridinand lho. Percaya ga, kalau banyak orang yang takut "bermimpi", menurut saya itu bodoh, karena apa????
Yah karena "mimpi" ajah yang 'GRATIS' ga brani...apalagi mau yang real yg musti dibayar dengan usaha dan keringat...jauuuhhhh....tul ga?"

Yupz, bener banget tuh mimpi itu Gratis kawan, ngapain mesti takut duluan hhe....

Sebelum posting kaya biasa kita Bersulang Dulu... Cheerrsss.....(glek..glek..glek..)

Hari ini saya mau ngajak anda membuat Dock Menu Ala Mac OS, kenapa Mac OS? karena seminggu ini PC Windows saya mati jadi terpaksa pake Mac OS haha.... GUBRAK!!!

Bentuknya kaya Image diatas atau klo mau Preview Silahkan Menuju Blog saya yang ini: DJ Note Scroll dan lihat Bagian Footer paling bawahnya yang ada Icon-iconnya...

Terus gimana cara bikinnya?

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

<head>

Klo udah ketemu, silahkan masukkan Js dibawah ini tepat dibawahnya:

<script src='http://djferdinand.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://djferdinand.googlecode.com/files/interface.js' type='text/javascript'/>

Udah belum? klo udah silahkan beralih dan cari kode ]]></b:skin> terus masukkan Kode CSS dibawah ini tepat diatas ]]></b:skin>

/* dock2 - bottom */
#dock2 { width: 100%; bottom: 0px; position: absolute; left: 0px;}
.dock-container2 { position: absolute; height: 50px; padding-left: 20px;}
a.dock-item2 { display: block; font: bold 12px Arial, Helvetica, sans-serif; width: 40px; color: #000; bottom: 0px; position: absolute; text-align: center; text-decoration: none;}
.dock-item2 span { display: none; padding-left: 20px;color: #FF0000; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.dock-item2 img { border: none; margin: 5px 10px 0px; width: 100%; }

Klo udah ini dia HTML buat manggilanya dan terserah anda mau tempatkan dimana, di Add Gadget bisa, dan klo mau di taruh di HTMLnya pun bisa, terus saya naronya dimana? saya taruh di Bawah kode <div id='page-nav-footer'>

<div class='dock' id='dock2'>

<div class='dock-container2'>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'>
<span>Home</span><img alt='home' src='http://i785.photobucket.com/albums/yy131/djnand/Home_Dock.png'/></a>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'>
<span>Contact</span><img alt='contact' src='http://i785.photobucket.com/albums/yy131/djnand/Email_Dock.png'/></a>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'>
<span>Portfolio</span><img alt='portfolio' src='http://i785.photobucket.com/albums/yy131/djnand/Portfolio_Dock.png'/></a>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'>
<span>Music</span><img alt='music' src='http://i785.photobucket.com/albums/yy131/djnand/Music_Dock.png'/></a>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'>
<span>Movie Download</span><img alt='video' src='http://i785.photobucket.com/albums/yy131/djnand/Video_Dock.png'/></a>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'>
<span>History Of Indonesia</span><img alt='history' src='http://i785.photobucket.com/albums/yy131/djnand/History_Dock.png'/></a>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'>
<span>Technology</span><img alt='technology' src='http://i785.photobucket.com/albums/yy131/djnand/Link_Dock.png'/></a>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'>
<span>Calendar</span><img alt='calendar' src='http://i785.photobucket.com/albums/yy131/djnand/Calendar_Dock.png'/></a>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'><span>RSS</span>
<img alt='rss' src='http://i785.photobucket.com/albums/yy131/djnand/Rss_Dock.png'/></a>

<a class='dock-item2' href='http://dj-site.blogspot.com/' target='_blank'><span>ComentRSS</span>
<img alt='comentrss' src='http://i785.photobucket.com/albums/yy131/djnand/Coment_RSS_Dock.png'/></a>

</div>
</div>

<script type='text/javascript'>
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>

Klo udah Save Template anda dan lihat Hasilnya... Klo anda ngikutinnya bener pasti berhasil hhe

* yang saya beri warna merah silahkan ganti sesukanya, klo yang dikode css itu buat Font tulisannya, klo yang di HTML itu Url tujuannya....

Buat Sahabat DJ Site Semua, Happy Blogging n Happy Sunday......

Membuat Dock Menu Ala Mac OS Di Blogspot

Arsip Blog