Daisypath - Personal pictureDaisypath Happy Birthday tickers
Daisypath - Personal pictureDaisypath Anniversary tickers

..:: Selingan Cinta::..

Flying BeeFlying BeeFlying Bee Flying Bee Flying BeeFlying BeeFlying BeeFlying BeeFlying Bee Flying BeeFlying BeeFlying BeeFlying Bee
Showing posts with label blog. Show all posts
Showing posts with label blog. Show all posts

Sunday, 21 July 2013

Tutorial : Bubbles pada Cursor


jalan jalan nak update blog..
ye la.. baru tukar background.. so nak cari something yang upkan serinya..
alang alang baby dok mencuba itu and ini..
baby share sekali dengan korang


1. Dashboard > Design > Add Gadget > Html/Javascript

2. Then , copy kod di bawah and paste di ruangan html/javascript tuh ye :

<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>



**Yang warna merah tuh , korang boleh tukar kod warna yang korang nak ye! DI SINI !!


credit tutorial is from Cik Lyssa Faizureen. TQ~!!




Love,
BabyNurul Ain

Monday, 15 July 2013

Tutorial: Tukar Cursor



Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.

Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.

1. Buka website http://www.cursors-4u.com/

2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)

3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telahdiwarnakan seperti dibawah
<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

4. Kod akhir sepatutnya kelihatan seperti ini sahaja.

<style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.

6. Save dan lihat hasilnya.





Love,
BabyNurul Ain

Tutorial : Sidebar Chat Box



Pada kebiasaannya, shoutbox akan berada di sidebar dan akan dapat dilihat terus. Tutorial kali ini akan menunjukkan tutorial untuk sembunyikan shoutbox anda.:)



Antara sebab kenapa disembunyikan shoutbox ini adalah untuk menampakkan page yang lebih kemas dan mungkin juga untuk tampil unik berbanding blog-blog lain.


Tutorial sembunyikan shoutbox seperti di bawah

1. Login akaun blogger anda, dari dashboard > design > page element > add a gadget > HTML/javascript.

2. Copy dan paste kod berikut ke ruangan html/javascript

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://2.bp.blogspot.com/-hp5hb7Z7Gvk/TmzEhhJZRmI/AAAAAAAAGgo/vmECDANflYw/s320/shoutbox.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

KOD SHOUTBOX DISINI

<div style="text-align:right"><a href="http://tutorialuntukblog.blogspot.com/2011/09/tutorial-sembunyikan-shoutbox-blog.html" target="_blank"><small>tutorial here</small></a>
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>



Nota: Gantikan "KOD SHOUTBOX DISINI" dengan kod shoutbox anda.
(tiada shoutbox.?)


3. Save dan lihat hasilnya.:)






Love,
BabyNurul Ain

Thursday, 6 June 2013

Hot Header


bila kerajinan terserlah..
inilah hasilnya..


cantik tak???







Love,
BabyNurul Ain

Sunday, 2 June 2013

Samsung Camera Digital Giveaway by Nabeel Fikree








Korang tau ke Nabeel Fikree sekarang tengah mencari pemenang untuk Samsung Camera Digital Giveaway dia tu? Kalau korang tak tau, haaa mari sini saya kasi tau. Sebelum tu, saya nak bagitau korang syarat nak join giveaway ni pun senang je.


Giveaway ni dibuat sebagai tanda terima kasih kepada pembaca blog nabeelstories katanye. Saya malas nak cakap panjang lagi, terus je bagi korang baca syaratnya :

  1. Follow blog NabeelStories.com
  2. Buat satu entri bertajuk Samsung Digital Camera Giveaway by Nabeel Fikree
  3. Sila copy code yang telah disediakan dan paste pada ruangan HTML entry
  4. Tinggalkan link penyertaan pada ENTRY INI sahaja

Macam mana? Senang je kan? Saya join ni pun sekadar ingin mencuba nasib. Manalah tau kot2 terpilih dapat jugak posing depan kamera baru hari2. Hehee..


