Circle Smoke Cursor Effect


Assalamualaikum, apa kabar?
Oh hari ni org cuti. Hihi. 
Jom buat tuto ni.

Ok cuba anda click la kat mana2, nnt ada keluar mcm smoke bulat2 cam tu .

  • Dashboard > Layout > Add a gadget > HTML/Javascript
  • Copy all the code bellow.

<script type="text/javascript">
// <![CDATA[
var smokeyness=100; // 
var density=40; // 
var swide=800;
var shigh=600;
var toke=new Array();
var tokex=new Array();
var tokedx=new Array();
var tokey=new Array();
var nicotine=new Array();
var mousedown=false;
var ie=false;
var x=400;
var y=300;
var sleft=sdown=0;
function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}
addLoadEvent(puff);
function puff() { if (document.getElementById) {
  var i, fag;
  if (/MSIE (\d{1,2}\.\d+);/.test(navigator.userAgent)) ie=new Number(RegExp.$1);
  for (i=0; i<smokeyness; i++) {
    fag=document.createElement("div");
    toke[i]=fag.style;
    toke[i].position="absolute";
    toke[i].backgroundColor="transparent";
    toke[i].font="bold "+density+"px Tahoma, Geneva, sans-serif";
    toke[i].color="rgba(234,234,234,0.033)";
    toke[i].zIndex="9999";
    toke[i].pointerEvents="none";
    toke[i].visibility="hidden";
    fag.appendChild(document.createTextNode(String.fromCharCode('0x25CF')));
    document.body.appendChild(fag);
    tokey[i]=false;
  }
  set_scroll();
  set_width();
  setInterval(drag, 50);
}}
function drag() {
  var c;
  if (mousedown) for (c=0; c<smokeyness; c++) if (tokey[c]===false) {
    toke[c].left=(tokex[c]=x-density/2)+"px";
    toke[c].top=(tokey[c]=y-density)+"px";
    toke[c].visibility="visible";
    tokedx[c]=(c%2?1.5:-1.5)*Math.random();
    nicotine[c]=80;
    break;
  }
  for (c=0; c<smokeyness; c++) if (tokey[c]!==false) smoke_rising(c);
}

