Pernahkah Anda melihat animasi dock menu pada blog anda???…..
Sudah atau belum, berikut ini adalah tutorial tentang menambahkan animasi Dock Menu pada blog-blog blogger.
- Sebelum memulai proses hack ini, direkomendasikan untuk membuat back up template blog anda.. Klik Customize > Layout > Edit HTML. Download full template dan centang pada bagian “Expand Widget Template“.
- Temukan tag “<head>” pada blog
<head>
- Tambahkan code dibawah ini dibawah line “<head>”
<script src=’http://iblographics.com/jquery.js’ type=’text/javascript’/>
<script src=’http://iblographics.com/interface.js’ type=’text/javascript’/>
- Lakukan penambahan coding pada skin template anda dengan terlebih dahulu mencari tag “]]></b:skin>”
]]></b:skin>
- Tambahkan code dibawah ini sebelum tag “]]></b:skin>”
/* Dock Menu oleh 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;
}
/* Akhir Dock Menu
———————————————– */
- Temukan tag “<body>” pada blog blogger Anda
<body>
- Setelah tag “<body>” tambahkan code dibawah ini.
<div class=’fisheye’ id=’fisheye’>
<div class=’fisheyeContainter’>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx9ksWeGo2T2nsy3eMPf7yWyDSxZHeY8n05EGF4wOmYobKT2ha7oddaNwpRCXPI8__BHJMXWjGjLdZivZBcH4EvPvYPLOxvPZTTYDuy7k5OkRsUzcL5NxQ2miPfhXCEcwGQwC8oqqO/s1600/music-trans.png’ width=’30′/><span>Home</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr8UdoM-benGj4TtvrUnLxIl-NASTk7zlZSLcNEiEfmSQzrc_xNOT3mMK1K_kVjTUAtzaQo13rb9p6XxCajqiHgy274MZc09MUskZCDL4yc74JRh3WPfaCjQGloU0tbHbCgIu-225_/s1600/rss2-trans.png’ width=’30′/><span>Email</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7jHLOpkPKiuduz9wjEFoIZnzl3zqq6rI4TYOQq87Z7ndJdlALso5y3Xc2WX2iQxTXvchBlLBkKYHC928Mm-rGc8MoLg0Vgp-wVGTjLRAvmcysGuM5DkeVbKMmkjoq95w0SwrsVru1/s1600/link-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd4RVv0YI2v_luVkO7NNnpAmHK_aGUpdLzQOxOqCOCzPkp6IgoPkOSkSZtwZwhJj104wSBa4Zopdf3yozmpmcxNHuG8rhvJnAyCGs9I1AU-95wXOsPR3AbGdwo4ZunDEA8D17bKPly/s1600/home-trans.png’ width=’30′/><span>Clock</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD_SX2xjSHPyX__uBEIqj4lRtxRejlybzKiSF49tZ8LBtSVz7renAbk6lcP3ET_m3CnOGqC1s1apHBdt-SNacpcrhMUP8gsOOmo4osf9hx5n2S8IP8AFqym4vGRxjucnhrjHSZWzkc/s1600/history-trans.png’ width=’30′/><span>Web</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0iGAcuT207_2cMr9B1naBIREdg48TMw0ofEywhtbPURCwNA2Ce17Adwf4XZYsGur-ba0LPWu9LaESxfOM0SdVgABRuf-b3UNXD6WlOFObAV5ChhtBh7wUV1qpRe6Q2ZefRFMCNYkw/s1600/email-trans.png’ width=’30′/><span>Home</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwEjIeaC6ZY85cLyvqUBxS86_geKW3aMyhjAunYo6ZsnWUfN7JWGkisWQQ4NDcaLcKr8avBeJdEDRvaD5IyVHbcBIJEVCDJwthAFgDVVgMPEWIv1n01e0x4feg46o4zDQY7vd0lu4n/s1600/video-trans.png’ width=’30′/><span>Email</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6uosN6Zi_wtxZWTjF1LVxVawQ9a96krelNdSCIXkNcopchdxC_ZM4S54IxMU61Hp3F4TVHm5ThiOUvPxjrmXTD7jP8BgJdLdLq3uNCs9ahcMJyQduS4BGO7IcdalBZcm9JXzePef_/s1600/rss-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLTDY4olRDedig6GrzCj5Zk6Q31k09RqqBuPH9fGINfe6GFnipeuI8mxx7Lf8jdVqJOhQ9T1cn21zfsbdNDonTwIM8lDCNMEX_OUtoFwOsjJEFd7dOlYn8tY29PkQczvO3wd1miF_H/s1600/email-trans.png’ width=’30′/><span>Clock</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw4LgcDfBwCHGeeb5fzoEuYcuC0W2d8cUT18jCdn4tmianjgm4N6Sha1ixLzQO0yJ5beGbjruaEjYVKiYZVGKiHdrLOkklpoxQXiyBU1CxAADbqjE2cU8v_CW6r32rl8BQsHW9-L6n/s1600/calendar-trans.png’ width=’30′/><span>Web</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmxVeGsAoDW45pa8Dkirdz5r7dOVQpEaTm2dC13eU1lPmDEue2OwVTI1xfwtOG3fbnvTbJ0LiCaiYIQ_lxYeovi91RHEifGkjkmbQjOGOvT5_l_AMWOTwnRMk8oqdFnACodSu6pI5d/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>
- Langkah terakhir adalah ganti tanda “#” dengan url atau link blog blogger Anda
- Berikut ini adalah tampilan “Layout” dengan Dock Menu
Selamat Mencoba!!!
Referensi : http://iblographics.com/
0 comments:
Post a Comment
Informasi Pilihan Identitas:
Google/Blogger : Khusus yang punya Account Blogger.
Lainnya : Jika tidak punya account blogger namun punya alamat Blog atau Website.
Anonim : Jika tidak ingin mempublikasikan profile anda (tidak disarankan)