Berita Bola, Bursa Taruhan serta Prediksi SKor Bola sesuai Jadwal Bola Hari ini 2013
Home » TRIK BLOGSPOT » Cara Membuat CSS Dock Menu di Blog

Cara Membuat CSS Dock Menu di Blog

Cara Membuat CSS Dock Menu di Blog , Artikel ini menginformasikan tentang

Cara Membuat CSS Dock Menu di Blog

secara lengkap dan detail dengan url http://davitblog.blogspot.com/2011/04/cara-membuat-css-dock-menu-di-blog.html ,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat CSS Dock Menu di Blog ini, namun jangan lupa untuk meletakkan link Cara Membuat CSS Dock Menu di Blog sebagai sumbernya.

CSS Dock Menu, memang sangat cantik jika di miliki dalam sebuah blog karena menu ini sama persis menu di Operating System [ OS ] pada umunya, Misalnya Rocket Dock, Object Dock, dan lain lain

CSS Dock Menu dapat ditemukan dengan mudah di internet. Ada banyak varian menu Dock. Salah satunya yang dibuat oleh Ndesign-studio.com. Mungkin Anda pernah melihat gambar di bawah ini pada Windows, Macintosh dan beberapa OS lain [Operating System]

Cara kerjanya menu ini, jika Anda mengarahkan kursor mouse ke menu ikon, maka akan ada perubahan ukuran ikon. baiklah daripada penasaran lebih baik kita segera mulai cara membuatnya:
Step One :
-Log in to Blogger with your id.
-Please go to Layout.
-Choose Edit HTML.
-Backup the template by clicking Download Full Template.
-Masukan script dibawah ini tepat dibawah kode <head> sehingga seperti ini :
Javascript


<head>

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

Step Two:
Masih di Edit HTML, sekarang cari kode ]]></b:skin> dan tempatkan kode berikut di atasnya.
Sehingga akan tampak seperti di bawah ini.
Javascript


.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>

Step Three:
Masih di Edit HTML, sekarang kita akan menaruh id untuk CSS Dock Menu.
cari kode ini:
Javascript


<div id='header-wrapper'>
.........
.........
</b:section>
</div>

Dan masukan kode berikut di bawahnya, sehingga menjadi:
Javascript


<div id='header-wrapper'>
.........
.........
</b:section>
</div>
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Calendar</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>History</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Music</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Video</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Link</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Portofolio</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' width='30'/><span>Posts RSS</span></a>
<a class='fisheyeItem' href='http://your_site'><img src='http://link_image.png' 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>

Keterangan :
your_site : Silahkan Ganti dengan alamat blog sobat/ link yg akan di tunjuk
link_image.png : Silahkan Ganti dengan alamat gambar icon milik sobat, misalnya gambar Rumah untuk menu Home, dan bisa di upload ke photobucket 

Nah selesai deh,,, gampang banget kan..

Cara Membuat CSS Dock Menu di Blog

Cara Membuat CSS Dock Menu di Blog Posted By :
Published : Rabu, April 06, 2011

Post Title : Cara Membuat CSS Dock Menu di Blog
Cara Membuat CSS Dock Menu di Blog 4.0 stars based on 777 reviews

Prediksi Skor Agen Bola Online Terpercaya

di Rabu, April 06, 2011 - Label: , -