document.onmousedown=function(){set_scroll();if(ie)setTimeout('mousedown=true', 51);else mousedown=true;};
document.onmouseup=function(){mousedown=false};
function smoke_rising(i) {
  var cancer;
  tokey[i]-=4+i%3;
  tokex[i]+=tokedx[i]-0.5+Math.random();
  if (tokey[i]>sdown-density*2 && tokex[i]>sleft && tokex[i]<sleft+swide-density && (nicotine[i]+=2)<256) {
    cancer=nicotine[i].toString(16);
    cancer="#"+cancer+cancer+cancer;
    if (ie && ie<10) toke[i].filter="Glow(Color="+cancer+",Strength="+Math.floor(nicotine[i]/5)+")";
    else if (ie)  toke[i].textShadow='#000000 0px 0px '+Math.floor(nicotine[i]/5)+'px';
    else toke[i].textShadow=cancer+' 0px 0px '+Math.floor(nicotine[i]/5)+'px';
    toke[i].top=tokey[i]+"px";
    toke[i].left=tokex[i]+"px";
  }
  else {
    toke[i].visibility="hidden";
    tokey[i]=false;
  }
}
document.onmousemove=mouse;
function mouse(e) {
  if (e) {
    y=e.pageY;
    x=e.pageX;
  }
  else {
    set_scroll();
    y=event.y+sdown;
    x=event.x+sleft;
  }
}
window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
    if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)=='number' && self.innerWidth) {
    if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  }
  if (sw_min==999999 || sh_min==999999) {
    sw_min=800;
    sh_min=600;
  }
  swide=sw_min;
  shigh=sh_min;
}
window.onscroll=set_scroll;
function set_scroll() {
  if (typeof(self.pageYOffset)=='number') {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body && (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;
  }
}
// ]]>
</script>


  • Yang Yura bold kan tu boleh tukar , lagi banyak nombor boleh slow kan script.
  • Warna merah tu warna smoke tu .Kalau nak tukar, pergi sini.
  • Cara nak ambil :

  • Ape pun , Save la lepas tu ^^ 

Segmen : Blogger Pinkish and Purplish


Assalamualaikum, hai Yura nak join satu segmen ni. Rasa mcm best aje.
Kalau blog korang bukan warna pink or purple pun takpe.
Korang still boleh join.
Untuk lebih lanjut, klik aje banner tu. ^^

Ok, apa yang Yura nak pertaruhkan tu.


Ini blog Yura. Warna pink. Dalam banyak2 warna, pink juga yang Yura suka. ^^




Telekung yang Yura pakai pun pink. Ibu belikan.




Casing phone Yura. Sayang sangat casing ni, sbb comel.

Hmm sebenarnya banyak lagi, tapi rasa malu pulak nak show off semuanya kan.

Ok,sekian sahaja. Wallahualam~

Title Blog Moving




Assalamualaikum, tuto hari ni nak tunjuk mcm mana nak buat Tittle blog gerak2.
Baiklah ,cuba korang tengok tab kat atas.
Macam tu lah rupanya.

  • Dashboard > Layout > Add a Gadget > HTML/Javascript
  • Copy semua code kat bawah ni dan paste kat dalam kotak HTML/Javascript tu
<script type="text/javascript">
//Created by Title bar Maker ()
function tb5_makeArray(n){
    this.length = n;
    return this.length;
}
tb5_messages = new tb5_makeArray(1);
tb5_messages[0] = "TAJUK BLOG ANDA";
tb5_rptType = 'infinite';
tb5_rptNbr = 5;
tb5_speed = 200;
tb5_delay = 2000;
var tb5_counter=1;
var tb5_currMsg=0;
var tb5_stsmsg="";
function tb5_shuffle(arr){
var k;
for (i=0; i<arr.length; i++){
    k = Math.round(Math.random() * (arr.length - i - 1)) + i;
    temp = arr[i];arr[i]=arr[k];arr[k]=temp;
}
return arr;
}
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
    tb5_arr[i] = i;

tb5_sts[i] = "_";

}
tb5_arr = tb5_shuffle(tb5_arr);
function tb5_init(n){
var k;
if (n == tb5_arr.length){

if (tb5_currMsg == tb5_messages.length-1){
if ((tb5_rptType == 'finite') && (tb5_counter==tb5_rptNbr)){
clearTimeout(tb5_timerID);
return;
}
tb5_counter++;
tb5_currMsg=0;
}
else{
tb5_currMsg++;
}
n=0;
tb5_arr = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
tb5_sts = new tb5_makeArray(tb5_messages[tb5_currMsg].length);
for (var i=0; i<tb5_messages[tb5_currMsg].length; i++){
tb5_arr[i] = i;
tb5_sts[i] = "_";
}
tb5_arr = tb5_shuffle(tb5_arr);
tb5_sp=tb5_delay;

}
else{

tb5_sp=tb5_speed;
k = tb5_arr[n];
tb5_sts[k] = tb5_messages[tb5_currMsg].charAt(k);
tb5_stsmsg = "";
for (var i=0; i<tb5_sts.length; i++)
tb5_stsmsg += tb5_sts[i];
document.title = tb5_stsmsg;
n++;
}
tb5_timerID = setTimeout("tb5_init("+n+")", tb5_sp);

}
function tb5_randomizetitle(){

tb5_init(0);

}
tb5_randomizetitle();
</script>
<script>
$(document).ready(function() {
    //
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Get Popup Name
    var popURL = $(this).attr('href'); //Get Popup href to define size
    //Pull Query & Variables from href URL
    var query= popURL.split('?');
    var dim= query[1].split('&');
    var popWidth = dim[0].split('=')[1]; //Gets the first query string value
    //Fade in the Popup and add close button
    $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://static.tumblr.com/2bh9bxo/iTXmdcocj/sbdb.gif" class="btn_close" title="Volte My boo" alt="Close" /></a>');
    //Define margin for center alignment (vertical   horizontal) - we add 80px to the height/width to accomodate for the padding  and border width defined in the css
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;
    //Apply Margin to Popup
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });
    //Fade in Background
    $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
    return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  //fade them both out
    });
    return false;
});
});
</script>


  • Jangan lupa untuk letak nama blog awak.
  • Lepas tu Save! 

