“Outside the Box Navigasi” untuk Blogger

Beberapa hari yang lalu dapet kerjaan buat bikin web dengan CMS Wordpress, Lalu si klien minta buat sharing social (social Boiokmark) selalu tampil.. lalu setelah googling sana sini, akhirnya ketemu juga di net.tutsplus.com, sebuah navigasi yang unik seperti punya macOS.
untuk lebih jelas silakan lihat hasil jadinya pada jepara-info.com,atau DEMOnya yang telah dibuat untuk blogger.

Btw, setelah jadi, jadi kepikiran, bisa gak dipasang pada blogger?? dan ternyata bisa. OK langsung saja berikut cara memasangnya pada blogger :

Siapkan Jquery dan Javasriptnya, atu copas script berikut didalam <head> pada Templates Blogger

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://javascriptcuss.googlecode.com/files/stack-1.js' type='text/javascript'/>
<script src='http://javascriptcuss.googlecode.com/files/fisheye-iutil.min.js' type='text/javascript'/>

Lalu Pasang kode CSSnya yaitu sebelum kode ]]></b:skin>

/************** START:CUSSTACK-CSS *****************/
#stacksNav {
    width: 145px;
    height: 25px;
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 45px 7px 0 0;
    background: #333;
    color: #f5f5f5;
    text-align: center;
    border-top-right-radius: 14px;
    -webkit-border-top-left-radius: 14px;
    -moz-border-radius-topleft: 14px;
    opacity: .65;
    filter: alpha(opacity = 65);
}
.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
    font: 13px "Lucida Grande", Lucida, Verdana, sans-serif;
    display:block;
    height: 14px;
    position:absolute;
    top: 17px;
    right:60px;
    line-height: 14px;
    border: 0;
    background-color:#000;
    padding: 3px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    color: #fcfcfc;
    text-align: center;
    text-shadow: #000 1px 1px 1px;
    opacity: .85;
    filter: alpha(opacity = 85);
}

/* IE Fixes */
#stacksNav { _position: absolute; }
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }

Lalu isikan juga kode HTMLnya untuk bisa tampil di blog, yaitu setelah </head>

<div class='stack'>
        <img alt='stack' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-CJhdFeDxeAtmCW8hIL2-PY4o6-WYD05fY58X3sxwDvsJIIdA51np4o32BQa79ie1agSbMxLyiU0OEWGnseEz2FmqNUwfM2cMM0s_Ci3_EqzEifZNLvn6yGpo2uvg1tmQCekLS7AhJdFX/s800/stack.png'/>
        <ul id='stack'>
            <li><a href='http://feeds.feedburner.com/catatancuss'><span>Subscribe</span>
            <img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbU7lYUKAx1TenEnRvjw0yLthPaDlOaBGKdm-LNSAvd1JzNRydsZW5Yv_QENk6gp7i2072Ubvq5-zDoccqoQUdQMYuDNEfAV-B23WGW9JmZ1gmYZr1v1X_Yak65wWtkK_l4sB78wRS4sZJ/s800/CoffeeCup_Feed_Add_64.png'/></a></li>
            <li><a href='http://www.google.com/profiles/supercuss'><span>buzz</span>
            <img alt='google' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTndRqfm3l8BWIm8vv_C9t_7I7ok9mrConxBp3MO1VbZr-ICQ0mS3M2YBYtPbpyRBD4_9bCbO6l2NUXt6zus-jGiff6VnjffBmiGGcIFzKkFHTN7lUJlBLpn6yKyq_WzzeeRqIvMcH2NER/s800/buzz_9.png'/></a></li>
            <li><a href='ymsgr:sendim?supercuss'><span>yahoo</span>
            <img alt='yahoo' src='http://opi.yahoo.com/online?u=supercuss&m=g&t=9'/></a></li>
            <li><a href='http://www.facebook.com/pages/Catatan-Cuss/442954190181'><span>Facebook</span>
            <img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUwPgbVFAjW2ga4Ag1IThVFidpcSO7v0gfZxlYqQZIxh8IzntYIcGD_PNVJVfFxoEoYU-G0m9Z_v6tKp7J9XNp1cYe-ebz-XHeq6JtUrn70Wfrh3iZB5G2-ZFXbAJXqR7WGD1vPVhV3G5m/s800/facebook.png'/></a></li>
            <li><a href='http://twitter.com/cusspahing'><span>Twitter</span>
            <img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOOi6vWtHO3-7itDa3ZQ24dtUL5Z8bBAijNb6yZPBQUjqqouQS_Zq1I1cJhCdHPQxDAM0p4iZAjq404Ni4ec-RwonHaclSdIkJQaRjJdM1ETf9dbGTEhWb6KUkdz7-uPAvITq-OFgWXZz9/s800/Twitter.png'/></a></li>
        </ul>
</div>

Pada kode yang diberi warna merah, Silakan ganti alamat Feed, Google Buzz, Yahoo id, Facebook dan Twitter kalian. atau bisa juga menambahi dengan social bookmark yang lain sesuai selera, atau jika ingin merubah gambar, maka silakan isikan kode gambar setelah kode src=
Untuk Merubah icon YM bisa diganti dari t=9 menjadi t=1, atau 2 dst... (untuk list icon default YM ~~akan ditulis nanti - Insya Allah~~) silakan kunjungi Yahoo Online Status
Selesai, silakan disave dan dilihat.
Selamat Mencoba..... Gluck