Thursday, January 31, 2013

C-Clown | MTV Diary

Tumblr_mgu7eu03ll1r6qh8ko1_500_large

こんにちは, 안녕하세요 , Assalamualaikum. Lamanya tak update blog -,- . Asyik-asyik dengan tutorial huhu . Tapi kali ni atin nak update status haha . Pasti korang semua bosan dengan tuto je? Tak? hmm ape-ape je lah , sebab atin tnegah ada something yang buat atin happy minggu ni .


Korang-korang , Atin nak cakap yang Atin dah minat dengan group BTOB and C-Clown LOL >< . Haha tak pengtingkan >.< Ala anggap je kebetulan sebab BIGBANG atin sekarang kan tengah rehat , baru je tamat habis jelajah diorang kat luar tu. Just tengah tunggu Daesung buat album jepun dia . Jadi atin VIP pun rehat jab LOL haha XD . 


Atin kan bosan . So atin layan you tube pulak . Dah lama kot atin tak layan video . Sorry ye atin tak layan video2 pelek kat situ. Atin saja nak tengok MTV Diary . Sebab pada atin MTV diary ni best kot haha . Mula2 atin tengok BTOB . Alhamdulillah dah habis da atin tengok . Tapi malas pulak nk cerita balik kat sini huhu . lagi pun video tu kan dalah lama . Atin je baru tahun ni tengok . 


So lepas habis tengok . Atin ternampak episod tu ada group C-CLOWN. Tapi bila atin tengok , adui sikit je diary diorang buat -,- . Tapi tak pa sebab Atin nak kenal2 juga group ni sejak atin tengok ada mamat dalam group tu buat atin nak jadi fan dia je haha XD . 




Korang tengok , mamat yang atin cakap tu is Kangjun :D . tapi ada pulak mamat sorang ni buat atin terjunam kat dia huaaa >< . Dalam MTV diary BTOB n C-CLOWN ni ,  group ni banyak cakap pulak haha  , terutama si Kangjun tu la :D . Baru aku tau dia ni banyak cakap rupanya . Btw atin dah ingat nama diorang semua  Rome , Ray , Kangjun , T.K , Siwoo , and Maru . Betul tak? haha perasan betul la si kangjun ni , terlepas cakap yang dia is leader . Rupanya si Rome , kan dah kene pelekeh dengan Rome haha .

Sorry episod ni diorang ni tak ada subtitle lol :( . So atin tak tau sangat diorang cerita apa haha


Diorang panggil Kangjun Junnie ek? Ok Atin panggil junnie lah LOL haha . Btw atin suka episod yang ni :D . Atin tengok part kat bedroom . Korang tengok video [6:00] . Omo Junnie kenapa ek? haha . Atin suka la tengok junnie n ray . Atin un tak tau kenapa dengan junnie ek? huhu.



Atin tengok mula dari video [2:46] sampai [7:10] haha kelakar doh , ape la yang diorang buat kat atas bangunan tu? . Omo junnie sexy pulak . btw maru , junnie and rome main spy :D . Yang lebih tu so junnie ah haha ada hati nak jadi spy . 



Part [1:56] diorang lawan main besball *betul ke nama permainan ni? haha . Rome n Ray satu team , Maru team dengan Junnie sebab team tu diorang kata Junnie n Ray pandai main . So kiranya Ray nak lawan ngn Junnie . Akhirnya team junnie kalah sebab maru tak banyak score . So team kalah kene belanja member diorang . 



Siwoo at [7:07] LOL? what are you doing ? Look like crazy . Haha mula-mula atin pikir Siwoo ni pendiam . Rupanya ada juga tabiat buruk dia hahah XD.




Ray at [1:30] huaaa XD . Itu bukan guna untuk bulu ketiak la ray oi , itu untuk pakai kat rambut XD . LOL? Junnie so scary -,- . sambil pulak dia dance pulak tu --. . i like RayJun :D



LOL? Junnie!!! jangan la hug leader awak tu , sakit LOL -.- .Episod kali ni diorang di suruh buat aktiviti melukis . Aww Atin tak pandai lukis >< . Tapi kenapa Junnie pandai sangat lukis XD . Haishh junnie macam pakar pelukis pulak atin tengok hah , sebab cara dia duduk tu n cara dia pegang crayon tu ? hihi  :) . Btw T.K [9:06] apa yang ko lukis tu? ish2 >< . Gambar Rome? haha kecik and nampak tua XD . 



Wow lawa la gambar Siwoo ^0^ . Pandai rome . Tengok [3:27] Junnie duduk , omo pakar lukis tu haha . Wait? [7:11] Junnie? awak pencuri!!!!! . Amik kau kene kejar dengan rome >< . Aigoo [7:55] rome , jangan buat benda tu . tempat awam tu . Aigoo junnie pun satu . nak curi agak-agak la -,- .



