Tutorial 2 : Floating Button for FB , Twitter dan sebagainya.



- Contoh Floting Button -


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='https://www.facebook.com/yanalnashfah' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://2.bp.blogspot.com/-f1sKOT1c_h8/TVlbK4xSmHI/AAAAAAAAA4o/3rzgi6U3wY8/s1600/facebook1.png" /></a><br />

<a class='linkopacity' href='https://twitter.com/#!/yanalnashfah' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://4.bp.blogspot.com/-5LGPlA8BA1c/TVlbLhdXTKI/AAAAAAAAA4s/OfSrYe5BeRk/s1600/twett.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='blogger home'><img border="0" src="http://1.bp.blogspot.com/-o_3gU2EWC5U/TVlbMc7Y0-I/AAAAAAAAA4w/Bhg2IbZh7Ac/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 tajuk yang warna oren sekali ikot yang korang nak.


4. Faham tak? dan SAVE je.


Terima Kasih ;)




Thanks sudi baca entry nie sayang ^^ Just click LIKE if you enjoy reading this ya! :) Thanks!

0 7 orang nak tahu: