Tutorial : Floating Button

 Assalamualaikum .. ^-^

Selamat pagi semua .. =)

Apa khabar semua ? Niena harap semua sihat2 saje ok ..

Kalau rasa x sedap badan tu , pegi la klinik cepat2 k ..

Niena kat sini alhamdulillah sihat ..

Eh ? Orang tak tanya khabar Niena pun , perasan betul la minah ni ..

Haha .. Intro saje ok ..

 Hari ni Niena nak buat tutorial tentang floating button .. 

Tuto ni direquest oleh cik Arikal Razali ..

Ada yang tak tahu floating button tu apa ?

Ala , button yang menonjol tu .. Yang kat sebelah kanan kiri kat blog Niena ni ..

Ada nampak ? Tak nampak jugak ?

Meh sini Niena kasi tunjuk ..

Ini macam la ..

Ni la floating buttonnye ..

Ok , ada yang nak belajar tak ni ? Ada tak ?

Sapa2 yang nak belajar tu , meh tengok & perhati betoi2 k ..

1. Log in > Dashboard > Layout > Add a Gadget > HTML / JavaScript

2. Copy code bawah ni dan pastekan kat ruang HTML / JavaScript tadi

<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/nienasofea' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://icons.iconarchive.com/icons/iconshock/high-detail-social/64/facebook-icon.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/niena_sofea' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://icons.iconarchive.com/icons/iconshock/high-detail-social/64/twitter-icon.png" /></a><br />

<a class='linkopacity' href='http://nienasofea.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://icons.iconarchive.com/icons/iconshock/high-detail-social/64/blogger-icon.png" /></a><br />

</div>

3. Sekarang , korang tukarkan tulisan warna merah tu kepada link korang &

    yang warna biru tu boleh ganti dengan icon yang korang suka ..

** Yang warna pink atas tu , boleh tukar ikut kesusaian blog korang & yang     

     left tu boleh tukar right kalau suka ..

** Untuk image tu , kalau nak kekalkan pun tak apa .. Pastikan tukar link ok .. 

     =)

4. Save & dah siap !

== SELAMAT MENCUBA ! ==

p/s : Sebagai tanda terima kasih ok .. Meh tolong klik ni & tonyoh ini ramai2 ..

        Thnxs pada yang klik ok .. Sayang korang ! =)

Credit : Lyssa