Membuat “Outside the Box Navigasi” Dengan jQuery

Hallo sobat semua semoga kabarnya pada baik semua ya,,,,hehehe.Sesuai dengan Screenshot disamping saya akan memposting bagaimana cara membuat widget seperti disamping ini.

Masukkan Script jQuery ini di atas code <head>
<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>  

<!-- BEGIN CUSSTACK HTML -->
<div class='stack'>
        <img alt='stack' src='http://lh6.ggpht.com/_9NxhAFeTmio/TCQyJgd3MII/AAAAAAAAA8E/fdzg67qQ-xI/s800/stack.png'/>
        <ul id='stack'>
            <li><a href='http://feeds.feedburner.com/kumpulanhtmlblog'><span>Subscribe</span>
            <img alt='RSS Feed' src='http://lh5.ggpht.com/_9NxhAFeTmio/TCRHPiO-SgI/AAAAAAAAA8s/3EulmPJDk3U/s800/CoffeeCup_Feed_Add_64.png'/></a></li>
            <li><a href='https://plus.google.com/110787383199450518048'><span>buzz</span>
            <img alt='google' src='http://lh4.ggpht.com/_9NxhAFeTmio/TCRFuCzzQwI/AAAAAAAAA8Y/u9HKcCymLRY/s800/buzz_9.png'/></a></li>
            <li><a href='ymsgr:sendim?fatholboy'><span>yahoo</span>
            <img alt='yahoo' src='http://opi.yahoo.com/online?u=supercuss&amp;m=g&amp;t=9'/></a></li>
            <li><a href='http://www.facebook.com/fatholboy'><span>Facebook</span>
            <img alt='Facebook' src='http://lh5.ggpht.com/_9NxhAFeTmio/TCRFuvU6BXI/AAAAAAAAA8k/lmQSEi5I09A/s800/facebook.png'/></a></li>  
            <li><a href='http://twitter.com/_fatholboy'><span>Twitter</span>
            <img alt='Twitter' src='http://lh3.ggpht.com/_9NxhAFeTmio/TCRFuXXhuUI/AAAAAAAAA8g/3l24hD4q0Ug/s800/Twitter.png'/></a></li>          
        </ul>
</div>
<!-- end:cussstack-html -->


 Pada kode yang diberi warna merah, Silakan ganti alamat Feed, Google Buzz, Yahoo id, Facebook dan Twitter sobat. atau bisa juga menambahi dengan social bookmark yang lain sesuai selera sobat masing-masing, 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


Selamat Berkreasi Sobat....:D
Previous
Next Post »

2 komentar

Click here for komentar
Mr. Humoris
admin
September 14, 2012 at 2:36 PM ×

Sobat saya ingin mengajak anda menjadi Salah Satu Penulis blog saya di www.korangratis.web.id Apakah Anda berkenan. bila anda berkenan bisa hub saya di 085743814600 atau email beritakita35@yahoo.com untuk membicarakanya lebih lanjut.

Reply
avatar
September 14, 2012 at 6:14 PM ×

ok...saya hubungi via email saja untuk membicarakanya lebih lanjut....thanks sobat.

Reply
avatar

Silahkan berkomentar dengan sopan dan sewajarnya... ConversionConversion EmoticonEmoticon

Thanks for your comment