2nd Bombastic Giveaway by Cik Amabee


Jom join. Hadiah menarik gitew!

Tekan aja banner kat atas.

Dancing Status.


Assalamualaikum.
Dan tanpa berlengah lagi, jom lihat kat bawah ni.

| | | hari ini saya nak makan banyak2 | | |

  • Dashboard > Layout > Add a Gadget > HTML/JavaScript
  • Copy all the code below and paste kat dalam HTML/Javascript box itu.
<center><marquee behavior="alternate" direction="left" scrollamount="3" width="8%"><font=webdings><span style="color:#ff6666;"> ♥ </span></font=webdings></marquee><marquee scrollamount="1" direction="left" width="2%">| | |</marquee><span style="color:#ff6600;">YOUR TEXT HERE</span><marquee scrollamount="1" direction="right" width="2%">| | |</marquee><marquee behavior="alternate" direction="right" scrollamount="3" width="8%"><font=webdings><span style="color:#ff6666;"> ♥</span></font=webdings></marquee></center>


  • Yang Yura bold kan itu boleh diubah. Untuk code warna ,ambil kat sini.
  • Bentuk  ♥ tu boleh di tukar dengan bentuk yang lain. Macam ini :
✖ ✗ ✘ ♒ ♬ ✄ ✂ ✆ ✉ ✦ ✧  ♂ ♀ ☿ ❤ ❥ ❦ ❧ ™ ® © ♡ ♦ ♢ ♔ ♕ ♚ ♛ ★ 

Ok ,sekian sahaja untuk tuto kali ni. Kalau jadi ,komen la sini. Boleh Yura terjah and blogwalking sekali ^^


The Kemas Day.



Assalamualaikum, 
dan hai awak? Awak yang sedang membaca :)

Awak apa kabar?
Awak dah makan?
Awak puasa tak esok ?
Jom buat puasa sunat sama2 ?

Haha, apa kenalah dengan entry ni?

Ok itu bukan ceghitanye.
Dah 2 hari Yura tak update entry. Tapi Yura rasa mcm seminggu aja.
Haha. Rindu beno nak buat tuto.

Sebenarnya start hari Jumaat, Yura dah start busy.
Bukan busy study, tapi busy kemas rumah.
Hari Sabtu dan Ahad, Yura kerja jadi cikgu tusyen.

Dan sepanjang Sabtu dan Ahad, kerja ku hanyalah mengemas rumah dan kemas, dan kemas.
Kenapa? 
Sebab keluarga sebelah mak Yura datang, dan tido kat umah Yura tu.
Dan sejurus mereka pulang, Yura sambung kemas rumah...again..

Dan begitu lah ,sampai Yura buka blog ni untuk kemas kini entry pulak.

Kepada yang telah follow Yura, I follow u back k.
So dun worry ye.

Ok. That's all.
Ready for tomorrow, untuk our next tutorial (^-^)/



p/s : Saya belajar sesuatu hari ini iaitu, dunia dicipta untuk manusia, tapi manusia dicipta untuk akhirat. Dunia ini hanyalah wasilah,dan akhirat adalah matlamat. Tapi manusia lebih suka letakkan matlamat semasa di dunia. Dan yang terakhir, nikmat yang palinggggggggggg besar semasa di syurga ialah dapat melihat wajah Allah. >.< 

Mini Social Network Icon


Cara nak guna social network icon kat sini.
Cara ambil url image : 

Right click dekat gambar yang anda mahu > Copy Image URL

Paint Style











Crayon Style












Normal style












Cara Guna Social Network Icon


Assalamualaikum, tadi Yura dapat satu request dari seorang blogger .


Yura tak pasti la, mungkin Nana maksudkan mcam mana nak bagi nampak center kot. Agaknya lah.
Tapi tak pe. Alang2 Nana dah tanye tu, Yura ajarkan caranya.

Put at sidebar

  • Lepas tu, Dashboard > Layout > Add a Gadget > HTML/Javascript
  • Masukkan code ini ,
<center><a href="LINK HERE"><img src="IMAGE URL HERE"></a></center>
  • Masukkan image url. Boleh dapatkan gambar di sini.
  • Masukkan sekali link utk gambar tersebut.
  • Kalau gambar lebih dari satu, mcam kat sidebar Yura tu, masukkan code ni
<center>
<a href="LINK"><img src="URL GAMBAR"/></a>
<a href="LINK"><img src="URL GAMBAR"/></a>
<a href="LINK"><img src="URL GAMBAR"/></a></center>


Floating Style

  • Lepas tu, Dashboard > Layout > Add a Gadget > HTML/Javascript
  • Masukkan code ni.
<div style="position: absolute; top: 34px; left:33px;"><center>
<a href="LINK"><img src="URL GAMBAR"/></a><br>
<a href="LINK"><img src="URL GAMBAR"/></a><br>
<a href="LINK"><img src="URL GAMBAR"/></a></center></div>


  • Anda boleh ubah :   
Hijau   : Kalau anda nak button like itu bergerak sekali semasa scroll down ,tukarkan kepada absolute kepada fixed

Merah : Semakin banyak nilai, semakin ke bawah button

Oren    : Semakin banyak nilai ,semakin ke kanan button.

Macam mana? Faham tak? Sorry sangat kalau xfaham >.<



Rotating Menu Hover


Hover the menu below : 



  • Dashboard > Layout > Add a Gadget > HTML/JavaScript
  • Copy all the code below :
<style>
#linkz a {display:block;float:left;background:#WARNABACKGROUND;margin-left:1px;padding:3px;width:100px;font-family:calibri;font-size:8px;text-transform:uppercase;height:14px;margin-bottom:1px;border-radius:4px;text-align:center;-webkit-transition:all 1.4s ease-out;-o-transition:all 1.4s ease-out;-moz-transition:all 1.4s ease-out;transition:all 1.4s ease-out;text-decoration:none;color:#WARNA TEXT;}
#linkz a:hover {-webkit-transform: rotateY(360deg);}
</style>
<div id="linkz">
<a href="LINK">NAMA LINK</a>
<a href="LINK">NAMA LINK</a>
<a href="LINK">NAMA LINK</a>
<a href="LINK">NAMA LINK</a>
<a href="LINK">NAMA LINK</a>
<a href="LINK">NAMA LINK</a>
</div>
  • Untuk code warna dapatkan di sini.
  • Yang warna merah tu boleh tukar nombornya .Semakin besar nombor ,semakin besar size text .
  • Disarankan letak code ni dibawah header ^^
  • Lepas tu Save !
Kalau jadi,jangan lupa komen tau !

Zoom In and Out Image Effect


Hover this picture ~
  • Dashboard > Template > Edit Html >  Click icon yang mcm ►> Ctrl+F  (Pastikan anda click dlm kotak html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
 @-webkit-keyframes  scale{ 

0% {-webkit-transform: scale(0.5); }
50% {-webkit-transform: scale(1.3); }
100% {-webkit-transform: scale(0.5); }
}
a img {
-webkit-transition: .7s; border-radius: 5px; box-shadow: 1px 1px #caebe6;}
img:hover {
-webkit-animation: scale .7s alternate infinite linear;}

  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi 
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !

Ribbon/Bow Cursor(s)


Assalamualaikum. Hari ni Yura nak share freebies pulak. 
Asyik tuto aje an..

Awak nak cursor ala-ala ribbon camtu.
 Meh amek kat sini, ianya percuma je tau ^^
Anda cuma perlu tinggalkan komen :D








Cara guna :
  • Dashboard > Layout > Add Gadget > HTML/Javascript dan masukkan code dibawah .

<style type="text/css">body
{cursor:url("URL IMEJ CURSOR ANDA"),default}
</style>
  • Ambil URL cursor dulu 
  • Right click dekat cursor yg anda mahu > Tekan Copy Image URL

  • Paste kan kat dalam URL IMEJ CURSOR ANDA tu
  • Lepas tu Save !


Nak tengok cursor yg lain pulak ? Usha sini

Nak buar cursor sendiri secara online? Tengok sini