Friday, 6 May 2011

Bubbles Cursor

bubbles cursor macam bila kita gerakkan mouse dia keluar buih...Bukannya yg kelip2 tu.

1. Dashboard > Design > Add a Gadget > HTML/JavaScript

2. Copy kod bawah ni 
<noscript></noscript><!-- --><script type="text/javascript" src="http://www.freewebs.com/p.js"></script><script type="text/javascript">
        // <![CDATA[


        var colours=new Array("#ff0080", "#ff0080", "#ff0080", "#ff0080", "#ff0080"); // colours for top, right, bottom and left borders and background of bubbles


        var bubbles=12; // maximum number of bubbles on screen




        /****************************


        * JavaScript Bubble Cursor *


        * (c) 2010 mf2fm web-design *


        * http://www.mf2fm.com/rv *


        * DON'T EDIT BELOW THIS BOX *


        ****************************/


        var x=ox=400;


        var y=oy=300;


        var swide=800;


        var shigh=600;


        var sleft=sdown=0;


        var bubb=new Array();


        var bubbx=new Array();


        var bubby=new Array();


        var bubbs=new Array();




        window.onload=function() { if (document.getElementById) {


        var rats, div;


        for (var i=0; i<bubbles; i++) {


        rats=createDiv("3px", "3px");


        rats.style.visibility="hidden";




        div=createDiv("auto", "auto");


        rats.appendChild(div);


        div=div.style;


        div.top="1px";


        div.left="0px";


        div.bottom="1px";


        div.right="0px";


        div.borderLeft="1px solid "+colours[3];


        div.borderRight="1px solid "+colours[1];




        div=createDiv("auto", "auto");


        rats.appendChild(div);


        div=div.style;


        div.top="0px";


        div.left="1px";


        div.right="1px";


        div.bottom="0px"


        div.borderTop="1px solid "+colours[0];


        div.borderBottom="1px solid "+colours[2];




        div=createDiv("auto", "auto");


        rats.appendChild(div);


        div=div.style;


        div.left="1px";


        div.right="1px";


        div.bottom="1px";


        div.top="1px";


        div.backgroundColor=colours[4];


        div.opacity=0.5;


        if (document.all) div.filter="alpha(opacity=50)";




        document.body.appendChild(rats);


        bubb[i]=rats.style;


        }


        set_scroll();


        set_width();


        bubble();


        }}




        function bubble() {


        var c;


        if (x!=ox || y!=oy) {


        ox=x;


        oy=y;


        for (c=0; c<bubbles; c++) if (!bubby[c]) {


        bubb[c].left=(bubbx[c]=x)+"px";


        bubb[c].top=(bubby[c]=y)+"px";


        bubb[c].width="3px";


        bubb[c].height="3px"


        bubb[c].visibility="visible";


        bubbs[c]=3;


        break;


        }


        }


        for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);


        setTimeout("bubble()", 40);


        }




        function update_bubb(i) {


        if (bubby[i]) {


        bubby[i]-=bubbs[i]/2+i%2;


        bubbx[i]+=(i%5-2)/5;


        if (bubby[i]>sdown && bubbx[i]>0) {


        if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {


        bubb[i].width=bubbs[i]+"px";


        bubb[i].height=bubbs[i]+"px";


        }


        bubb[i].top=bubby[i]+"px";


        bubb[i].left=bubbx[i]+"px";


        }


        else {


        bubb[i].visibility="hidden";


        bubby[i]=0;


        return;


        }


        }


        }




        document.onmousemove=mouse;


        function mouse(e) {


        set_scroll();


        y=(e)?e.pageY:event.y+sleft;


        x=(e)?e.pageX:event.x+sdown; }




        window.onresize=set_width;


        function set_width() {


        if (document.documentElement && document.documentElement.clientWidth) {


        swide=document.documentElement.clientWidth;


        shigh=document.documentElement.clientHeight;


        }


        else if (typeof(self.innerHeight)=="number") {


        swide=self.innerWidth;


        shigh=self.innerHeight;


        }


        else if (document.body.clientWidth) {


        swide=document.body.clientWidth;


        shigh=document.body.clientHeight;


        }


        else {


        swide=800;


        shigh=600;


        }


        }




        window.onscroll=set_scroll;


        function set_scroll() {


        if (typeof(self.pageYOffset)=="number") {


        sdown=self.pageYOffset;


        sleft=self.pageXOffset;


        }


        else if (document.body.scrollTop || document.body.scrollLeft) {


        sdown=document.body.scrollTop;


        sleft=document.body.scrollLeft;


        }


        else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {


        sleft=document.documentElement.scrollLeft;


        sdown=document.documentElement.scrollTop;


        }


        else {


        sdown=0;


        sleft=0;


        }


        }




        function createDiv(height, width) {

        var div=document.createElement("div");

        div.style.position="absolute";

        div.style.height=height;

        div.style.width=width;

        div.style.overflow="hidden";

        return (div);

        }


        // ]]>

        </script>


