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/AVvXsEhcXWv_aDOrmWPkv-PYPNegNPkN9mkrBJk_PzUsfuXM5XS6AggMIO26RcXM0OqDWKsmHbrsyEnkklfvKJIE7shf_F1O5aSqyo-lpSqxrOzAsQw8QXKihzZIGLDQuTCGiifBZIS4VuRI/s1600/music-trans.png’ width=’30′/><span>Home</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidpL4dAi-NQpbgzsbEfvl9LrAe95KkwqUFWXKYsU-Eoh40NAu3hbvG_cUvtDEfp2kym4JdisRYiap3VQWQKLVYsbCY9vu98AyOxPKZW3Fx0PMxLzC0hdUnvBLwddxc1M7JYjiH0vz3/s1600/rss2-trans.png’ width=’30′/><span>Email</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje_maptw14kl1HHGKvTRawqoDD4VHzLcQuzQLe983AGrX2OsJ2pZPbyARKFCZAdEjmYdTopu5AFbgL9esi4wdIXZnuzztY7NgP3fp8dtkYWDQx6i1mHva0ybYnchyphenhyphenhpDGmyDcL0wWK/s1600/link-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLwlpcbnRYc8u2FU_YseCBlRd2Q_2kEOuatfLRmTq9lppZYoC0wKSpAS7uKnSti4hGHD10lp79ORWcqBb8eJJg9PBl96tHURBq3AvyhyphenhyphenMHLyb8yjJADAJfzWGCCmJKUT2DABi3pk6i/s1600/home-trans.png’ width=’30′/><span>Clock</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkWFrSVeGJP0xAD1fD1Nd-7oBzu_sX9tNDedCqvenmfrHHXR1ORjDwH1vVjeivB4j3s2RZfNuJyWmWWjOP-_ta6to9NPoGdH3YBgzGTiQRLyj1tzW8F51cjNqYwuCJCuTTmscnMq2K/s1600/history-trans.png’ width=’30′/><span>Web</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKMCUvlOC7D9wKr8WeLijw6sUuqjBJ7GYPH7RxqbTyWo1CxDJf0Qh9V9KB3IKZX80kfueLVrfBkicdZqYZICWMMEjKrG1jj6BCWy683afD4R1vt1ZpswV8rDX8Dy30mD9-9iYqiH1s/s1600/email-trans.png’ width=’30′/><span>Home</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0N_wLkQD02xHahbOWrA1wwFkx8MzTBZl4u-URLffZdQnBZ4f1ThE-8m4VaBGqPFIrXhBPXq56yetD5HH4Sf839kdvQUBjAgLfwL87em4mN2C_BBVBUJpJQ0t5xXIF3t2wfQyx8Yhq/s1600/video-trans.png’ width=’30′/><span>Email</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWTtccc2n5vSoBgLJFly7rgrMWKE6gRqONR1m5LlNtPNU6_gewZdFEBCsNWRZL_OlkdMGlS-YwLIQxFstoNPEtXM2WQDSeiRHPXO52T7q0TsWeFIFEhjL_N7zMQBtv1Cg9HpjZ3Jtl/s1600/rss-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDwMN4NN7erNqN2W7m1bXxEny7JvauY0-jS0X9Dlr2ZiLX-EJdguOw8j0JlqetFh9Fox_4icqp0fcp10_cEfCds1kCXfcYSmoPYKNrrcKbON-LiHtHhxMC-qDoJl2XeyzEdHbY9r8x/s1600/email-trans.png’ width=’30′/><span>Clock</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBMdB66Yl_TxWxZriz6KNkQRWBmi9PnfSgzKJrvMNzbAb0UwTzkN0vcbW8-S9XTYTcRniTduC2i86IAu0Zh7dDe6nXj6_Xgcc4_gLnFh_eyTET4eZGj4YE-BgHClyq4VJ9OjOK42Gj/s1600/calendar-trans.png’ width=’30′/><span>Web</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSYigIQ4f_IpnjcMpcMnIH0W1U047_Uwwnv2RemwM_4mRVz_J8Wer89YYTZBxM9VwWH5r0U_T4weOPOS60vFIO16jWePclaEC6xY8NF5B46uhANjhD8cnp05K9gqKRJMRrZNtpFA_4/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!!!
No comments:
Post a Comment