Cara buat Floating Button / Butang Terapung...


Salam,
Saje buat tutorial nih sebagai simpanan dan rujukan sendiri, dulu pernah buat, pastu ngan tak sengaja terdelete la pulak, dah kena cari balik tutorial ni. Kebiasaannya, Floating Button / butang terapung nih, diletak sama ada di sebelah kiri atau sebelah kanan blog secara statik atau tetap kedudukannya, dan bila page discroll ke bawah, butang ni tetap kelihatan...


Cara nak membuatnya pun senang :
  • Pergi ke Design  > Page elements > Add A Gadget >  Pilih HTML/Javascript
  • Copy code dibawah dan paste kan sahaja kat ruangan HTML/Javascript tu.
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:140px; left:-12px;'>

<a class='linkopacity' href='http://www.facebook.com/abcdefg' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/abcdefg' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

<a class='linkopacity' href='http://www.blogger.com/home' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />


</div>

Pssss : Sebelum save tukarkan 2 URL kat bawah ni kepada URL/ ID facebook dan twitter korang
  • http://www.facebook.com/abcdefg
  • http://twitter.com/abcdefg
          Save dan tgk hasilnya....

Note : Kedudukan widget ni boleh diubah, contoh:
  1. Kalau nak atas kan sedikit atau turunkan sedikit kedudukan butang tu cari dan ubah bahagian ni:
    top:140px;
     
  2. Kalau nak letak kat sebelah kanan cari dan ubah bahagian ni:
    left tukar ke right
     
  3. Kalau nak guna gambar lain tukar code berwarna merah dengan URL image korang sendiri( besar image lebih kurang 64 x 64 pixel )
     
  4. Kalau nak nak tambah butang lagi,  tambah code seperti kat bawah sebelum code </div>:
    
    <a class='linkopacity' href='LINK ADDRESS'
     imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 
    1em;' target='_blank' title='feed'>
    <img border="0" src="URL IMAGE" /></a><br />
     
Untuk blog ni, saje tak buat floating buat image oppacity tu jer, tersorok sikit eik?

Sumber : Mommy Pinky

7 comments:

  1. terima kasih eh kak...sebab buat toturial niey..dah lama dah cari skarang baru jumpa =D

    ReplyDelete
  2. Assalamualaikum :) Thank you so much! dulu saya pun pernah buat, then terdelete x) terpaksa cari balik. Sama macam awak. haha x)

    ReplyDelete