Btw , Atin tengok Rome ni macam rupa Yong Hwa CN Blue kan? hmm . Then Si Siwoo pulak macam muka Heechul Suju *miss heechul :( . Ehh episod ni , best2 , atin banyak gelak tengok episod ini . haha . 

Korang tengok yang [4:05] . Appo ! Rome are you ok? aigoo pabo LOL .Junnie at  [5:25] XD , tengok tu pandai ke lukis tu? haha tangan tu untuk ukur si maru tu XD . Ehh perasan tak perasa Atin ternampak sorang budak kecik? haha .  .Btw kalau korang prasan kat situ xde Ray . Hmm mana Ray? :( . Maru [6:30] punyalah posing dia > .< .Hasilnya? [7:15]. Aishh junnie!! aku pikir ko pndai lukis? ini jadinye? penat2 je maru posing sexy tu .

Haha , korang tengok part [8:10] Poor Siwoo :(  ' he fell off the swing and landed on his butt '.  Itu la buat laju-laju buayan tu . Kan dah terjatuh -,- . Junnie ni pun satu , jadi pencuri lagi -,- . Siwoo dok cari-cari barang dia ;(.



Sampai episod ni je -,- . Sikit sangat but its ok la . Kalau internet atin laju , Atin nak tengok yang ETN Channel punya pulak :D  Best pulak tengok perangai diorang tu , terutama RayJun :D 


Tumblr_mgu4iccaa71r6qh8ko1_500_large

Tuesday, January 29, 2013

Blogskin #4 : Rilakkuma Is Bear


| DOWNLOAD | 


こんにちは, 안녕하세요 , Assalamualaikum. Seperti yang Atin janjikan . Atin dah pun siap buat blogskin ke -4 . Nak bagi bintang? boleh2.. pergi click INFO kat atas tu :D. Macam yang atin cakap . Atin tak boleh kalau tak ada theme . Kena ada theme baru boleh hahah .


Pink dah ada. Kelabu pun dah ada. So kali ni warna chocolate gitu haha .Tapi yang ni bukan chocolate kot? oren sikit tak? hmmm -,- . Hehe Atin buat simple2 je. Tapi macam biasa , semua tu hak cipta 100% dari atin. Ia sama code dengan blogskin VERSUS hari tu. So xde masalah atin ubah untuk theme je..


Harap korang suka ye.... Seperti biasalah AMARAN JANGAN DELETE CREDIT  .

Sunday, January 27, 2013

Tutorial : Two Image Hover

CLICK Pic to Preview

こんにちは, 안녕하세요 , Assalamualaikum. dua hari tak buat tutorial , macam-macam komen huhu . Tapi hari ni atin dah kembali ke tuto lagi . Hari ni Atin nak bagi tuto image hover effect punya. Ini style baru ek? hihi . Korang nak try boleh tapi pandai2 lah edit ukur sendiri eh. Sebab Atin ni pemalas orangnya haha .. nak tengok korang clcik gambar atas ni then . mase kat sana korang hala cursor . Jadi ap? huhu.. try la.

  • Blogskins/ Classic template : Paste bawah </style>
<style>
.container {
  position: relative;
  margin: 30px;
  height: 300px;
  width: 650px;
  float: left;
}

/*PHOTO SHAPE*/
.picone, .pictwo {
  border: 5px solid #fff;
  border-radius: 3px;
  height: 200px;
  margin: 20px;
  position: absolute;
  width: 300px;

  -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
          box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
}


/*SPECIFIC PHOTOS*/
.picone {
  -webkit-transform: rotate(-7deg);
     -moz-transform: rotate(-7deg);
       -o-transform: rotate(-7deg);
      -ms-transform: rotate(-7deg);
          transform: rotate(-7deg);
}

.pictwo {
  left: 100px;
  -webkit-transform: rotate(7deg);
     -moz-transform: rotate(7deg);
       -o-transform: rotate(7deg);
      -ms-transform: rotate(7deg);
          transform: rotate(7deg);
}

/*HOVERS*/
.container:hover {
  cursor: pointer;
}

.container:hover .picone {
  -webkit-animation: picone 1.5s 2 alternate;
     -moz-animation: picone 1.5s 2 alternate;
      -ms-animation: picone 1.5s 2 alternate;
       -o-animation: picone 1.5s 2 alternate;
          animation: picone 1.5s 2 alternate;
}

.container:hover .pictwo {
  -webkit-animation: pictwo 1.5s 2 alternate;
     -moz-animation: pictwo 1.5s 2 alternate;
      -ms-animation: pictwo 1.5s 2 alternate;
       -o-animation: pictwo 1.5s 2 alternate;
          animation: pictwo 1.5s 2 alternate;

}

/*KEYFRAME ANIMATIONS*/
@keyframes "picone" {
 0% {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
 }
 50% {
    -webkit-transform: rotate(-14deg);
    -moz-transform: rotate(-14deg);
    -o-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg);
 }
 100% {
    -webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
    -ms-transform: rotate(-7deg);
    transform: rotate(-7deg);
 }

}

@-moz-keyframes picone {
 0% {
   -moz-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }
 50% {
   -moz-transform: rotate(-14deg);
   transform: rotate(-14deg);
 }
 100% {
   -moz-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }

}

@-webkit-keyframes "picone" {
 0% {
   -webkit-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }
 50% {
   -webkit-transform: rotate(-14deg);
   transform: rotate(-14deg);
 }
 100% {
   -webkit-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }

}

@-ms-keyframes "picone" {
 0% {
   -ms-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }
 50% {
   -ms-transform: rotate(-14deg);
   transform: rotate(-14deg);
 }
 100% {
   -ms-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }

}

@-o-keyframes "picone" {
 0% {
   -o-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }
 50% {
   -o-transform: rotate(-14deg);
   transform: rotate(-14deg);
 }
 100% {
   -o-transform: rotate(-7deg);
   transform: rotate(-7deg);
 }

}

@keyframes "pictwo" {
 0% {
    left: 100px;
    z-index: 1;
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
 }
 49% {
    left: 350px;
    z-index: 1;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
 }
 50% {
    left: 350px;
    z-index: -3;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
 }
 100% {
    left: 100px;
    z-index: -3;
    -webkit-transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
    transform: rotate(7deg);
 }

}

@-moz-keyframes pictwo {
 0% {
   left: 100px;
   z-index: 1;
   -moz-transform: rotate(7deg);
   transform: rotate(7deg);
 }
 49% {
   left: 350px;
   z-index: 1;
   -moz-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 50% {
   left: 350px;
   z-index: -3;
   -moz-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 100% {
   left: 100px;
   z-index: -3;
   -moz-transform: rotate(7deg);
   transform: rotate(7deg);
 }

}

@-webkit-keyframes "pictwo" {
 0% {
   left: 100px;
   z-index: 1;
   -webkit-transform: rotate(7deg);
   transform: rotate(7deg);
 }
 49% {
   left: 350px;
   z-index: 1;
   -webkit-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 50% {
   left: 350px;
   z-index: -3;
   -webkit-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 100% {
   left: 100px;
   z-index: -3;
   -webkit-transform: rotate(7deg);
   transform: rotate(7deg);
 }

}

@-ms-keyframes "pictwo" {
 0% {
   left: 100px;
   z-index: 1;
   -ms-transform: rotate(7deg);
   transform: rotate(7deg);
 }
 49% {
   left: 350px;
   z-index: 1;
   -ms-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 50% {
   left: 350px;
   z-index: -3;
   -ms-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 100% {
   left: 100px;
   z-index: -3;
   -ms-transform: rotate(7deg);
   transform: rotate(7deg);
 }

}

@-o-keyframes "pictwo" {
 0% {
   left: 100px;
   z-index: 1;
   -o-transform: rotate(7deg);
   transform: rotate(7deg);
 }
 49% {
   left: 350px;
   z-index: 1;
   -o-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 50% {
   left: 350px;
   z-index: -3;
   -o-transform: rotate(20deg);
   transform: rotate(20deg);
 }
 100% {
   left: 100px;
   z-index: -3;
   -o-transform: rotate(7deg);
   transform: rotate(7deg);
 }

}
</style>

  • Then copy code ke-2 bawah ni dan paste kat bahagian yang korang suka .
<div class="container">
<img class="picone" src="URL IMAGE 1" />
  <img class="pictwo" src="URL IMAGE 2" />
</div>

Saturday, January 26, 2013

New Year GA by Cik Akma

こんにちは, 안녕하세요 , Assalamualaikum

CLICK BANNER UNTUK JOIN

tag
http://cadburyyylover.blogspot.com/
http://naddiera-hashim.blogspot.com/


Friday, January 25, 2013

Tutorial : Follower Widget Tanpa Jumlah/link

Tumblr_mgq4p3pbo61rabcwao1_500_large


こんにちは, 안녕하세요 , Assalamualaikum. Semalam ade reQ dari seseorang..dia tanya mcm mana nak buat jumlah follower bagi tak nampak.. tapi req lagu satu tu, atin dh cuba tapi x boleh .. So Atin tunjuk cara atin lah :).



1. Kalau sesiapa yang ada follower widget tekan CTRL+U .
2. Then tekan lagi ctrl+F dan cari code "google.friendconnect"
3. Dah jumpa korang cari code seakan macam bawah ni . dan tukar kepada "transparent"
skin['BORDER_COLOR'] = "#ffd7e1";
    skin['ENDCAP_BG_COLOR'] = "transparent";
    skin['ENDCAP_TEXT_COLOR'] = "transparent";
    skin['ENDCAP_LINK_COLOR'] = "transparent";
    skin['ALTERNATE_BG_COLOR'] = "transparent";
 
    skin['CONTENT_BG_COLOR'] = "transparent";
    skin['CONTENT_LINK_COLOR'] = "transparent";
    skin['CONTENT_TEXT_COLOR'] = "transparent";
    skin['CONTENT_SECONDARY_LINK_COLOR'] = "#ffd7e1";
    skin['CONTENT_SECONDARY_TEXT_COLOR'] = "#ffd7e1";
    skin['CONTENT_HEADLINE_COLOR'] = "transparent";

Kalau yang guna blogkin. korang copy paste dalam notepad .
Then paste kat bahagian follower widget korang.

Thursday, January 24, 2013

Tutorial : Falling Rain Effect #2

Tumblr_mg7u775lic1s2rsseo1_500_large

こんにちは, 안녕하세요 , Assalamualaikum. Atin nak bagi lagi ni.. yang rain effect punye untuk kali ke-2. So harap korang boleh pakai la hihi .




  • Blogskin/classic : paste bawah <head>
  • Template Denim/simple : paste dalam Add gadget > HTML/Javascript

<script type="text/javascript">
// <![CDATA[
var speed=33; // lower number for faster
var drops=100; // number of 'drops'
var colour="#999"; // colour of drops (generally grey!)

/***************************\
*   Rainy Afternoon Effect  *
* (c) 2011 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var flks=new Array();
var flkx=new Array();
var flky=new Array();
var fldy=new Array();
var swide, shigh, boddie;
window.onload=function() { if (document.getElementById) {
  var r1, r2;
  boddie=document.createElement("div");
  boddie.style.position="fixed";
  boddie.style.top="0px";
  boddie.style.left="0px";
  boddie.style.width="1px";
  boddie.style.height="1px";
  boddie.style.overflow="visible";
  boddie.style.backgroundColor="transparent";
  document.body.appendChild(boddie);
  set_width();
  for (var i=0; i<drops; i++) {
    flks[i]=createDiv(16, 2, "transparent");
    r1=createDiv(6, 2, colour);
    r1.style.top="10px";
    r1.style.left="0px";
    flks[i].appendChild(r1);
    r2=createDiv(10, 2, colour);
    r2.style.top="0px";
    r2.style.left="0px";
    if (navigator.appName=="Microsoft Internet Explorer") r2.style.filter="alpha(opacity=25)";
    else r2.style.opacity=0.25;
    flks[i].appendChild(r2);
    flkx[i]=2*Math.floor(Math.random()*swide/2);
    flky[i]=Math.floor(Math.random()*shigh);
    fldy[i]=2+Math.floor(Math.random()*4);
    flks[i].style.left=flkx[i]+"px";
    flks[i].style.top=flky[i]+"px";
    boddie.appendChild(flks[i]);
  }
  setInterval("cats_and_dogs()", speed);
}}

function createDiv(height, width, colour) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}

window.onresize=set_width;
function set_width() {
  var sw_min=999999;
  var sh_min=999999;
  if (document.documentElement && document.documentElement.clientWidth) {
    sw_min=document.documentElement.clientWidth;
    sh_min=document.documentElement.clientHeight;
  }
  if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
    if (self.innerWidth<sw_min) sw_min=self.innerWidth;
    if (self.innerHeight<sh_min) sh_min=self.innerHeight;
  }
  if (document.body.clientWidth) {
    if (document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
    if (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-2;
  shigh=sh_min;
}

function cats_and_dogs(c) {
  var i, x, o=0;
  for (i=0; i<drops; i++) {
    flky[i]+=fldy[i];
    if (flky[i]>=shigh-16) {
 flky[i]=-16;
 fldy[i]=2+Math.floor(Math.random()*4);
 flkx[i]=2*Math.floor(Math.random()*swide/2);
 flks[i].style.left=flkx[i]+"px";
}
flks[i].style.top=flky[i]+"px";
  }
}
// ]]>
</script>
merah : color untuk rain

Tutorial : Hide Music Player #3

Tumblr_mh3a6qycj81rspl5co1_500_large

こんにちは, 안녕하세요 , Assalamualaikum. Atin pernah guna hide music ni mase blog yang pertama . So sebab atin dah pernah guna Atin bagi korang la cube pulak huhu..Nak preview jgn lupa hala cursor .


  • Template denim : paste dalam  add gadget
  • Blogskin/classic : ikut tutorial bawah ni 

1. Dashboard > Template
2. Tekan Ctrl + f serentak dan cari code </style>
3. Copy code di bawah ni

<style>
#cornerplayer{
z-index:999;
background-color:#000;
width:50px;
height:50px;
border-radius:0px 50px 0px 0px;
-moz-border-radius:0px 50px 0px 0px;
position:fixed;
overflow:hidden;
bottom:0px;
left:0px;
-webkit-transition: opacity 0.8s linear;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
}
#icon{
margin-top:25px;
margin-bottom:20px;
margin-left:-5px;
-webkit-transition: opacity 0.8s linear;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
}
#cornerplayer:hover{
width:200px;
-moz-border-radius:0px;
border-radius:0px;
}
#cornerplayer:hover #icon{
margin-top:10px;
margin-left:0px;
margin-bottom:4px;
}
</style>

merah : color background


4. Paste bawah code </style>
5. Next, cari code </style> juga
6. Copy code di bawah ni
<div id="cornerplayer">
<center>
<div id="icon"><img src="URL ICON MUSIC"/></div>
<div> CODE MUSIC HERE </div>  
</center> </div>
oren : URL icon
hijau : code music


7. Paste di bawah code </style>
8. Preview & save


segment tingkatkan like fanpage by aien hermionie


こんにちは, 안녕하세요 , Assalamualaikum

 CLICK BANNER



.

Wednesday, January 23, 2013

Tutorial : Clipboard Cursor Effect

Tumblr_mekyzycr8w1qclujwo1_500_large

こんにちは, 안녕하세요 , Assalamualaikum. Atin nak pakai benda ni tapi x sesuai untuk citerasa atin pulak haha . Tapi Atin nak bagi korang . Contoh untuk tuto ni. bila korang click mana-mana , nanti akan keluar satu fire pelbagai warna .. nak try tak? klo ikutkan lawa juga , Atin dah try hihi.. korang boleh try juga .

  • Blogskin/classic : paste atas </head>
  • Template Denim/simple : paste dalam Add gadget > HTML/Javascript



<script type="text/javascript">
// <![CDATA[
var sparks=75; // how many sparks per clicksplosion
var speed=33; // how fast - smaller is faster
var bangs=5; // how many can be launched simultaneously (note that using too many can slow the script down)
var colours=new Array('#03f', '#f03', '#0e0', '#93f', '#0cf', '#f93', '#f0c');
//                     blue    red     green   purple  cyan    orange  pink

/****************************
*   Clicksplosion Effect    *
* (c) 2012 mf2fm web-design *
*  http://www.mf2fm.com/rv  *
* DON'T EDIT BELOW THIS BOX *
****************************/
var intensity=new Array();
var Xpos=new Array();
var Ypos=new Array();
var dX=new Array();
var dY=new Array();
var stars=new Array();
var decay=new Array();
var timers=new Array();
var swide=800;
var shigh=600;
var sleft=sdown=0;
var count=0;

function addLoadEvent(funky) {
  var oldonload=window.onload;
  if (typeof(oldonload)!='function') window.onload=funky;
  else window.onload=function() {
    if (oldonload) oldonload();
    funky();
  }
}

addLoadEvent(clicksplode);

function clicksplode() { if (document.getElementById) {
  var i, j;
  window.onscroll=set_scroll;
  window.onresize=set_width;
  document.onclick=eksplode;
  set_width();
  set_scroll();
  for (i=0; i<bangs; i++) for (j=sparks*i; j<sparks+sparks*i; j++) {
    stars[j]=createDiv('*', 13);
    document.body.appendChild(stars[j]);
  }
}}

function createDiv(char, size) {
  var div, sty;
  div=document.createElement('div');
  sty=div.style;
  sty.font=size+'px monospace';
  sty.position='absolute';
  sty.backgroundColor='transparent';
  sty.visibility='hidden';
  sty.zIndex='101';
  div.appendChild(document.createTextNode(char));
  return (div);
}

function bang(N) {
  var i, Z, A=0;
  for (i=sparks*N; i<sparks*(N+1); i++) {
    if (decay[i]) {
      Z=stars[i].style;
      Xpos[i]+=dX[i];
      Ypos[i]+=(dY[i]+=1.25/intensity[N]);
      if (Xpos[i]>=swide || Xpos[i]<0 || Ypos[i]>=shigh+sdown || Ypos[i]<0) decay[i]=1;
 else {
        Z.left=Xpos[i]+'px';
        Z.top=Ypos[i]+'px';
 }
      if (decay[i]==15) Z.fontSize='7px';
      else if (decay[i]==7) Z.fontSize='2px';
      else if (decay[i]==1) Z.visibility='hidden';
 decay[i]--;
}
else A++;
  }
  if (A!=sparks) timers[N]=setTimeout('bang('+N+')', speed);
}

function eksplode(e) {
  var x, y, i, M, Z, N;
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
  N=++count%bangs;
  M=Math.floor(Math.random()*3*colours.length);
  intensity[N]=5+Math.random()*4;
  for (i=N*sparks; i<(N+1)*sparks; i++) {
    Xpos[i]=x;
    Ypos[i]=y-5;
    dY[i]=(Math.random()-0.5)*intensity[N];
    dX[i]=(Math.random()-0.5)*(intensity[N]-Math.abs(dY[i]))*1.25;
    decay[i]=16+Math.floor(Math.random()*16);
    Z=stars[i].style;
    if (M<colours.length) Z.color=colours[i%2?count%colours.length:M];
    else if (M<2*colours.length) Z.color=colours[count%colours.length];
    else Z.color=colours[i%colours.length];
    Z.fontSize='13px';
    Z.visibility='visible';
  }
  clearTimeout(timers[N]);
  bang(N);
}

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-7;
  shigh=sh_min-7;
}

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>

Tutorial : Floating text cursor

Tumblr_lxt5pki8ii1r5evtyo1_500_large

こんにちは, 안녕하세요 , Assalamualaikum. Atin punye tuto ni dah lapok dah >< . Tapi Atin buat juga. siapa yang sudi boleh la try haha ..



  • Blogskin/classic : paste atas </head>
  • Template Denim/simple : paste dalam Add gadget > HTML/Javascript


merah : your text
biru : color text

<script language="javascript">
var text='YOUR TEXT HERE';
var delay=40; // speed of trail
var Xoff=16; // pixel count from the left of the cursor (- values go to left)
var Yoff=0; // pixel count from the top of the cursor (- values go up)
var txtw=10;  // amount of pixel space each character occupies
var beghtml='<font color="#000000"><b>';  // optional html code that effects whole text string such as font color, size, etc.
var endhtml='</b></font>';
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var txtA=new Array();
text=text.split('');
var x1=0;
var y1=-1000;
var t='';
for(i=1;i<=text.length;i++){
t+=(ns4)? '<layer left="0" top="-100" width="'+txtw+'" name="txt'+i+'" height="1">' : '<div id="txt'+i+'" style="position:absolute; top:-100px; left:0px; height:1px; width:'+txtw+'; visibility:visible;">';
t+=beghtml+text[i-1]+endhtml;
t+=(ns4)? '</layer>' : '</div>';
}
document.write(t);
function moveid(id,x,y){
if(ns4)id.moveTo(x,y);
else{
id.style.left=x+'px';
id.style.top=y+'px';
}}
function animate(evt){
x1=Xoff+((ie4||ie5)?event.clientX+document.body.scrollLeft:evt.pageX);
y1=Yoff+((ie4||ie5)?event.clientY+document.body.scrollTop:evt.pageY);
}
function getidleft(id){
if(ns4)return id.left;
else return parseInt(id.style.left);
}
function getidtop(id){
if(ns4)return id.top;
else return parseInt(id.style.top);
}
function getwindowwidth(){
if(ie4||ie5)return document.body.clientWidth+document.body.scrollLeft;
else return window.innerWidth+pageXOffset;
}
function movetxts(){
for(i=text.length;i>1;i=i-1){
if(getidleft(txtA[i-1])+txtw*2>=getwindowwidth()){
moveid(txtA[i-1],0,-1000);
moveid(txtA[i],0,-1000);
}else moveid(txtA[i], getidleft(txtA[i-1])+txtw, getidtop(txtA[i-1]));
}
moveid(txtA[1],x1,y1);
}
window.onload=function(){
for(i=1;i<=text.length;i++)txtA[i]=(ns4)?document.layers['txt'+i]:(ie4)?document.all['txt'+i]:document.getElementById('txt'+i);
if(ns4)document.captureEvents(Event.MOUSEMOVE);
document.onmousemove=animate;
setInterval('movetxts()',delay);
}
</script>

FReebies : Background Part 45

こんにちは, 안녕하세요 , Assalamualaikum. dah ambik sila comment.



http://i.imgur.com/HMIq2z7.gif

http://i.imgur.com/kl6VUFp.gif

http://i.imgur.com/Nldbyk6.gif

http://i.imgur.com/WYJdygO.gif

http://i.imgur.com/eInv1Ql.gif

http://i.imgur.com/XF4o0xL.gif

http://i.imgur.com/HDHzfjR.gif

http://i.imgur.com/VzaluWE.gif

http://i.imgur.com/d2f79PD.gif

http://i.imgur.com/t4cccor.gif

First Ever Giveaway by I & A


こんにちは, 안녕하세요 , Assalamualaikum.

CLICK BANNER UNTUK JOIN


Tag : VIP

Tuesday, January 22, 2013

Tutorial : Falling Snow Effect #3

314173_2746174308965_1039642387_n_large

こんにちは, 안녕하세요 , Assalamualaikum.
Hari ni Atin nak tunjuk korang lagi falling snow yang betul2 punye >< . Ahhh rasa blog kita sejuk beku LOL haha .. Korang nak try tak? Kalau nak tengok boleh click preview bawah ni


  • Blogskin/classic : paste bawah <head>
  • Template Denim/simple : paste dalam Add gadget > HTML/Javascript



<SCRIPT type="text/javascript">
/*
Snow Fall 1 - no images - Java Script
Visit http://rainbow.arch.scriptmania.com/scripts/
  for this script and many more
*/

// Set the number of snowflakes (more than 30 - 40 not recommended)
var snowmax=35

// Set the colors for the snow. Add as many colors as you like
var snowcolor=new Array("#aaaacc","#ddddff","#ccccdd","#f3f3f3","#f0ffff")

// Set the fonts, that create the snowflakes. Add as many fonts as you like
var snowtype=new Array("Times","Arial","Times","Verdana")

// Set the letter that creates your snowflake (recommended: * )
var snowletter="*"

// Set the speed of sinking (recommended values range from 0.3 to 2)
var sinkspeed=0.6

// Set the maximum-size of your snowflakes
var snowmaxsize=30

// Set the minimal-size of your snowflakes
var snowminsize=8

// Set the snowing-zone
// Set 1 for all-over-snowing, set 2 for left-side-snowing
// Set 3 for center-snowing, set 4 for right-side-snowing
var snowingzone=1

///////////////////////////////////////////////////////////////////////////
// CONFIGURATION ENDS HERE
///////////////////////////////////////////////////////////////////////////


// Do not edit below this line
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera

function randommaker(range) {
        rand=Math.floor(range*Math.random())
    return rand
}

function initsnow() {
        if (ie5 || opera) {
                marginbottom = document.body.scrollHeight
                marginright = document.body.clientWidth-15
        }
        else if (ns6) {
                marginbottom = document.body.scrollHeight
                marginright = window.innerWidth-15
        }
        var snowsizerange=snowmaxsize-snowminsize
        for (i=0;i<=snowmax;i++) {
                crds[i] = 0;
            lftrght[i] = Math.random()*15;
            x_mv[i] = 0.03 + Math.random()/10;
                snow[i]=document.getElementById("s"+i)
                snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
                snow[i].size=randommaker(snowsizerange)+snowminsize
                snow[i].style.fontSize=snow[i].size+'px';
                snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
                snow[i].style.zIndex=1000
                snow[i].sink=sinkspeed*snow[i].size/5
                if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                snow[i].posy=randommaker(2*marginbottom-marginbottom-2*snow[i].size)
                snow[i].style.left=snow[i].posx+'px';
                snow[i].style.top=snow[i].posy+'px';
        }
        movesnow()
}

function movesnow() {
        for (i=0;i<=snowmax;i++) {
                crds[i] += x_mv[i];
                snow[i].posy+=snow[i].sink
                snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+'px';
                snow[i].style.top=snow[i].posy+'px';

                if (snow[i].posy>=marginbottom-2*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
                        if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
                        if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
                        if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
                        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
                        snow[i].posy=0
                }
        }
        var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
        document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}
if (browserok) {
        window.onload=initsnow
}

</SCRIPT>

huhu good luck :D

Monday, January 21, 2013

Kenapa Navigate Tak Keluar Ke Page Blogskin?

Tumblr_mgj44mnyst1s199fdo1_500_large

こんにちは, 안녕하세요 , Assalamualaikum.
Atin ada dapat banyak aduan yang katanya navigate tak keluar? keluar mana tu dek? haha keluar kat bahagian page blogskin lah.. Ok memang banyak sangat . Macam korang yang selalu komen kat tuto cara buat blogskin sendiri tu. Ingat kan? yang katanya banyak tak boleh pakai.. Aishh bukan salah atin . Korang tak pandai guna navigate la. --' .

Tak mengapa, Atin akan ajar korang kenapa navigat kat blogskin tak keluar.. Tapi mula2 dulu atin tunjuk cara yang basic, yang code korang selalu jumpa atau jarang jumpa --.


  • Jenis pertama
<a class="navigate" onClick="document.getElementById('entry').
innerHTML=document.getElementById('about').
innerHTML">Profile</a>
  • Jenis ke-dua
<a class="navigate" href="http://fatinhalid.blogspot.com">AtinVIP</a>

Nampak? korang selalu jumpa kat blogskin korang kan? terutama bagi newbie . Mesti akan perasan code atas ni dulu . Nampaknya memang keliru pada code navigate pertama .Now Atin terang dulu yang pertama

<a class="navigate" onClick="document.getElementById('entry').
innerHTML=document.getElementById('about').
innerHTML">Profile</a>


MERAH : nampakkan ape tu? title? navigate? . Semua salah . Ini kalau bahasa htmlnya kita panggil "<class" . ataus "<div" . Perasan , nampakkan perbezaannya? Tapi sama maksud. Kalau korang guna ini automatic keluar page tapi tak keluar dari blogskin >< . And kalau ikut pada code navigate tu. code kepada "CSS" .
Contohnya :

.navigate {

background:#fff;
width:50px;
display:inline-block;
text-align:center;
color:#000;
{

p/s : Atas ni adalah "class" bagi box untuk navigate. Tau kan? Ahh tu lah tajuk bagi class.


HIJAU : Korang juga akan jumpa perkataan "entry" dalam mana2 blogskin pun. Haaa. ini yang paling wajib , and yang telah meng outokan page di blogskin korang . Nampak kan? Ishh ni yang marah ni huaa >< .Ia juga lebih kepada "ID" . Kalau tak ada ID mesti tak boleh masukkan? Ahh macam ini jugak. Kalau tak ada ID ini memang korang tak boleh masuk ke outo page blogskin . And ia juga x semstinya perkataan "entry" a. Ada juga taruk pekataan "blog" kan? . So dengan adanya "entry" ini, korag akan jumpa page . atau terletak pada "post entry" .
Contohnya :


<div id="entry">
<blogger><div class="h1"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div>

p/s:See? korang code tu akan jumpa kat "<div id="entry">" . Ini bernakna akan jumpa pahagian post .


BIRU : Ini juga akan ada masalah pada navigate korang . Pendapat Atinlah , ini adalah 'penolong' kepda page entry korang . Kalau yang hijau tu lebih kepada 'ketua' . Lawak ke? Ahh lawak2 jugak tapi tu la masalah korang yang tak timbul2 kat post korang >< . jai 'error'  teruskan? ahah . Inilah yang baru dipanggil 'pages' segala page di post entry. Dari situ korang dapat jumpa dengan page di post korang .
Contohnya :

<div id="about" style="display:none;">
<div class="h1"><span class="titleh1" style="color: #FFF;"> </span> About me</div>
<br>
Who I am? I am a little girl who is still studying in secondary school. bla bla bla bla
<br><br>
</div>

p/s : Nampak3? kan dah jumpa tu.. So kalau nak ke page korang akan jumpa code
 "<div id="about" style="display:none;">" . So akan terjumpalah page outo kat post >< ..

PINK : untuk pink just title je. Pun boleh jumpa kat bahagian 'about' . Bawah tu lah akan jumpa  title . Tapi yang pink ni just pada title kat dalam box navigate.


Dah habis. Kan senang tu? Ha . yang itu yang buat korang terkial-kial tak jumpa page outo lah kiranya haha . Dah click tapi tak muncul.. itu yang tak boleh nak jumpa .


Ini pulak untuk bahagian ke-2 . Yang ini baru ke luar dari blogskin , maknya jumpa kat tempat lain haha..



OREN : yup ! yang "<a" ini bermaksut , bila korang click , akan ke page lain yang tak ada di blgskin korang . Tak tau lah dah melayang mana tu . haha Ikut pada " link" ..


So. pastikan navigate korang itu betul . Kalau tak betul. Jawapnya? korang tensionlah hahah ..

Freebies : Cursor Part 22 [INFINITE]

Tumblr_meyyxjikrs1r2mivjo1_500_large

こんにちは, 안녕하세요 , Assalamualaikum. sila komen ketika mahu ambil hak atin :D










Saturday, January 19, 2013

Tutorial : Hide Music Player #2

Tumblr_mf2vesflcq1qfqm2lo1_500_large

안녕하세요 , こんにちは . Assalamualaikum. Atin nak ajar korang hide music . Untuk kali ni lain kot huhu.. Kalau tuto ni boleh guna untuk music jenis billy style je. Ok lah jom buat hihi.. Contoh bawah ni..siap adalist song lagi..dia lebih kurang macam tuto yang bertama


1. Dashboard > Template
2. Tekan Ctrl + f serentak dan cari code </style>
3. Copy code di bawah ni


<style>
#editthis{
    /* EDIT THIS STUFF TO POSITION YOUR MUSIC PLAYER */
    position:fixed;
    top:20px; /* YOU CAN CHANGE THIS TO BOTTOM */
    left:20px; /* YOU CAN CHANGE THIS TO RIGHT */
    z-index:99;}
   
/* I DON'T RECOMMEND TOUCHING THIS STUFF */
#music1{
    position:fixed;
    padding:2px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;}
   
#music1:hover #music2{
    opacity:0;
    margin-top:-25px;
    z-index:-1;}
   
#music1:hover #music3{
    opacity:1;
    margin-top:-5px;
    z-index:99;}
   
#music1:hover #musiclist{
    opacity:1;}
   
#music2{
    /* THIS IS THE GIF DIV */
    opacity:1;
    background-color:#fff;
    border:1px dotted #ccc;
    padding:6px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}
   
#music3{
    /* THIS IS THE ACTUAL MUSIC PLAYER DIV */
    opacity:0;
    position:fixed;
    background-color:#fff;
    border:1px dashed #ccc;
    width:55px;
    height:20px;
    z-index:99;
    margin-left:-5px;
    overflow:hidden;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}
   
#musiclist{
    /* THIS IS THE PLAYLIST DIV */
    opacity:0;
    position:fixed;
    padding:6px;
    border:1px dashed #ccc;
    margin-left:10px;
    margin-top:10px;
    font-family:consolas;
    font-size:8px;
    background-color:#fff;
    width:120px;
    color:#999;
    text-transform:uppercase;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;}
   
#musiclist h1{
    /*THIS IS THE PLAYLIST TITLE SETTINGS*/
    font-family:consolas;
    font-size:11px;
    margin-top:0px;
    margin-bottom:2px;
    font-style:normal;
    font-weight:normal;
    color:#1bbafc; /*THIS IS THE PLAYLIST TITLE COLOR*/
    border-bottom:1px dotted #ccc;
    text-align:left;
    text-transform:uppercase;}
</style>

merah : color border
kuning : color title playlist

4. Paste bawah code </style>
5. Next, cari code </style> juga
6. Copy code di bawah ni

<div id="editthis">
<div id="music1">
<div id="music2">
<!-- YOU CAN CHANGE THE MUSIC GIF BELOW. -->
<img src="http://i122.photobucket.com/albums/o260/mhilka/minigifs/minigif01.gif"></div>
<div id="music3">
<Div style="margin-top:4px;">
PUT CODE MUSIC HERE
 
</div>
</div>
<div id="musiclist">
<h1>Playlist</h1>
<!-- PUT YOUR MUSIC TITLES HERE. . -->
01. Song1 <br>
02. Song2 <br>
03. Song3 <br>
</div>
</div>
</div>
biru : icon music
hijau : title list
oren : title lagu

7. Paste di bawah code </style>
8. Preview & save