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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjU_4oa5y4kAiM8CCc3KKqntIHIW7zeDH6HLK7NABgRovAv8yO-q_hil0W7JHbmnvy8CU8lR2A1v79H0r5ft9h3j_hkajoqAA3r3h5ZTV4E6kp-x5PjLNSMQUHwdAbycCZiPDQyTY6tjA/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD2OmM8T9vEYXyqch7N_nB69mBwaGC_yp7wS1K3C5aJDPLDr7pB6A7LOPrm7gZFKuMViBKMwpxdTRjP5yFyLO1FuszIYbStmKaKlxaOPwv4u-vl-9PKqV648xhpaUOAUYSjCD2MeHxTHg/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiAcI2BffVETt654nbmfVXdcMXRyeyk1-9tL-C-h_t2FdBRCNTfpXnyrjaMhyY5IPm327VcxgX1NBJZRq_9rWu8gPTMDG0YDopyBaIxnVo97h2BsLFFhVh4Y4-LBfZ3bEwOHK-eSBeVw8/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: