Tutorial Floating Button FB, Twitter dsb


Owh fieda nak tau tentang button floating tu ye, Cik Senah suka soalan2 macam ni hahaha, menguji minda gamaknya..Sebenarnya daku amik tutorial tu dari Blog BicaraFarah. Beliau memang dah beri kebenaran untuk sesiapa yang amik tutorial ini dengan syarat:-

Credit to farah


Mula2 korang kene

1. Sign in blogger > > Design > Add Gadget > Html/Java Script
2. Copy coding di bawah dan paste ke dalam Html/Java Script
<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/ajumohit' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe-NJdIYjG8tQmwnkcn7yWpH9VhkYDQxi6VBgdgpzwH8-aKJ8jsOC_-71Xz8RbtuMacWn_yWlSQpRyKih0pUwJ40o1CP59-YqPf4Q4lL9Ecc-zI6AXsuDmcT0tHqC1M9TOvjx1ghSgUIU/s1600/facebook1.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/#!/ajuedy' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpQzRhLa7v6aZlyrJ0rxqupFap3fdqlOT8SsHeWY7NEkdOoTLmwd8E_p4-OpOrI2hzPPLrUYJ56VGRnQl5Cm2GJO6y0Y9Sh-qNhEFVwZ7bnzwqdRjhjUnOHVfr47ZoalA9rFm0bS6bpi0/s1600/twett.png" /></a><br />

<a class='linkopacity' href='http://ajumohit.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='go to dashboard'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrhNMaqJb0ml3a65wdk8gXigEU5ZppOsBKlWEZRmWAIiftqBszPsCRJyowZnpEyjNYnW1VPFs-x0Iji3-53EKkBrtW9kKKvcrxBOF7pqwpuuwV0VZF3wLVAxUQbcTElAqPnWKNYnie3w/s1600/blogger_64x64.png" /></a><br />

</div>
3. Tulisan warna merah ialah link url korang ( contoh, Facebook, Twitter ), dan link biru link url gambar/icon. Kalau nak tambah lagi button copy tanda ni je sebelum code </div>
left boleh tukar kepada right kalau suka.
# Ubah font warna hijau sekali
4. Faham tak? dan SAVE je.

Kerana mood aku baik dan rajin. Aku edit dan carikan korang icon-icon yang sesuai diletak untuk floating button.  Tapi korang jangan la letak semua benda ni..nanti serabut serabai pula. Letak yang penting je k..

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt3W6qsjLd-MWby_pUEgnXgZ4RhjnvzLjX0wo0qJyy3NxRXntED3HNeJJEI5BjfQ-HqSlcGcCMnRPpMAYuTJ4O_YOP65KeKsQQ_PF3bGYoHyr_SXcGpwC8lXSSbKiwntU-FEeb9Uxg1oY/s1600/blogger-icon-big.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD13NHgOI8cT2p2HVuMuhMtR0kHhkFdMlbJKyB5SQLeANNDk8Hg42Yz0iDbkpl2QjwgEeDaN2sbU91FzeYOOLIeY2VzABWOboRhJmwfdh65yqeklLYYDslbbfOp7GFwwtyU-c0iybquwM/s1600/Facebook-icon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFn8zpAExlv5NkgKNLn9BdJgSCvJY_spVmapYaO_7TVkRuocTJWX_qql4Fr5ksQNemCEt5oX9yoH2-F2hQ1-WLtTn0VjehyphenhyphenGfXUl-F-PURb-63V-eb_YvhINlRCJcSRE3lT3uQhd835AU/s1600/TwitterIcon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXHr7izgKkadqQ-HlRswGF9Slr_nj_j2WYEoLd50ee6Gij4mj_brhBf7agfqPHPGMdRxJ5cWJszq5-8a-Bw0Z-nWKlAbnqoco9GZ55FBg_wk6Eb5Dd3cbnte2dfU4LLl22P-VsY57NaNs/s1600/youtube-icon-PNG.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3_HsIgftSSeFjGvKAki6Vs4HoTratkE_3Sw725xcXKjwly83laXDjs8aV6hmSTS9JXb0HrCDHv1Trm1VvtIPgchwQ_oRd8gL7FlydI5XXGri5Ql2alH0DzAmMjy_Su-C2smRZlLxv29o/s1600/Skype.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg90Vq5iD4WWlMwXAW2A1f7QMjl28V3pE5cYM8gUnAO3PDKvPBQ700WP427G2DOWOngx96cQZt3fCZHMkurQQ4c3t3UrAHPrKYB0KrwYuj73jWFWXxnm5fwbgbRtAD3LCtugC-VFYsSEZM/s1600/Icon-Gmail.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOOY76aoTUuT0DHp1m4u-K84LQtU_lp3EI0zuyC4UWNpp5kxOS7D8IaatnIlSRkNZINhckGv4YCbz2wVjzsJNMNwEtv0H1syuCzYDiu8gOOgVqD5llQ84NuD7IOV52y60oMoY5K7ReoD8/s1600/yahoo_icon.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQQ3eUYOcX4RR7OBdSxgwtpeO7Hn97_1m-hpeFK3YHWQWqKo-CsqSKdLgDZ8GhslDdjaZVWBLeJf0_c_IlDqFAVtQ_R4uH_FwmDaw-hko6zHiuTzdNCGlzn2MCayybqAcSXVfX7dlR3_8/s1600/Tumblr.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU_LLY1p52lnuzR5c9aHnE3Eijkj_I-3G9SBdtGagodiTOIlaaoKJUprnq5r9hmOzTc2vgaUX-_c6zkV4EBQcceVgdWAdPB4bgcx3V6mwH_EupVW9pvDYHvNIYFFHvuh4G9M_1m_iD10U/s1600/myspace-icon.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiljopARq5gxZWHQ5eH2S9rUVtLrjlc0SsvutyZVLlBxZ_PZx6C4rhoV7hjDpKFl164sLAWw2D2KAR48gooklsR23JEMJihBcguDjKZkXDGe6YxGqhuXXl6JvNLZ84lt7P0T1XLPRame0k/s1600/formspring.png

Labels: , ,