May
12th
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 Blog Post Promoter
Related Websites- Cycling Is a Great Exercise For Sport or Leisure Learn How To Fit a Ride In Everyday With These Eas You need to create a simple schedule on your calendar, date book, or planner and keep it. Make sure you do this when others know you can't be reached, this will prevent you from being interrupted or bothered when trying to accomplish this. When you decide to go riding, keep......
- Sandals & Beaches Resorts "Our family of Sandals resorts offers the absolute perfect way for each and every person to enjoy the unique and magical warmth of the Caribbean. From Sandals trademark romantic luxury-for-two to Beaches' amazing fun for the whole family and from the Royal Plantation's world-class perfection to Unique Villas' down-home sumptuousness-whatever......
- Saving Money on Vacations by Finding Cheap Airfare One of the easiest ways that you can save money when you are planning a vacation is to locate the cheapest airfare that you possibly can. When you make good use of the internet, you can make that happen. One example of a utility that you can use for this......
- Internet Marketing Flaw (function() {var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];s.type = 'text/javascript';s.async = true;s.src = 'http://widgets.digg.com/buttons.js';s1.parentNode.insertBefore(s, s1);})(); 5Digg Digg (function() {var s = document.createElement(‘SCRIPT’), s1 = document.getElementsByTagName(‘SCRIPT’)[0];s.type = ‘text/javascript’;s.async = true;s.src = ‘http://widgets.digg.com/buttons.js’;s1.parentNode.insertBefore(s, s1);})(); 5 Digg Digg (function() {var s = document.createElement(‘SCRIPT’), s1 = document.getElementsByTagName(‘SCRIPT’)[0];s.type = ‘text/javascript’;s.async = true;s.src = ‘http://widgets.digg.com/buttons.js’;s1.parentNode.insertBefore(s, s1);})();......
- Creating a New Alternative Stream of Income–My First Non-Blog Website Part I Since I started this blog, I have talked about why I believe that multiple streams of income is the best way to accumulate wealth and why I want multiple streams of income. To meet my goal I have used this personal finance blog, my dividend income portfolio, my very small law practice…and......
![[Most Recent Quotes from www.kitco.com]](http://www.kitconet.com/charts/metals/gold/t24_au_en_usoz_2.gif)
![[Most Recent Quotes from www.kitco.com]](http://www.kitconet.com/charts/metals/gold/t24_au_en_uskg_2.gif)
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…
Jun 4, 2010 at 08:06:55
kayanya gagal mas, udah di save malah ada pesan eror…./ gmn slnjtnya????