3. Pastekan di ruangan HTML/Javascript tadi..ok
5. Siap

* yg merah tu letakkan dgn html warna yg suka ok....html tu boleh dapatkan di sini

Wednesday, 4 May 2011

Tab Sendirian Berhad


Tab tu yg macam dlm gambar kat atas tu..nampak tak, kalau x nampak klik kat gambar tu ok....
cara-caranya :

1. Mula-mula, kena buat dulu tab tu sama ada buat dekat photoshop atau mana-mana pun. Tapi yg tak ada photoshop, pakai Paint pon boleh. 

2. Dah siap...save kan gambar-gambar tu ke dalam my picture.

3. Lepas tu, gambar-gambar tadi, di uploadkan ke dalam photobucket. So, nak buat ni mesti ada photobucket la.. Sbab apa..sebab kita nak ambik url gambar tu.

4. lepas dah siap, Dashboard > Design > Add A gadget

5. kat situ korang isikan url gambar- gambar tu..contohnya macam yg dikotakkan tu ja...bila nak letak url gambar yg seterusnya, press enter baru letakkan url gambar yg seterusnya..ok
klik utk besar

6. Sekarang, kalau perasan, dekat atas tu ada Rich Text kan...haa, u all klik yang itu ..dan dia akan keluar macam ini


7. U all, highlightkan satu persatu gambar tu... and create link...macam mana...juz klik seperti yg dalam kotak  hitam yg ada dalam gambar atas tu...

8. Kalau yg tab tu untuk home, so buka home untuk blog u all dan copy link untuk home macam yang dikotakkan dgn kaler merah tu..tau kan..copy ja link tu and isikan dalam tempat yang dia suruh enter url..ok..begitu juga seterusnya.

klik utk besar

9. Lepas tu..siap...kalau nak bagi tab u all tu center juz tambah kod ni di permulaan dan last punya tab ok ..contoh..boleh tgok kat gambar yg second...ada ayat center kat awal sekali kan...
<center/>
10. Kalau nak tambah gambar macam rama-rama tu...juz letakkan url dia di tempat yg u all nak..contohnya gambar tu nak diletakkan di antara home dgn owner so, letakkan sama ada selepas home atau sebelum owner..kalau letakkan kat dua-dua tu ponn boleh tp dia akan kelaur dua gambar la...ada faham

SIAP...SEMOGA BERJAYA 





Background Post Title

Tadi ada request daripada seorang blogger ni untuk buat benda ni. Sebenarnya, nak buat benda ni sangat la confuse sebab saya pon buat sampai naik tension. Cuba teka berapa kali buat. 10 n above. Bila dah jadi lega sangat. Ok, tak pa, apa salahnya try. Cara-caranya :

1. Dashboard > Design > Edit HTML
2. Cari kod bawah ni ( tekan ctrl + F )
h3.post-title
3. Kalau tak jumpa cari kod ni
h4 }
4. Lepas tu, copy kod bawah ni pulak ( kod ni hanya untuk yang cari kod h3.post-title )
 border: 3px solid #C0C0C0; background: url(URL BACKGROUND); 
5. Paste di bawah kod  h3.post-title . 


6. Bagi yang cari kod  h4 }, copy kod bawah ni..sama juga pastekan di bawah kod h4 } tu ok.
   border:0px dashed #cc99cc; 
    text-align: center;
    margin:.5em 0 .5em;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.2em;
    background:url(URL BACKGROUND);
    color:$titlecolor;
    }
