Tuesday, 4 June 2013

Tutorial : Floating button facebook,twitter

Assalamualaikum..

Alhamdulillah..cuace hari ni nak kate panas tak panas,sejuk pon taki sejuk..di sebabkan cuace pon cantik harini..mud untuk membuat tutorial juga sangat cantik..hari ni agak sawan sebab acik dah terlepas dari seksaan final exam..sakit otak wooo!jabatan akademik buat susunan schedule exam kami sangat pack dengan subjek2 yang agak taffff!okeyh..juz iklan jer tadi..Now,acik nak buat tutorial mengenai Floating button..Adakah anda tahu apakah floating button???taraaa!inilah button acik y sangat sweettt gtuh..


Ikot baik-baik step2 yang acik buat..jom ikuti tutorial acik sekarang...

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/acik.liena' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://i1078.photobucket.com/albums/w481/acikliena/facebook-1.png" /></a><br />

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

<a class='linkopacity' href='http://acikliena.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='Blogger'><img border="0" src="http://i1078.photobucket.com/albums/w481/acikliena/blogger-1.png" /></a><br />

</div>

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

kat bawah ni acik sertakan link icon2 yang korang perlukan..if korang nak juz copy link..kalau tak mau amek..abaikan..^_^

http://i1078.photobucket.com/albums/w481/acikliena/blogger-2.png
http://i1078.photobucket.com/albums/w481/acikliena/facebook1.png
http://i1078.photobucket.com/albums/w481/acikliena/facebook-2.png
http://i1078.photobucket.com/albums/w481/acikliena/twitter1.png
http://i1078.photobucket.com/albums/w481/acikliena/twitter-2.png
http://i1078.photobucket.com/albums/w481/acikliena/facebook-3.png
http://i1078.photobucket.com/albums/w481/acikliena/twitter4_512.png
Dah amek tuh jangan lupe follow yerpp.... Jumpa lagi!



No comments:

 photo left.png  photo right.png  photo pink_heart.png