07 Februari 2011

Bakul Animasi Ikon Sosial Bookmarking

Tiada ulasan:
 




Sila lihat Demo,kat sudut bawah sekali kat belah kanan ada bakul,sila klik kat bakul tu^^
 Penerangan:Bila korang klik pada bakul,akan keluar beberapa ikon yang lain

LANGKAH-LANGKAH

1.Log in ke Blogger Dashboard--->Design/Layout--->Edit HTML

2.Cari kod ]]></b:skin>

Dan pastekan kod ni SEBELUM/DIATAS kod ]]></b:skin> :

.stack { position: fixed; bottom: -5px; right: 40px; }.stack > img { position: relative; cursor: pointer; padding-top: 28px; 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-family: "Lucida Grande", Lucida, Verdana, sans-serif;display:block;height: 0px;position:absolute;top: 17px;right:60px;line-height: 14px;border: 0;background-color:transparent;padding: 0px 0px;border-radius: 10px;-webkit-border-radius: 0px;-moz-border-radius: 0px;color: #4F3939;text-align: center;text-shadow: #000 1px 1px 1px;opacity: .85;filter: alpha(opacity = 85);}/* IE Fixes */.stack { _position: absolute; }.stack ul { _z-index:-1; _top:-15px; }.stack ul li { *right:5px; }

Korang boleh ubah kod merah untuk ubah posisi kat skrin

4.Sekarang klik kat Layout/Design-->Page Element-->Klik Add a gadget

5.Pilih HTML/JAVASCRIPT dan pastekan kod dibawah ni dan klik Save.

<div class="stack"> <img alt="stack" src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png" ilo-full-src="http://nettuts.s3.amazonaws.com/082_leopard2/preview/images/stack.png"/> <ul id="stack"> <li><a href="#"><span>Facebook</span><img alt="Facebook" src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseBy0fACpI/AAAAAAAAAko/mVIO1rP2a7g/s320/facebook.png" ilo-full-src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseBy0fACpI/AAAAAAAAAko/mVIO1rP2a7g/s320/facebook.png"/></a></li> <li><a href="#"><span>Stumble</span><img alt="Stumble" src="http://4.bp.blogspot.com/_JUJEXEamsyU/SseBtnvUYJI/AAAAAAAAAkQ/Wae4RHPo0xE/s320/stumbleupon.png" ilo-full-src="http://4.bp.blogspot.com/_JUJEXEamsyU/SseBtnvUYJI/AAAAAAAAAkQ/Wae4RHPo0xE/s320/stumbleupon.png"/></a></li> <li><a href="#"><span>Dig</span><img alt="Safari" src="http://3.bp.blogspot.com/_JUJEXEamsyU/SseB1sEvcsI/AAAAAAAAAkw/Q0hLnn89VSw/s320/digg.png" ilo-full-src="http://3.bp.blogspot.com/_JUJEXEamsyU/SseB1sEvcsI/AAAAAAAAAkw/Q0hLnn89VSw/s320/digg.png"/></a></li> <li><a href="#"><span>Technocrati</span><img alt="technorati" src="http://3.bp.blogspot.com/_JUJEXEamsyU/SseBsj7DAJI/AAAAAAAAAkI/mve5pUoCDTE/s320/technorati.png" ilo-full-src="http://3.bp.blogspot.com/_JUJEXEamsyU/SseBsj7DAJI/AAAAAAAAAkI/mve5pUoCDTE/s320/technorati.png"/></a></li> <li><a href="#"><span>Delicious</span><img alt="delicious" src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseB3LY7lkI/AAAAAAAAAk4/1lsxOZ_klP4/s320/delicious.png" ilo-full-src="http://1.bp.blogspot.com/_JUJEXEamsyU/SseB3LY7lkI/AAAAAAAAAk4/1lsxOZ_klP4/s320/delicious.png"/></a></li><li><a href="#"><span>Twitter</span><img alt="Twitter" src="http://2.bp.blogspot.com/_JUJEXEamsyU/SseBvuXqEbI/AAAAAAAAAkY/sZbUDV5zNH0/s320/twitter.png" ilo-full-src="http://2.bp.blogspot.com/_JUJEXEamsyU/SseBvuXqEbI/AAAAAAAAAkY/sZbUDV5zNH0/s320/twitter.png"/></a></li> </ul></div><!-- end div .stack --><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script src="http://aidealfitri.webs.com/mataikan.js" type="text/javascript"></script>

*kod ungu adalah skrip,sila hostingkan sendiri kalau boleh.# adalah untuk korang letak link.Gambar ikon(kod pink) tu boleh ditukar.



Tiada ulasan:

Catat Ulasan

TERIMA KASIH UNTUK KOMENKOMEN TERBARU

 
© 1986. Aideal Fitri - fitri1986 Malaysian Blogger