1. Login ke akun Blogger anda
2. Plih Layout > Edit HTML, lalu centang Expand Widget Template
3. Cari kode <head> , lalu paste kode berikut di bawahnya:
<script src='http://tipsbloggerzacky.googlecode.com/files/jquery-1.2.2.pack.js' type='text/javascript'/>
<script src='http://tipsbloggerzacky.googlecode.com/files/interface.js' type='text/javascript'/>
4. Selanjtnya, cari kode ]]></b:skin> , lalu paste kode berikut di atasnya:
/* duck menu by feristianickle start
----------------------------------------------- */
.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;
}
/* duck menu by feristianickle end
----------------------------------------------- */
5. Langkah terakhir, cari kode <body> , lalu paste kode berikut dibawahnya:
<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin3-jB9Ai8QPJT61urYe08oWQeW0wB3ImEyN3fbGAwKOJ2BrX_4JbAcOxMKbzvdEXlP72_yvOaEUHyJxvpnFElhyphenhyphenmn3hOLmjMYFAVocUjumIfPti8yMrWSQMDQvD07FwLNEQZdNWqV/s1600/music-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyyaeXQqCxBDhT3Up9g_zl_W7chnLVN8FVV_9Rwx_Zj_Pvjj-CylW835r3V7Lkz2gWuY7S5Mjfxi__02z2OcaepmMJ1Udpe-RgcPxoZmbthBJWI1pGolIxWQDzIA6DCEEn-hyBguo0/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaGjLPFYkKZ3NvZppvlu44jT_QRdP8ikgUbkbLcdupb0qRotbu_tCmE3jCIEAopVblzZv_oXUEAG0SeNu65986f2o4ll0CUzXxHPKaQ4LkMR4KU08-8JV7OYGFJnkEGVe4PMMfLvxB/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNDWqbEofkZaZLk41vqPwl_BRf3JzF7Odv_qSdd5uVWOYAgSthpari4yyjpFXNo_KEj1180eMAyNrvgk7scuNwqO2271UjYGXs_CxQv6865pmaVpIzmk4riO8xQtWTQ_FAdQ07wV_R/s1600/home-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5prT9jsVuTaj6JGDLHZEZfAWVxkv7m4YTjQSsEb644oZJZwzctmOB2SRuUkAL_AhdzekZHCme95r6On3RNJ77knB82IapWXpMxtphaqCH9bmSr4QrMM9w0AQmDl4R8MQlqBrdv2Ax/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnv62XD35UXcNx0o1AfVNOOsuh9Y62rJapZXm-PCqEByV-5cOLABHNcBjzR9FQm0EYBoYxLz84JHdTbZxx9JMfxJ1iwDSOlb46lGFZ4gXl1yN8M1w7xNoIR9Bc0CAkXbh_0AZGVE9k/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL2lcLsXf4WfzzKYbO3-2godNKPQXTq2TWHdxOVIIUwig_HjPcUitCOFCnUuXskLUnj_Vk7gjBeuW0_3EzRq7I9d7paZFcW8rRIQYoFJBCRuh4PBkxfGbsOCXiCsdOzVVZ57N7HcRU/s1600/video-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiklq-BXTxGj07MhiR_npNKoCa9GmZOZe8XQ3KObz5oam-vZ1w1J2J-areHRMyVRkb2mpgsm4g624_W94Rzs6NP9aKIMv5BVFfClKbkWgOcVWhCMCdkk88LKz-Fd0mlxv6FsMs-sZSK/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji7D0DMMciNgDqyBfdDko4fWBj3Q3AOKALlqQMRBqjwAPSI_aVZtHPnzIftzpKAJwOsyiiVMLjiOszMJdU5OS_HhItP7JIZN1A_9HwWaW4jWkuOhMOqIe9YElr8l2fzhJuKsM9nc-W/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSryKjxtXFkoYhcs1_jEhSu03eKqPFc4Q-NmOdyAhwL-DoTaIw_EehCpNnUj_xRf6xZNuS_PzIt1OAaXNQdnTD8-L7MeEEgpII8orPFZjDlkXiwWyAVpmhkwDLVHCMRSAtXUfSc1aA/s1600/calendar-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQndJhCpPre-kf0_AtLZN5Cm4FNESDrzxF_hLepq3RhoM7bj_kojNEG_CfZUhJ8991AEWmjWJhOXro_z48DF0gDUVZbtP3-O7gnztooUuKfeFS7oOT8NWgn1bMdln1AgJApea1kky/s1600/portfolio-trans.png' width='30'/><span>Web</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>
Silahkan costumisasi kode di atas dengan mengganti kode yang berwarna biru sesuai keinginan anda.
5. Terkahir, klik Save Template.
0 comments:
Post a Comment