CSS Dock Menu bisa anda dapatkan dengan mudah di internet. Ada banyak varian dari Dock Menu ini. Salah satunya yang dibuat oleh Ndesign-studio.com. Mungkin anda pernah melihat gambar di bawah ini pada Windows, Macintosh dan beberapa OS lainnya.
Cara kerja dock menu seperti ini, jika anda arahkan kursor mouse ke icon dock menu maka akan terjadi perubahan ukuran icon. Untuk jelasnya, silahkan lihat [demo dock menu].
Ndesign-studio.com sudah menjelaskan tutorial membuat dock menu. Namun terus terang saya merasa kesulitan untuk mengikutinya. Demikian juga dengan banyak tutorial yang sudah saya coba, ternyata ada yang cacat pada kode CSS-nya. Nah, setelah membandingkan beberapa cara membuat dock menu, ternyata belum ada satu pun yang memuaskan (saya kebingungan). Akhirnya saya coba memadukan dan membuang beberapa kode CSS yang tidak perlu, menambhakan kode CSS dan membuat versi sendiri. Hampir sama koq dengan sumbernya dan jadilah Dock Menu untuk blogger yang telah anda lihat di demo tadi.
Cara Pasang Dock Menu Untuk Blogger
Langkah Pertama :
Download file CSS dock menu zip package. Lalu unzip file-nya. Lihat di dalam folder JS ada 2 file javacript yaitu interface.js dan jquery.js. Sedangkan di folder images ada file gambar. Silahkan upload file interface.js dan jquery.js ke javascript hosting anda dan upload file gambar ke image hosting anda. Kalau saya biasanya memakai Google Sites untuk hosting JavaScript dan pakai tinypic.com untuk hosting gambar. Nah, silahkan mau dihosting di mana, yang pasti host directory bisa anda akses dengan mudah. Untuk kemudahan dan kelancaran, silahkan menggunakan semua alamat JS dan alamat gambar yang sudah saya siapkan pada tutorial ini.
Langkah Kedua
-Login ke blogger dengan id Anda.
-Silahkan tuju Tata Letak.
-Pilih Edit HTML.
-Backup template dengan klik Download Template Lengkap.
-Cari kode <head> kemudian letakkan kode javascript di bawahnya sehingga menjadi:
Langkah Ketiga :
Masih di Edit HTML, sekarang cari kode ]]></b:skin> dan letakkan kode berikut di atasnya, sehingga menjadi :
Langkah Keempat :
Masih di Edit HTML, sekarang kita akan menempatkan id untuk css dock menu. Jika anda sudah terbiasa dengan kode HTML template blogger, maka anda pasti bisa menempatkan id css dock menu di mana saja sesuai kebutuhan. Misalnya ditempatkan di atas header, di bawah header, di atas content menu, di bawah content menu atau di atas footer pun bisa. Yang penting, jangan sampai salah meletakkan kode. Biar seragam, saya akan menempatkannya di bawah header.
-Cari kode :
-Letakkan kode berikut di bawahnya, sehingga menjadi :
-Sekarang klik tombol SIMPAN TEMPLATE
-Selesai
Untuk alamat http://bangdel.blogspot.com, silahkan ganti dengan link yang anda siapkan. Untuk alamat link gambar berwarna pink, bisa juga kamu ganti dengan gambar yang sudah disiapkan tentunya. Sudah terbiasa dengan kode CSS? Kalau sudah, silahkan ganti dan rubah beberapa kode CSS yang berwarna hijau di atas. Misalnya anda ingin mengubah ukuran itemWidth: 30, proximity: 70, dan lihat efek animasi yang berubah. Demikian juga dengan beberapa kode CSS lainnya. Sekarang lihat hasilnya pada blog anda. Mudah-mudahan tidak ada hambatan yang berarti, semoga berhasil.
Cara kerja dock menu seperti ini, jika anda arahkan kursor mouse ke icon dock menu maka akan terjadi perubahan ukuran icon. Untuk jelasnya, silahkan lihat [demo dock menu].
Ndesign-studio.com sudah menjelaskan tutorial membuat dock menu. Namun terus terang saya merasa kesulitan untuk mengikutinya. Demikian juga dengan banyak tutorial yang sudah saya coba, ternyata ada yang cacat pada kode CSS-nya. Nah, setelah membandingkan beberapa cara membuat dock menu, ternyata belum ada satu pun yang memuaskan (saya kebingungan). Akhirnya saya coba memadukan dan membuang beberapa kode CSS yang tidak perlu, menambhakan kode CSS dan membuat versi sendiri. Hampir sama koq dengan sumbernya dan jadilah Dock Menu untuk blogger yang telah anda lihat di demo tadi.
Cara Pasang Dock Menu Untuk Blogger
Langkah Pertama :
Download file CSS dock menu zip package. Lalu unzip file-nya. Lihat di dalam folder JS ada 2 file javacript yaitu interface.js dan jquery.js. Sedangkan di folder images ada file gambar. Silahkan upload file interface.js dan jquery.js ke javascript hosting anda dan upload file gambar ke image hosting anda. Kalau saya biasanya memakai Google Sites untuk hosting JavaScript dan pakai tinypic.com untuk hosting gambar. Nah, silahkan mau dihosting di mana, yang pasti host directory bisa anda akses dengan mudah. Untuk kemudahan dan kelancaran, silahkan menggunakan semua alamat JS dan alamat gambar yang sudah saya siapkan pada tutorial ini.
Langkah Kedua
-Login ke blogger dengan id Anda.
-Silahkan tuju Tata Letak.
-Pilih Edit HTML.
-Backup template dengan klik Download Template Lengkap.
-Cari kode <head> kemudian letakkan kode javascript di bawahnya sehingga menjadi:
<head>
<script src='http://sites.google.com/site/hostingfreesite/javascript/jquery.js' type='text/javascript'></script>
<script src='http://sites.google.com/site/hostingfreesite/javascript/interface.js' type='text/javascript'></script>
Langkah Ketiga :
Masih di Edit HTML, sekarang cari kode ]]></b:skin> dan letakkan kode berikut di atasnya, sehingga menjadi :
/* CSS Dock Menu
------------------------ */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{
height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}
]]></b:skin>
Langkah Keempat :
Masih di Edit HTML, sekarang kita akan menempatkan id untuk css dock menu. Jika anda sudah terbiasa dengan kode HTML template blogger, maka anda pasti bisa menempatkan id css dock menu di mana saja sesuai kebutuhan. Misalnya ditempatkan di atas header, di bawah header, di atas content menu, di bawah content menu atau di atas footer pun bisa. Yang penting, jangan sampai salah meletakkan kode. Biar seragam, saya akan menempatkannya di bawah header.
-Cari kode :
<div id='header-wrapper'>
.........
.........
</b:section>
</div>
-Letakkan kode berikut di bawahnya, sehingga menjadi :
<div id='header-wrapper'>
.........
.........
</b:section>
</div>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i34.tinypic.com/9beij4.jpg' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://bangdel.blogspot.com'><img src='http://i37.tinypic.com/a0kq39.jpg' width='30'/><span>Comment RSS</span></a>
</div>
</div>
<script type='text/javascript'>
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)
}
);
</script>
-Sekarang klik tombol SIMPAN TEMPLATE
-Selesai
Untuk alamat http://bangdel.blogspot.com, silahkan ganti dengan link yang anda siapkan. Untuk alamat link gambar berwarna pink, bisa juga kamu ganti dengan gambar yang sudah disiapkan tentunya. Sudah terbiasa dengan kode CSS? Kalau sudah, silahkan ganti dan rubah beberapa kode CSS yang berwarna hijau di atas. Misalnya anda ingin mengubah ukuran itemWidth: 30, proximity: 70, dan lihat efek animasi yang berubah. Demikian juga dengan beberapa kode CSS lainnya. Sekarang lihat hasilnya pada blog anda. Mudah-mudahan tidak ada hambatan yang berarti, semoga berhasil.
Related Post:
or 
or
12 comment:
malem bang del..
wah boleh nich tipsnya..,
penampilan baru bang del, makin keren n OK he..
apalagi tips2nya tuk para blogger..mantep dech
sukses sll buat bang del..
wahh info bagus, ntar2 pasti di praktekan nih, tapi daku blakangan mumet urus 2 blog..dipikir2 satu aja mumet huhu
Numpang BElajar yah bang . . . .
@richarie : urus 2 blog? ah yg bener... setahuku ada 6 deh... ahhahahaha...
canggih amat jadinya ya, gan
mas mo nanya?
klo saya pengennya ada 6 menu dock kok jawaban dari bloggernya selalu wrong div blalaalala
itu kenapa ya mas?
Seep bang del ,pernah coba tapi bingung di tengah jalan
kapan 2 saya coba lagi dengan resep bang del....
matur nuwun..
bang
ko pas aneh uda ikutin semua cara2nya, ampe selesai
udah muncul juga
tapi icon2nya pada numpuk
jadi 1 icon doang yg muncul, numpuk gitu
benerinnya gimana ya?
Mantap Dock Menu-nya
Mantab gan, udah ane pasang...
makasih banget informasinya sangat bermanfaat
foto cewek bugil | artis bugil | gadis bugil | abg bugil | cewek bugil
Foto Cewek Bugil
mantap gan terimaksih atas informasiinya ya
Post a Comment