TARIKH TAMAT PENYERTAAN : 20 Jun 2013










Love,
BabyNurul Ain

June Giveaway - Lin Handmade Greeting Cards


waahh.. dah lama tak masuk contest...
so... kali nie kita torai test join giveaway by Kak Lin..

nie hadiah untuk bulan June.



mari kita cuba nasib..
sapa yang nk try.. boleh bukak page Kak Lin

http://azlina-lin.blogspot.com/2013/06/june-2013-blog-giveaway.html

Good Luck~!!





Love,
BabyNurul Ain

Saturday, 22 December 2012

Tutorial Blog : Scroll Archieve



Tutorial kali ini kan menunjukkan bagaimana untuk jadikan blog archive anda boleh scroll untuk menampakkannya lebih ringkas menyenangkan mata memandang.:)



Tutorial untuk buat scroll bagi blog archive adalah seperti berikut.



1. Dari dashboard > design > edit html > Expand widget templates.
(backup template untuk langkah berjaga²)

2. Menggunakan fungsi find (ctrl + F), cari kod <div id='ArchiveList'>

3. Anda akan jumpa kod ini <div class='widget-content'> sebelum kod <div id='ArchiveList'>

4. Gantikan kod <div class='widget-content'> yang anda jumpa di langkah 3 dengan kod berikut.

<div class='widget-content' style='overflow:auto; height:200px'>


Note: Anda boleh tukar 200px dengan ketinggian yang anda mahukan.

Contoh:

Sebelum.


Selepas


4. Save dan lihat hasilnya.:)

-------------


EditingMySpace.com - Valentines Day Dividers



BabyNurul Ain

Tutorial Blog : Fieldset



Preview:
Pada kotak fieldset ini, korang boleh letak sebarang image yang korang nak beserta dengan text sendiri. Menarik kan? jom tengok tutorial macam mana cara nak buat Fieldset ni.

Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Page Element > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<fieldset><legend><img src="URL IMAGE"/></legend>TEXT ANDA</fieldset>

Nota:
URL IMAGE - letak url image yang korang nak. 
TEXT ANDA -
text korang
4) Dah selesai, klik save dan lihat hasilnya.


credit : Jom Bina Blog

EditingMySpace.com - Valentines Day Dividers


BabyNurul Ain

Tutorial Blog : Link Effect / Nudging



Demo:

Cuba korang lalukan cursor pada mana-mana link dalam blog ni, apa jadik? ada goyang tak? :) efek menarik ni korang boleh cuba apply dekat blog masing-masing.. kalau berminat la, kalo tak berminat jangan paksa diri ok,he2..caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>
400 - speed / laju efek nudging. Korang boleh adjust nilai ni untuk kelajuan efek, lagi kecik nilai, lagi laju efek goyang.

4) Lastly macam biasa, klik save dan lihat hasilnya.

Selamat mencuba! :) 

credit : Jom Bina Blog 

EditingMySpace.com - Valentines Day Dividers



BabyNurul Ain

Tutorial Blog : Button Like Fb di Post


Selain meletakkan button ini di sidebar, anda juga boleh meletakkannya pada setiap bawah entri post blog anda. Caranya:

1) Sign in akaun blogger

2) Dashboard > Design > Edit HTML > Tick kotak "Expand Widget Template"

(jangan lupa "backup template" terlebih dahulu sebelum melakukan apa-apa perubahan pada skrip html, sebagai langkah berjaga-jaga)

3) Dengan menggunakan ctrl + F (tekan serentak pada keyboard), cari kod  
<data:post.body/>

4) Letakkan kod di bawah  SELEPAS kod <data:post.body/> yang anda cari di langkah 3 tadi
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

* Rupa kod anda akan jadi seperti ini 
<data:post.body/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

5) Save dan lihat hasilnya. Selamat mencuba! :)


EditingMySpace.com - Valentines Day Dividers



BabyNurul Ain