Tutorial Floating button , favicon and Image hover.

Assalamualaikum.

OkOk , kene buat tuto lagii -.-'

 

Tutorial 1 :Floating Button.

Ok , tu diaa floating button.

1. Design -> Page Elements -> Add A Gadget -> HTML/Java Script

Copy code kat bawah ni:

 <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='LINK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='TITTLE'><img border="0" src="URL GAMBAR" /></a><br />


 </div>

 Kalau nak tambah lagi , buat yg sama cuma LINK,TITTLE,URL GAMBAR tuh tukar.

Tutorial 2:Favicon

1. Dashboard , Design, Edit HTML , Tick Expand Widget Templates.

]]></b:skin>

 CTRL+C UNTUK COPY CTRL+V UNTUK PASTE.

Kalau dah jumpa,copy code ni lak.

<link href='URL GAMBAR' rel='shortcut icon' type='image/x-icon'/><link href='URL GAMBAR'/>

Paste kan dibawah ]]></b:skin>

Preview,save!

Tutorial 3:Image Animation Hover

1.Dashboard->Design->Edit HTML->Tick Expand Widget Templates.2.Ctrl+F and cari code nihh :

/* Header

3.Copy code kat bawah ni and paste kat atas code /* Header

    /*------ IMAGE ANIMATION------*/
    img {filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
    }
    img:hover {
    filter:alpha(opacity=80);
    -moz-opacity:0.80;
    opacity:.80;}

 4.Preview,Save !

---

Thank because reading this post.

---