Pernahkah Anda melihat animasi dock menu pada blog anda???…..
Sudah atau belum, berikut ini adalah tutorial tentang menambahkananimasi 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“.
<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/AVvXsEiKV_fmR893azfxsY2JLctAVlSClzQdQGvaTG7zAdO2NBYL6zqaTzpeKZtDvdNysCQuS6U2q0vq56Z4iYM0r-74X7PIi3CbuKtTRX1gZ59Ff1fg2yEkACOOgH4prlec9n44u70Ky6nU/s1600/music-trans.png’ width=’30′/><span>Home</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_1K0ei0sEROHFPtmqUEa8o0CglNf7R08v04D333apYMwAJwyWETQ14d84SxaoX9bFVfiIe7CIT_izj4k4ouuuuPl3urZRcwVl8BPgq-E9tD6tawLITPh6xQMq1nQ4XH-fD3_rwNy/s1600/rss2-trans.png’ width=’30′/><span>Email</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5vS2P-aTr4gQEShq3fIOOr3d8h9_KVzg81ccC7zzHSAUyG582tmPfirCx_tLMCVRjQt2i4NjRv07CAQwKbp6Q81ol_NAkMB0nOYbLnU6vFL9d6760bkTAX1Wb09axKeA5eiK4y-Ip/s1600/link-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRToYyzNNLVPiRTbe_v3B9ZPvwxFk3rRzmF-fSHXAJ4eN44cxLzNuiO9htURU0f3QttXxWGnCAJjbom3mTpQa9uZm1Fzqv6k61BDp0UJPBFOShc3MMhRZxwiHBAWD-rvv-GEU39UGm/s1600/home-trans.png’ width=’30′/><span>Clock</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQkHBDUQN81ABG3fOTE48ue9pQ5Cwquti5uO8P840ONRLSgxWNXEx8oJwiF5K5YcBRlPmGrcs2mzf82EkNEHRIB8Ypa9rWefMTkKb0Odp6qtnjAk74td4fm5qiP_GwaqUNXmmMrJfo/s1600/history-trans.png’ width=’30′/><span>Web</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMqHAsntYISdKFjWS-abeM_IR3NWbNaBqUqGpFt3DXYEl1VNkK_zukG2orS6i0onlMSwhPus7Eiartauu31BCbZKfJzHvswU0KAGit13OJqXwrikcNP4nqV0c57u5VLU0X0qy5RB9C/s1600/email-trans.png’ width=’30′/><span>Home</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFxJ5TcZDMINlDwdtJR4SyqvlwftV5CK3y71-r75Pnm9nDrxqfZa0xqkSjdkUYm7EMUTgN-EPwbWosEIhlFcYOFhBtZrtu9ybQNqqMXFwPAIUWWV6h-37gOj3VTB-l3_AGDVzZXlEb/s1600/video-trans.png’ width=’30′/><span>Email</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Hcs65WkjnyCXm9PbuMF47KK-WLyBvbI-EcXZDfsYYHsZARbUgk0Btzk5vht46dhDhvJERyFkIoTVEimsX3oY0jsKl9-vLr9yKt7_SPp7AhJTcVBDo33VZOHlp8SMRhj2rmqtKSXJ/s1600/rss-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZgKksrczKr-_yr2OA__AovdsZv7z_i-NqI9wRPxGvNnkwR4OGHAo_-qxVdOHMrw5AOaJBJW9OcKnJYXo5_WP5zhbzyMmYkRsd-Axn3KetjwUl0sYo3E6lfg-nse-mmZ1Vcf8K8MR/s1600/email-trans.png’ width=’30′/><span>Clock</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVsIy1W46_S1BZbKasfGE-S0C2HNcpbE_7ebNrd4xRVxbqxDzE1HQOfAtndE2IzvO0bFyoK_DdWiQ9mmov2Cd9moXAU40lfqy9mbBUCuwY5uIO0Pv9GIlRfDfxasZ4_mKrp1irUt1_/s1600/calendar-trans.png’ width=’30′/><span>Web</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiD2OqjIzpdqcakjseGBpaCL56JxV-vKZm0MJuIwlECBxQQyKXKs5u20EDrr3BY0y3adoP-YpOZfQNwVeUqh2T8kQlMsukb8Tb7N_sMCNRgayJQz3z2Zynib7dxJ8w5yI6_jfT_SbK/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!!!
Artikel 
0 komentar:
Posting Komentar
Jangan ada komentar Spam, Sara, etc !!
"Jika Menemukan LINK yg Tidak bisa di akses pada BLOG ini!, silahkan beritahu kepada saya melalui Komentar atau E-Mail : williamgamer@yahoo.com sesegera mungkin saya akan memperbaikinya. Terimakasih"