7.  Sebelum save, preview dulu...nanti kalau koding salah habis blog u all.
8. Eeeh. Sebentar. Aishah rajin la plak nak tunjuk contoh dari blog aishah ni supaya mudah untuk u all nka tengok kan..... skrg tengok bawah ni
nampakkan..jadilah. ok skrg cuba tengok yang dalam highlight kelabu tu saja. boleh bayangkan tak. 
1. Sebelum u all pastekan kod yang panjang tu  kat bawah kod h3.post-title , dia cuma macam ni ja

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
2. Lepas kita copy kod
 border: 3px solid #C0C0C0; background: url(URL BACKGROUND); 
tu kat bawah h3... tu , dia akan jadi macam ni pulak....
 h3.post-title, h4 {
  border: 3px dashed #66FFCC;
  background: url(http://i177.photobucket.com/albums/w223/peetzie/Background/back154.jpg);
  font: $(post.title.font);
  color: $(post.title.text.color);
3. sekarang tu dah selesai...kalau u all nak tukar warna border dia boleh tukar.  u all nampak tak kod ni kat dalam highlight kelabu tadi tu
border: 3px dashed #66FFCC;
ok, yg lepas dashed tu kan ada kod kan. kod tu adalah kod warna. kalau nak tukar kena letak kod warna yg betul la..kalau nak letak kod warna boleh tgk kat sini.


SEMOGA BERJAYA


# yang warna merah tu letak la url bacground yang sesuai ok..sebaik-baiknya jgnlah warna yang terlalu terang ok. background tu boleh dapat di photobucket... pilihlah nak yang jenis macam mana ok. 


Kalau jadi bagi tau, kalau tak faham, comment la..and yang tak jadi pon try lagi

Monday, 2 May 2011

Icon Di Sebelah Post Title

Icon apakah yang dimaksudkan....ok skrg cuba tgok dekat mana-mana post title blog ni....ada gambar matahari kan..ha itulah yg dimaksudkan.ok..car-caranya :

1.Dashboard > Design > Edit HTML > Tick Expand WIdget Template
2. Then tekan ctrl + F untuk cari kod ni
<a expr:href='data:post.url'><data:post.title/></a>
3. Lepas tu, copy kod yang bawah ni pulak
 <img src="LinkGambar"/> 
4. Paste di antara kod yang kita crai tadi. Maknanya dia akan jadi macam ini :
 <a expr:href='data:post.url'><img src="URL GAMBAR"/><data:post.title/></a>
5. Faham, tak..ok then, preview dulu baru save. Yang warna merah tu url gambar la ok. Gambar tu boleh dapatkan di sini 

* bawah ni ada contoh berserta url nya sekali..kalau nak just take it, ok
http://dl4.glitter-graphics.net/pub/438/438894serbnpz7w6.gif

http://dl4.glitter-graphics.net/pub/2831/2831034npzbqo30rd.gif

http://dl7.glitter-graphics.net/pub/478/478407lt9n39vae2.gif

http://dl7.glitter-graphics.net/pub/315/315867d100yirwak.gif

http://dl8.glitter-graphics.net/pub/471/471688z7umisdxx7.gif

Monday, 25 April 2011

Floating Button

Cuba tengok kat belah kiri blog ni. Ada macam-macam button kan. Antaranya, fb, myspace, gmail n many more. Haa, itulah floating button.

1. Dashboard > Design > Add Gadget > HTML/JavaScript
2. Copy kod 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:500px; left:-12px;'>
<a class='linkopacity' href='http://www.facebook.com/profile.php?id=100000640510332' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://i668.photobucket.com/albums/vv43/iomallard/facebook-button.gif" /></a><br />
<a class='linkopacity' href='http://www.myyearbook.com/aishah_youtube' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='myyearbook'><img border="0" src="http://i936.photobucket.com/albums/ad209/shadowstorm09/Gaia%20Stuff/commyyearbookm_icon.png" /></a><br />
 </div>
* Yang warna biru tu link website ok.
* Yang warna merah pulak url gambar yang bersesuaian.
* Yang warna ungu pulak tittla. Contohnya website yang kita letakkan Facebook, so tittle dia facebook la.
* Kalu nak tambah lagi just copy yang bawah ni, cuma ubah yang warna biru, purple dan merah tu ja.
 <a class='linkopacity' href='http://www.myyearbook.com/aishah_youtube' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='myyearbook'><img border="0" src="http://i936.photobucket.com/albums/ad209/shadowstorm09/Gaia%20Stuff/commyyearbookm_icon.png" /></a><br />
3. Save Siap.

Kalau tak jadi bagi tau. Takut ada kesilapan dalam tutorial ni.