DJ Site: 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......

11 comments:

nartiSeptember 19, 2010 at 12:00 PM
penasaran nih....
sdaSeptember 19, 2010 at 12:02 PM
hasilnya boleh juga, tapi koq males ngubek2 HTML yah...
windflowersSeptember 19, 2010 at 1:49 PM
mmhhh...keren deh kayanya hehe...:) tar coba ah...
Rela RahmahSeptember 19, 2010 at 2:11 PM
wiih script nya panjang..

anuuu, tadi aku ke dj-note, g ada previewnyaa.. ah inetku masih lola ky nya =.="
BejoSeptember 19, 2010 at 2:13 PM
wah. menarik
coba saja kalo di windows bisa. tinggal masukin kode ke notepad trus simpan trus jadi deh... seandainya saja...

salam human. hahaha
maaf akhir akhir ini sibuk
Manchester United Tech | Berita Sepak BolaSeptember 19, 2010 at 2:47 PM
wah, banyak JSnya nih, pasti bikin blog tambah berat..
makasih udh share sob, happy weekend..
TUKANG CoLoNGSeptember 19, 2010 at 3:13 PM
tumben nih aku liat aplikasi kayak gini. aku liat dulu previewnya ya..:)
Natural NusantaraSeptember 19, 2010 at 3:44 PM
siang kang, minggu kog hujan lebat yah...jadi males kemana-mana, he he he nongkrong deh di KasKUS sambil udud klepas klepUS sesekali nyaplok criping yang bikin perih usUS dan akhirnya posting di blog lalu rencana mau Tidur NglipUS, he he.
Eh kang keren nih, rasanya bisa juga tidak ditempatkan di footer, misal ditempatkan di bawah header buat bikin Featured Post bisa kan kang? Bagus lho...Bikin dong kang buat yang dibawah header...he he keren asli, dan gambarnya bisa yang gedhe2 to kang?
Dah ya kang bobok dulu...nunggu hujan reda lalu mandi he he
Laksamana EmbunSeptember 19, 2010 at 4:12 PM
Thanks infonya kang, sggra dipelajari..
rizalSeptember 19, 2010 at 4:30 PM
ini baru tutorial yang fresh nih...bisa bikin blog jadi keren sob, ane coba pratekin dulu di blog tes ane hee...he...

rajin2lah posting tutorial biar ane bisa curi ilmu mas dj disi hee..he..
Berpikir PositifSeptember 19, 2010 at 4:52 PM
ternyata bisa bikin dock menu seperti ini di blogspot ck ck cantik sekali sob, semakin berkembang aja blogspot saya ingin ke blog yang satu dulu sob

Sunday, September 19, 2010

Membuat Dock Menu Ala Mac OS Di Blogspot

11 comments: