A little bit of yourself in this section. There are 3 three text graphics associated to this section; Subscribe me, Advertisements and About Me. I hope either one will suit your need. 
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=’http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQn-ny4I/AAAAAAAAAUc/yy_PBS_YWrc/s1600/music-trans.png’ width=’30′/><span>Home</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACbeYOO5I/AAAAAAAAAUk/_Zfiy_TiZtA/s1600/rss2-trans.png’ width=’30′/><span>Email</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://2.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQeWOkPI/AAAAAAAAAUU/-1lW9Q0I4-A/s1600/link-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACQfGZMrI/AAAAAAAAAUM/7HS7vAdCjls/s1600/home-trans.png’ width=’30′/><span>Clock</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP2ct3iI/AAAAAAAAAUE/Wq7jf6tILFE/s1600/history-trans.png’ width=’30′/><span>Web</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP5KHlaI/AAAAAAAAAT8/0PJpHH9DzLE/s1600/email-trans.png’ width=’30′/><span>Home</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://1.bp.blogspot.com/_Yhcwq7ZzbIw/SUACP6w_J0I/AAAAAAAAAT0/RXNWTRfB9po/s1600/video-trans.png’ width=’30′/><span>Email</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUACPp7mBQI/AAAAAAAAATs/UKxtQ51vOF0/s1600/rss-trans.png’ width=’30′/><span>Display</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUACBJFd9ZI/AAAAAAAAATk/oJ5lL_SGpFI/s1600/email-trans.png’ width=’30′/><span>Clock</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://3.bp.blogspot.com/_Yhcwq7ZzbIw/SUABzssGnaI/AAAAAAAAATc/hxJx2j7VRQA/s1600/calendar-trans.png’ width=’30′/><span>Web</span></a>
<a class=’fisheyeItem’ href=’#'><img src=’http://4.bp.blogspot.com/_Yhcwq7ZzbIw/SUABnXdQNdI/AAAAAAAAATU/jPWR6TthALk/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/
Originally posted 2009-03-11 08:57:15. Republished by Old Post Promoter
Related Websites- 4 Things Bloggers Do WRONG! Iâm a very prolific blogger and read a lot in my blog community and in other blog communities. I canât stand some of the things I see and if I have a problem, I can guarantee other readers of your blog do too. Here are four things bloggers are doing......
- Blogging With Wordpress That is a better service for Wordpress or Blogger blogs? I'm about to start my own blog and I was curious as to what would be the best platform possible to use blog? I Blogger HTML ago when it was none of these ingenious contraptions that seem to have......
- Blogging – You’re Doing it WRONG! (Pt 2) This continues from part one and is part two in a two part series on what bloggers are doing wrong when it comes to blogging. Here are some more ideas for you to consider. Editorial Calendars and Patterning Audiences Chances are you donât do it. Dosh Dosh writes a fantastic......
Apr 7, 2009 at 04:11:17
bro ada dock menu yang vertical gak..trims be4
May 6, 2009 at 05:20:26
saya udah mencoba mas tpkeluar comment kayak ini :
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Open quote is expected for attribute “{1}” associated with an element type “src”.
mohon petunjuk
thank’s
May 7, 2009 at 07:42:07
@trexuzzn : dicek lagi quote2nya (tanda petik, tanda kurung).. kyknya ada miss disana.
May 14, 2009 at 04:36:52
iya om…gmna ni.masak quote-nya tak utik2 tetp gak bisa,
masak tak ganti tetep gak bisa..mas tolong benahin aja kode yang mas tulis dipostingan ini,
tetep eror aja……
mohon petuahnya.
May 15, 2009 at 10:08:27
om……aq juga gto..kagak bisa..tolongsempurnain lagi donk postingan ente..biar kiat bisa make…