Ticker

6/recent/ticker-posts

Dock Menu Untuk Blogger

Abe Nick November 12, 2010


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 cuba, 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 cuba memadukan dan membuang beberapa kode CSS yang tidak perlu, menambhakan kode CSS dan membuat versi sendiri. Hampir sama 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 dihosting di mana, yang pasti host directory boleh 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
-Silahkan tuju Design
-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 boleh menempatkan id css dock menu di mana saja sesuai dengan keinginan. Misalnya ditempatkan di atas header, di bawah header, di atas content menu, di bawah content menu atau di atas footer pun boleh. 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://jeritanblog.blogspot.com'><img src='http://i35.tinypic.com/2ly0ft3.jpg' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://jeritanblog.blogspot.com'><img src='http://i33.tinypic.com/16lxy89.jpg' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://jeritanblog.blogspot.com'><img src='http://i37.tinypic.com/2dky845.jpg' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://jeritanblog.blogspot.com'><img src='http://i36.tinypic.com/2qu2m4m.jpg' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://jeritanblog.blogspot.com'><img src='http://i37.tinypic.com/2i7r283.jpg' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://jeritanblog.blogspot.com'><img src='http://i38.tinypic.com/2virpcm.jpg' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://jeritanblog.blogspot.com'><img src='http://i36.tinypic.com/2e5rw34.jpg' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://jeritanblog.blogspot.com'><img src='http://i35.tinypic.com/2zhle2f.jpg' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://jeritanblog.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 butang SIMPAN TEMPLATE
-Selesai

Untuk alamat http://jeritanblog.blogspot.com, silahkan ganti dengan link yang anda siapkan. Untuk alamat link gambar berwarna pink, boleh juga anda ganti dengan gambar yang sudah disiapkan tentunya. Sudah biasa dengan kode CSS? Kalau sudah, silahkan ganti dan ubah 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.

Semoga berhasil :)

Catat Ulasan

8 Ulasan