Cara Membuat Menu Cantik BlogSpot ( Fish Eye Menu )

Bismillahirrahmaanirrahiim....

Assalamu'alaikum Blogsphere!!!

Cara membuat menu cantik di blogspot ? emang apa an sih itu!! emang pake make up yah??? :D wkwkwk... sebenarnya sih biasa-biasa ajah, cuma bisa lebih sedikit menarik dalam menghias blog anda.

Apakah Anda sudah pernah lihat menu ini sebelumnya? dan ingin memasangnya diblog Anda ?( Ya/ tidak) dan yang penting kali ini ane akan memosting tutorial yang Ane dapet dari webnya orang luar, Alias turis.... iblographics dan didukung dari blognya Goo Blog,...

untuk melihat contohnya bisa lihat diblog http://fisheyedockmenu.blogspot.com/

Oke deh langsung ajah yah....

Seperti biasa kita mau ngedit Html :

1. Loggin >> Layout/Tata Letak >> Edit Html>> Expand Widget
2. Cari kode dibawah ini

<title><data:blog.pageTitle/></title>

kemudian taruh script ini diatasnya

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

3. Letakkan kode ini diatas </head>

/* 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
----------------------------------------------- */

4. Selanjutnya silahkan cari kode <div id="content-wrapper"> dan pastikan anda masih meng-expand template anda untuk lebih mudah anda mencari silahkan tekan ctrl+f dan masukkan kode <div id="content-wrapper"> , dan kalau sudah masukkan kode dibawah ini ;

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYvXlH5LiSiczelCqkvkr1DiR7hoUC5IoWY5psFjsL36ZCB7sFZUQm2xlNb5F2Tj7HwmGAfB7DAza7llF3_3osCziX0y4Xv1C3g2x2kqJOsV2Oxr9Mc5WNFrphKsoPbKmD1oekUZhv/s1600/music-trans.png' width='30'/><span>Home</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKU-bzHKvK5-4V2EBTwFqbqTU-b9dLyoCRGWKxZngtqn01I9phIjsQjy9lBpwsJ-7xNZHC5SaggpQWhDdWlf-v04NOqzQroD6L9L4qAqH_sbRJePjA2mQTEp6l8NchuWYEQf7pfF70/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_gqwNBR9dhN9c2uY3aaj56sv8mQjlLLvKJvv4hezYbucdw0Rs2l0_h7zwXdUtwl61EbHCwSAqTY4-M1vzyyRtYc7q5UPUO5GwevemNwPjsdm1ecZx3LfNfuz2LVMFM6QDDKLAuQxi/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXSCHmW49m_a40cLPFm987dmkxiZQuOjmPyqCbjHaAjvRKEpanPEpdOBDjcp9f-y321-xpuqTkV48SxpoHRNOOFZ8IxbOpLM_7GbOFHPwvBa0C0ZZTt-81NX4xvNO-gy3AL3icR8xA/s1600/home-trans.png' width='30'/><span>Clock</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRw2GWKYl7GGs1TaDFlb8Q4GXk8OklmFIXN9FEePcr7fRaNCyIbayrwQvQDkF7VW6xoPUifB65FlKclOJob4BApjLqMvOojnE2uGfhm5TmB4LaqRhvcqCJBVvdB3OAUOr-UlCIa3E9/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDbi3J4XiP5DqRcdpLV6nCZLtk9QEVGeeKhezUusvdhU14y3-UIL1NPiPn_VmiDNKbS0KmVE4Rm-OEoZ3VYq6QHCRa9w8LkRpmlD3CoiU7x2HK2yUr27_nSdEVlle5G4VG-YTj8GGA/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjln0lGk4lhjFz6ghcMjPLkcLG-4iYjxjrxxdBU17ohAmuBJzLoiS6Z9Yxu7Ip9CR31-quBA9gjRFG9wCb59xOF9-ekAM_cZCbwhfyOX8D0rLg-AchFfHcMd5iWHTHacG45MSy2PSw7/s1600/video-trans.png' width='30'/><span>Email</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK_i-8vtHfV52EWdpciiQy8J0ZwyAKc5jzDLc2MK8MYmYQPdZFTXr3SmSyAc3eoVRIDsYRqW-F3LJq87aD_-RCyfPhtSeE9aA2B41bXxDHUFpFr-FjkcwMIm9BKm3cKeSAcMpKsGrM/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7IGKpHwUb2ziuzl6koyazSTnonXDnEL8cI2c4K0L3UP5gbz_dmH5fJFMO745OCDogWHCQ-GlO5XPXAjFInFLfnH0fEsgQ5kX6lO3arXGDvCHINFqu1AWSj1GfnujQEj1bcjqVqEC9/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOa_x1IYPfOQ_0_19ge8mj7MhIYP9Qo10GDJRka_sQWnb81AXFqYf_8UhIV3Tey7ijpNDDKxrSlDyI4C27_6gDbAZfEwsxIxwXg7kR4GCExLNZXtf7bX8v4-OuSBSdC7cKXOWBiQIY/s1600/calendar-trans.png' width='30'/><span>Web</span></a>

<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zbnEwB1wISiHUH4WEKLtjFSvOSaDFZ44xFTSxnxNmu8DIDH0LNk4sMwAusb-wszpyRYN1evZvJiy4t76SuV0l-27NBtX-quZgUO0IcleVOMjGpMKBLqpW_tv3jXpzhF0tj4Hueei/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>

5. Save tamplate anda dan SELESAI

Keterangan langkah 4 :

• Kode # yang berwaran merah diatas kamu ganti dengan link yang kamu inginkan dan kata-kata yang berwana merah yang lainnya bisa anda modifikasi sendiri sesuai keinginan anda...
• Sedangkan kode yang berwana hijau Anda bisa menggantinya dengan image url sesuai keinginan anda...

bila ada hal yang kurang dimengerti atau adanya kesalahan dari saya silhkan beri komentar saja di bawah.... thanks...

SELAMAT MENCOBA !!!