banner I’m moderately expressed extravert, slightly expressed intuitive personality, moderately expressed feeling personality, and moderately expressed judging personality. I’m new in studying telecommunication so I need more advises and guides.
Aug
4th

Cara Membuat “Dock Menu” di Blogger

Author: black_gemi | Files under Blogging, IT

dockmenu

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“.

dockmenu11

  • 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

dockmenu2

Selamat Mencoba!!!

Referensi : http://iblographics.com/


Originally posted 2009-03-11 08:57:15. Republished by Old Post Promoter

Related Websites
  • It’s Not Just About the SEX! by Terry Spear, guest blogger I work in a library, and recently, we’ve had a lot of middle-aged women coming in looking for Zane Grey novels. Normally, it’s just a bunch of old guys who love reading the westerns. So I was curious as to what this was all......
  • 10 Questions I Would Ask Before Launching A Ministry I’ve had some more time to prayerfully think about my first response for advice on starting a ministry.  If you haven’t listened to my podcasts on How to Steward A Prophetic Call Part 1 and How to Steward a Prophetic Call Part 2, you’re welcome to do it. 10......
  • USTREAM iPhone App Review Official App Site- www.appstorereviewer.com Twitter- http......
  • Display your Prosper Listing on Your MySpace Page Now you can display your Listing on your MySpace Page. Or your blog, or website... The possibilities are endless. Here is a random listing on Prosper. $25 Bonus For New Lenders How to Use Prosper Listing Widget for MySpace, Blog, Website, or Other Here is a link to my MySpace......
  • Small Business Coaching #af-form-1221758521 .af-body .af-textWrap{width:98%;display:block;float:none;} #af-form-1221758521 .af-body .privacyPolicy{color:#333333;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-body a{color:#8A0303;text-decoration:underline;font-style:normal;font-weight:normal;} #af-form-1221758521 .af-body input.text, #af-form-1221758521 .af-body textarea{background-color:#FFFFFF;border-color:#919191;border-width:1px;border-style:solid;color:#000000;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-body input.text:focus, #af-form-1221758521 .af-body textarea:focus{background-color:#FFFAD6;border-color:#030303;border-width:1px;border-style:solid;} #af-form-1221758521 .af-body label.previewLabel{display:block;float:none;text-align:left;width:auto;color:#333333;text-decoration:none;font-style:normal;font-weight:normal;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-body{padding-bottom:15px;background-repeat:no-repeat;background-position:inherit;background-image:none;color:#333333;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-footer{padding-right:15px;padding-left:15px;background-color:#transparent;border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#333333;font-size:12px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-header{padding-bottom:40px;padding-top:6px;padding-right:10px;padding-left:100px;background-color:transparent;background-repeat:no-repeat;background-position:inherit;background-image:url("http://forms.aweber.com/images/forms/dollar-sign/silvr-red/header.png");border-width:1px;border-bottom-style:none;border-left-style:none;border-right-style:none;border-top-style:none;color:#FFFFFF;font-size:24px;font-family:Verdana, sans-serif;} #af-form-1221758521 .af-quirksMode .bodyText{padding-top:2px;padding-bottom:2px;} #af-form-1221758521 .af-quirksMode{padding-right:15px;padding-left:15px;} #af-form-1221758521 .af-standards .af-element{padding-right:15px;padding-left:15px;} #af-form-1221758521 .bodyText p{margin:1em 0;} #af-form-1221758521......

6 responses. Wanna say something?

  1. argon
    Apr 7, 2009 at 04:11:17
    #1

    bro ada dock menu yang vertical gak..trims be4

  2. trexkuzzn
    May 6, 2009 at 05:20:26
    #2

    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

  3. black_gemi
    May 7, 2009 at 07:42:07
    #3

    @trexuzzn : dicek lagi quote2nya (tanda petik, tanda kurung).. kyknya ada miss disana.

  4. pandu entertainment
    May 14, 2009 at 04:36:52
    #4

    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.

  5. pandu
    May 15, 2009 at 10:08:27
    #5

    om……aq juga gto..kagak bisa..tolongsempurnain lagi donk postingan ente..biar kiat bisa make…

  6. arkhananta
    Jun 4, 2010 at 08:06:55
    #6

    kayanya gagal mas, udah di save malah ada pesan eror…./ gmn slnjtnya????

Post a Comment

  • Calendar

    September 2010
    M T W T F S S
    « Aug    
     12345
    6789101112
    13141516171819
    20212223242526
    27282930  

  • Recent Posts

  • Page copy protected against web site content infringement by Copyscape

  • This website is worth

    What is your website worth?
  • IP
  • [Most Recent Quotes from www.kitco.com]
  • [Most Recent Quotes from www.kitco.com]

  • Stats

    Counter Powered by RedCounter
  • Locations of visitors to this page