Your logo Here

Feb 10, 2009

Tampilan menu Star Dock

by Goo-blog 7 comments



Kampanye damai pemili Indonesia 2009
Percantik blog anda mengunakan menu Star Dock dari iblographics. Kata star dock mungkin tidak asing bagi anda, kalau tidak salah ini terdapat pada tampilan windows tapi kali ini coba kita gunakan untuk mempercantik blog anda dengan mengganti menu standar anda dengan tapilan ini. Cara ini dari iblographics, semoga menambah koleksi tips trik blog anda

kita memanfaatkan menu yang sudah di bikin oleh iblographics, jagan lupa centang Expand Widget Templates
1. Kita panggil code java script yang sudah di bikin itu,

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

letakkan code warna biru di bawah <head>

2. Kemudian kalau sudah kita masuk ke kode css, biar temen tau code css tu letaknya di antara code <b:skin><![CDATA[/* dan code //--><!]]></script>
</head>
, sudah tau sekarang copy code ini

/* Dock menu by www.iblographics.com
----------------------------------------------- */
.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;
}

/* Fin del dock menu
----------------------------------------------- */


jika suda letakkan code ini dibawah code <b:skin><![CDATA[/*

3. Sampai sini simpan dulu biar ngak binggung, jika sudah lanjutkan dengan menaruh code HTML nya pada body templete, cari code <body> kalau sudah copy paste code HTML di bawah ini dan letakan persisi di bawah code <body>

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQn-ny4I/AAAAAAAAAUc/yy_PBS_YWrc/s1600/music-trans.png' width='30'/><span>Home</span></a>

<a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACbeYOO5I/AAAAAAAAAUk/_Zfiy_TiZtA/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQeWOkPI/AAAAAAAAAUU/-1lW9Q0I4-A/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQfGZMrI/AAAAAAAAAUM/7HS7vAdCjls/s1600/home-trans.png' width='30'/><span>Clock</span></a>

<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP2ct3iI/AAAAAAAAAUE/Wq7jf6tILFE/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP5KHlaI/AAAAAAAAAT8/0PJpHH9DzLE/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP6w_J0I/AAAAAAAAAT0/RXNWTRfB9po/s1600/video-trans.png' width='30'/><span>Email</span></a>

<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACPp7mBQI/AAAAAAAAATs/UKxtQ51vOF0/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACBJFd9ZI/AAAAAAAAATk/oJ5lL_SGpFI/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUABzssGnaI/AAAAAAAAATc/hxJx2j7VRQA/s1600/calendar-trans.png' width='30'/><span>Web</span></a>

<a class='fisheyeItem' href='#'><img src='http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUABnXdQNdI/AAAAAAAAATU/jPWR6TthALk/s1600/portfolio-trans.png' width='30'/><span>Web</span></a>
</div>
</div>

<script type='text/javascript'>

$(document).ready(
function()
{
$(&#39;#fisheye&#39;).Fisheye(
{
maxWidth: 15,
items: &#39;a&#39;,
itemsText: &#39;span&#39;,
container: &#39;.fisheyeContainter&#39;,
itemWidth: 30,
proximity: 70,
halign : &#39;center&#39;
}
)

}
);

</script>

Jika sudah simpan dan lihat bentuknya mirip ngak kaya gambar saya ini posisinya
star dock
Nah jika hal ini menganggu header anda anda bisa meletakkanya di mana saja asal pada body template bukan tambah gadget pada blogger ya, contoh
star dock
hehehehehehe bisa jugakan, mungkin temen-temen lebih bisa dari saya cara letakin yang paling mecing

4. ganti kode yang warna merah dengan alamat dan sesuaikan dengan icon ya, bisa juga iconnya anda ganti terserah mau kaya apa saya yakin anda lebih kreatif dari saya, pokoknya dimodif kaya apa teserah yang penting sumbernya jagan, hargai hak cipta oke. Mudah-mudahan blog anda makin cuwantik

blog comments powered by Disqus

Goo-blog
Goo-blog blogger yang terus belajar blog serta teknik seo
d_ccol_kusuma97@yahoo.com

Subscribe feeds via e-mail
Subscribe in your preferred RSS reader

Subscribe feeds rss Recent Entries

Categories

Top News Links

Technorati

Technorati
My authority on technorati
Add this blog to your faves